From af2d4426987cd9da15ca41f1e5e97aeba80ea974 Mon Sep 17 00:00:00 2001
From: Romain Crestey <romain.crestey@radiofrance.com>
Date: Mon, 3 Jul 2023 17:51:42 +0200
Subject: [PATCH] french translation

---
 .github/ISSUE_TEMPLATE.md                     |   29 +-
 .github/ISSUE_TEMPLATE/bug_report.yml         |   50 -
 .github/ISSUE_TEMPLATE/config.yml             |    5 -
 .github/ISSUE_TEMPLATE/feature_request.yml    |   42 -
 .github/PULL_REQUEST_TEMPLATE.md              |   15 +-
 .github/workflows/track-docs.yml              |   47 +
 README.md                                     |    6 +
 .../01-getting-started/01-introduction.md     |   29 +-
 .../docs/01-getting-started/meta.json         |    2 +-
 .../01-svelte-components.md                   |  202 +-
 .../02-template-syntax/02-basic-markup.md     |   72 +-
 .../02-template-syntax/03-logic-blocks.md     |   81 +-
 .../02-template-syntax/04-special-tags.md     |   23 +-
 .../05-element-directives.md                  |  431 +++--
 .../06-component-directives.md                |   79 +-
 .../02-template-syntax/07-special-elements.md |  221 +--
 .../docs/02-template-syntax/meta.json         |    2 +-
 documentation/docs/03-runtime/01-svelte.md    |   73 +-
 .../docs/03-runtime/02-svelte-store.md        |   68 +-
 .../docs/03-runtime/03-svelte-motion.md       |   48 +-
 .../docs/03-runtime/04-svelte-transition.md   |  116 +-
 .../docs/03-runtime/05-svelte-animate.md      |   21 +-
 .../docs/03-runtime/06-svelte-easing.md       |   27 +-
 .../docs/03-runtime/07-svelte-action.md       |   24 +-
 .../04-compiler-and-api/01-svelte-compiler.md |   83 +-
 .../02-client-side-component-api.md           |   50 +-
 .../03-server-side-component-api.md           |   22 +-
 .../04-custom-elements-api.md                 |   81 +-
 .../docs/04-compiler-and-api/meta.json        |    2 +-
 documentation/docs/05-misc/01-faq.md          |  122 +-
 .../docs/05-misc/02-accessibility-warnings.md |  133 +-
 documentation/docs/05-misc/03-typescript.md   |   94 +-
 .../docs/05-misc/04-v4-migration-guide.md     |  127 +-
 documentation/docs/05-misc/meta.json          |    2 +-
 .../docs/06-legacy/01-svelte-register.md      |   10 +-
 documentation/docs/06-legacy/meta.json        |    2 +-
 .../docs/07-glossary/01-development.md        |  296 +++
 documentation/docs/07-glossary/02-web.md      |  295 +++
 .../docs/07-glossary/03-javascript.md         |  160 ++
 documentation/docs/07-glossary/04-sveltejs.md |   90 +
 documentation/docs/07-glossary/meta.json      |    3 +
 .../00-introduction/00-hello-world/App.svelte |    4 +-
 .../00-introduction/00-hello-world/meta.json  |    4 +-
 .../01-dynamic-attributes/App.svelte          |    8 +-
 .../01-dynamic-attributes/meta.json           |    4 +-
 .../00-introduction/02-styling/App.svelte     |    4 +-
 .../00-introduction/02-styling/meta.json      |    4 +-
 .../03-nested-components/App.svelte           |    6 +-
 .../03-nested-components/Nested.svelte        |    2 +-
 .../03-nested-components/meta.json            |    4 +-
 .../00-introduction/04-html-tags/App.svelte   |    2 +-
 .../00-introduction/04-html-tags/meta.json    |    2 +-
 .../00-reactive-assignments/App.svelte        |    3 +-
 .../00-reactive-assignments/meta.json         |    4 +-
 .../01-reactive-declarations/App.svelte       |    6 +-
 .../01-reactive-declarations/meta.json        |    4 +-
 .../02-reactive-statements/App.svelte         |    7 +-
 .../02-reactive-statements/meta.json          |    4 +-
 .../examples/01-reactivity/meta.json          |    2 +-
 .../02-props/00-declaring-props/App.svelte    |    2 +-
 .../02-props/00-declaring-props/Nested.svelte |    2 +-
 .../02-props/00-declaring-props/meta.json     |    2 +-
 .../02-props/01-default-values/App.svelte     |    4 +-
 .../02-props/01-default-values/Nested.svelte  |    4 +-
 .../02-props/01-default-values/meta.json      |    2 +-
 .../02-props/02-spread-props/App.svelte       |    4 +-
 .../02-props/02-spread-props/Info.svelte      |    6 +-
 .../02-props/02-spread-props/meta.json        |    2 +-
 documentation/examples/02-props/meta.json     |    2 +-
 .../examples/03-logic/00-if-blocks/App.svelte |    4 +-
 .../examples/03-logic/00-if-blocks/meta.json  |    2 +-
 .../03-logic/01-else-blocks/App.svelte        |    4 +-
 .../03-logic/01-else-blocks/meta.json         |    2 +-
 .../03-logic/02-else-if-blocks/App.svelte     |    6 +-
 .../03-logic/02-else-if-blocks/meta.json      |    2 +-
 .../03-logic/03-each-blocks/App.svelte        |   26 +-
 .../03-logic/03-each-blocks/meta.json         |    2 +-
 .../03-logic/04-keyed-each-blocks/App.svelte  |   12 +-
 .../04-keyed-each-blocks/Thing.svelte         |    6 +-
 .../03-logic/04-keyed-each-blocks/meta.json   |    2 +-
 .../03-logic/05-await-blocks/App.svelte       |   10 +-
 .../03-logic/05-await-blocks/meta.json        |    2 +-
 documentation/examples/03-logic/meta.json     |    2 +-
 .../04-events/00-dom-events/App.svelte        |    2 +-
 .../04-events/00-dom-events/meta.json         |    2 +-
 .../04-events/01-inline-handlers/App.svelte   |    4 +-
 .../04-events/01-inline-handlers/meta.json    |    2 +-
 .../04-events/02-event-modifiers/App.svelte   |    4 +-
 .../04-events/02-event-modifiers/meta.json    |    2 +-
 .../04-events/03-component-events/App.svelte  |    2 +-
 .../03-component-events/Inner.svelte          |    4 +-
 .../04-events/03-component-events/meta.json   |    2 +-
 .../04-events/04-event-forwarding/App.svelte  |    2 +-
 .../04-event-forwarding/Inner.svelte          |    4 +-
 .../04-event-forwarding/Outer.svelte          |    2 +-
 .../04-events/04-event-forwarding/meta.json   |    2 +-
 .../05-dom-event-forwarding/App.svelte        |    2 +-
 .../CustomButton.svelte                       |    2 +-
 .../05-dom-event-forwarding/meta.json         |    2 +-
 documentation/examples/04-events/meta.json    |    2 +-
 .../05-bindings/00-text-inputs/App.svelte     |    4 +-
 .../05-bindings/00-text-inputs/meta.json      |    2 +-
 .../05-bindings/01-numeric-inputs/meta.json   |    2 +-
 .../05-bindings/02-checkbox-inputs/App.svelte |    8 +-
 .../05-bindings/02-checkbox-inputs/meta.json  |    2 +-
 .../05-bindings/03-group-inputs/App.svelte    |   34 +-
 .../05-bindings/03-group-inputs/meta.json     |    2 +-
 .../05-bindings/04-textarea-inputs/App.svelte |    6 +-
 .../05-bindings/04-textarea-inputs/meta.json  |    2 +-
 .../05-bindings/05-file-inputs/App.svelte     |   14 +-
 .../05-bindings/05-file-inputs/meta.json      |    2 +-
 .../05-bindings/06-select-bindings/App.svelte |   17 +-
 .../05-bindings/06-select-bindings/meta.json  |    2 +-
 .../07-multiple-select-bindings/App.svelte    |   24 +-
 .../07-multiple-select-bindings/meta.json     |    2 +-
 .../08-each-block-bindings/App.svelte         |   18 +-
 .../08-each-block-bindings/meta.json          |    2 +-
 .../05-bindings/09-media-elements/App.svelte  |   23 +-
 .../05-bindings/09-media-elements/meta.json   |    2 +-
 .../05-bindings/10-dimensions/App.svelte      |    4 +-
 .../12-component-bindings/App.svelte          |    4 +-
 .../12-component-bindings/Keypad.svelte       |    4 +-
 .../12-component-bindings/meta.json           |    2 +-
 documentation/examples/05-bindings/meta.json  |    2 +-
 .../06-lifecycle/00-onmount/App.svelte        |    6 +-
 .../06-lifecycle/01-ondestroy/App.svelte      |    4 +-
 .../examples/06-lifecycle/02-update/meta.json |    2 +-
 .../examples/06-lifecycle/03-tick/App.svelte  |    2 +-
 documentation/examples/06-lifecycle/meta.json |    2 +-
 .../07-stores/00-writable-stores/App.svelte   |    2 +-
 .../00-writable-stores/Resetter.svelte        |    2 +-
 .../07-stores/00-writable-stores/meta.json    |    2 +-
 .../01-auto-subscriptions/App.svelte          |    2 +-
 .../01-auto-subscriptions/Resetter.svelte     |    2 +-
 .../07-stores/01-auto-subscriptions/meta.json |    2 +-
 .../07-stores/02-readable-stores/App.svelte   |    4 +-
 .../07-stores/02-readable-stores/meta.json    |    2 +-
 .../07-stores/03-derived-stores/App.svelte    |    6 +-
 .../07-stores/03-derived-stores/meta.json     |    2 +-
 .../07-stores/04-custom-stores/App.svelte     |    4 +-
 .../07-stores/04-custom-stores/meta.json      |    2 +-
 .../examples/08-motion/00-tweened/meta.json   |    2 +-
 .../examples/08-motion/01-spring/App.svelte   |    5 +-
 .../examples/08-motion/01-spring/meta.json    |    2 +-
 documentation/examples/08-motion/meta.json    |    2 +-
 .../09-transitions/00-transition/App.svelte   |    2 +-
 .../09-transitions/00-transition/meta.json    |    2 +-
 .../App.svelte                                |    2 +-
 .../meta.json                                 |    2 +-
 .../09-transitions/02-in-and-out/App.svelte   |    2 +-
 .../09-transitions/02-in-and-out/meta.json    |    2 +-
 .../03-custom-css-transitions/App.svelte      |    2 +-
 .../03-custom-css-transitions/meta.json       |    2 +-
 .../04-custom-js-transitions/App.svelte       |    6 +-
 .../04-custom-js-transitions/meta.json        |    2 +-
 .../05-transition-events/App.svelte           |   14 +-
 .../05-transition-events/meta.json            |    2 +-
 .../06-deferred-transitions/App.svelte        |    5 +-
 .../06-deferred-transitions/meta.json         |    2 +-
 .../10-animations/00-animate/App.svelte       |   18 +-
 .../10-animations/00-animate/meta.json        |    2 +-
 .../11-easing/00-easing/Controls.svelte       |    6 +-
 .../examples/11-easing/00-easing/meta.json    |    2 +-
 documentation/examples/11-easing/meta.json    |    2 +-
 .../examples/12-svg/01-clock/App.svelte       |   12 +-
 .../examples/12-svg/01-clock/meta.json        |    2 +-
 .../examples/12-svg/02-bar-chart/App.svelte   |    8 +-
 .../examples/12-svg/02-bar-chart/meta.json    |    2 +-
 .../examples/12-svg/03-area-chart/App.svelte  |   18 +-
 .../examples/12-svg/03-area-chart/meta.json   |    2 +-
 .../examples/12-svg/04-scatterplot/App.svelte |    2 +-
 .../12-svg/04-scatterplot/Scatterplot.svelte  |    6 +-
 .../examples/12-svg/04-scatterplot/meta.json  |    2 +-
 .../12-svg/05-svg-transitions/App.svelte      |    4 +-
 .../12-svg/05-svg-transitions/meta.json       |    2 +-
 .../examples/13-actions/00-actions/App.svelte |    6 +-
 .../examples/13-actions/00-actions/meta.json  |    2 +-
 .../App.svelte                                |    4 +-
 .../01-adding-parameters-to-actions/meta.json |    2 +-
 .../13-actions/03-actions-pannable/meta.json  |    2 +-
 .../examples/14-classes/00-classes/meta.json  |    2 +-
 .../14-classes/01-class-shorthand/App.svelte  |    4 +-
 .../14-classes/01-class-shorthand/meta.json   |    2 +-
 .../15-composition/00-slots/App.svelte        |    4 +-
 .../01-slot-fallbacks/App.svelte              |    4 +-
 .../01-slot-fallbacks/Box.svelte              |    2 +-
 .../01-slot-fallbacks/meta.json               |    2 +-
 .../15-composition/02-named-slots/App.svelte  |    6 +-
 .../02-named-slots/ContactCard.svelte         |    6 +-
 .../15-composition/02-named-slots/meta.json   |    2 +-
 .../15-composition/03-slot-props/App.svelte   |   13 +-
 .../15-composition/03-slot-props/meta.json    |    2 +-
 .../04-conditional-slots/Profile.svelte       |    6 +-
 .../04-conditional-slots/meta.json            |    2 +-
 .../15-composition/05-modal/App.svelte        |   47 +-
 .../15-composition/05-modal/Modal.svelte      |    7 +-
 .../15-composition/05-modal/meta.json         |    2 +-
 .../examples/15-composition/meta.json         |    2 +-
 .../16-context/00-context-api/meta.json       |    2 +-
 documentation/examples/16-context/meta.json   |    2 +-
 .../00-svelte-self/App.svelte                 |   10 +-
 .../01-svelte-component/BlueThing.svelte      |    4 +-
 .../02-svelte-element/App.svelte              |    2 +-
 .../03-svelte-window/App.svelte               |    4 +-
 .../04-svelte-window-bindings/App.svelte      |    6 +-
 .../04-svelte-window-bindings/meta.json       |    2 +-
 .../05-svelte-document/App.svelte             |    5 +-
 .../06-svelte-body/App.svelte                 |    2 +-
 .../07-svelte-head/App.svelte                 |    2 +-
 .../examples/17-special-elements/meta.json    |    2 +-
 .../01-module-exports/App.svelte              |    2 +-
 .../01-module-exports/AudioPlayer.svelte      |    2 +-
 .../01-module-exports/meta.json               |    2 +-
 .../examples/19-debugging/00-debug/App.svelte |    2 +-
 .../examples/19-debugging/00-debug/meta.json  |    2 +-
 documentation/examples/19-debugging/meta.json |    2 +-
 .../20-7guis/01-7guis-counter/App.svelte      |    2 +-
 .../20-7guis/01-7guis-counter/meta.json       |    2 +-
 .../20-7guis/02-7guis-temperature/meta.json   |    2 +-
 .../03-7guis-flight-booker/App.svelte         |   14 +-
 .../20-7guis/03-7guis-flight-booker/meta.json |    2 +-
 .../20-7guis/04-7guis-timer/App.svelte        |    6 +-
 .../20-7guis/04-7guis-timer/meta.json         |    2 +-
 .../20-7guis/05-7guis-crud/App.svelte         |   12 +-
 .../20-7guis/06-7guis-circles/App.svelte      |   18 +-
 .../20-7guis/06-7guis-circles/meta.json       |    2 +-
 .../01-hacker-news/App.svelte                 |    6 +-
 .../01-hacker-news/Item.svelte                |    4 +-
 .../01-hacker-news/List.svelte                |    2 +-
 .../01-hacker-news/Summary.svelte             |   11 +-
 .../02-immutable-data/App.svelte              |   10 +-
 .../02-immutable-data/ImmutableTodo.svelte    |   14 +-
 .../02-immutable-data/MutableTodo.svelte      |   14 +-
 .../02-immutable-data/meta.json               |    2 +-
 i18n.md                                       |  260 +++
 packages/svelte/src/compiler/types/index.d.ts |  288 +++
 packages/svelte/src/main/public.d.ts          |  205 ++
 .../svelte/src/runtime/action/public.d.ts     |   31 +-
 packages/svelte/src/runtime/store/public.d.ts |   37 +-
 pnpm-lock.yaml                                | 1688 ++++-------------
 sites/svelte.dev/.env                         |    5 +
 sites/svelte.dev/scripts/get_contributors.js  |    4 +-
 sites/svelte.dev/src/app.html                 |    2 +-
 sites/svelte.dev/src/lib/server/docs/index.js |   19 +-
 sites/svelte.dev/src/lib/time.js              |    2 +-
 .../src/routes/(authed)/apps/+page.svelte     |   35 +-
 .../routes/(authed)/repl/[id]/+page.svelte    |    2 +-
 .../(authed)/repl/[id]/AppControls.svelte     |   23 +-
 .../routes/(authed)/repl/[id]/UserMenu.svelte |    4 +-
 .../(authed)/repl/api/[id].json/+server.js    |    4 +-
 .../routes/(authed)/repl/embed/+page.svelte   |    4 +-
 sites/svelte.dev/src/routes/+layout.server.js |   10 +-
 sites/svelte.dev/src/routes/+layout.svelte    |   32 +-
 sites/svelte.dev/src/routes/+page.svelte      |   42 +-
 .../src/routes/_components/Demo.svelte        |   17 +-
 .../src/routes/_components/Hero.svelte        |   13 +-
 .../_components/Supporters/index.svelte       |   12 +-
 .../_components/WhosUsingSvelte/index.svelte  |   14 +-
 .../src/routes/blog/[slug]/+page.svelte       |    4 +-
 sites/svelte.dev/src/routes/chat/+server.js   |    2 +-
 .../src/routes/docs/[slug]/+page.svelte       |   17 +-
 .../src/routes/examples/[slug]/+page.svelte   |    6 +-
 .../svelte.dev/src/routes/nav.json/+server.js |    4 +-
 .../svelte.dev/src/routes/search/+page.svelte |   17 +-
 .../src/routes/tutorial/[slug]/+page.svelte   |    8 +-
 265 files changed, 3911 insertions(+), 3104 deletions(-)
 delete mode 100644 .github/ISSUE_TEMPLATE/bug_report.yml
 delete mode 100644 .github/ISSUE_TEMPLATE/config.yml
 delete mode 100644 .github/ISSUE_TEMPLATE/feature_request.yml
 create mode 100644 .github/workflows/track-docs.yml
 create mode 100644 documentation/docs/07-glossary/01-development.md
 create mode 100644 documentation/docs/07-glossary/02-web.md
 create mode 100644 documentation/docs/07-glossary/03-javascript.md
 create mode 100644 documentation/docs/07-glossary/04-sveltejs.md
 create mode 100644 documentation/docs/07-glossary/meta.json
 create mode 100644 i18n.md
 create mode 100644 packages/svelte/src/compiler/types/index.d.ts
 create mode 100644 packages/svelte/src/main/public.d.ts

diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 220af11834..9b22dd4f21 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,28 +1,7 @@
----
-Before filing an issue we'd appreciate it if you could take a moment to ensure
-there isn't already an open issue or pull-request.
----
+## Attention
 
-If there's an existing issue, please add a :+1: reaction to the description of
-the issue. One way we prioritize issues is by the number of :+1: reactions on
-their descriptions. Please DO NOT add `+1` or :+1: comments.
+Vous vous apprêtez à ouvrir une issue sur le projet de traduction francophone de la documentation de Svelte.
 
-### Feature requests and proposals
+Ce projet est uniquement dédié à de la traduction, et nous n'accepterons donc que les issues dont l'objet est l'ajout ou la modification de traductions, ou tout outillage associé.
 
-We're excited to hear how we can make Svelte better. Please add as much detail
-as you can on your use case. To propose an implementation of a large feature or
-change, please create an [RFC](https://github.com/sveltejs/rfcs).
-
-### Bugs
-
-If you're filing an issue about a bug please include as much information
-as you can including the following.
-
-- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
-- Your operating system: (e.x. OS X 10, Windows XP, etc)
-- Svelte version (Please check you can reproduce the issue with the latest release!)
-- Whether your project uses Webpack or Rollup
-
-- _Repeatable steps to reproduce the issue_
-
-## Thanks for being part of Svelte!
+Pour toute issue liée au projet Svelte en lui-même, merci de les ouvrir sur le [repository officiel](https://github.com/sveltejs/svelte/issues).
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
deleted file mode 100644
index 2e484e5ca2..0000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-name: "\U0001F41E Bug report"
-description: Report an issue with Svelte
-labels: ['triage: bug']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
-      placeholder: Bug description
-    validations:
-      required: true
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: Please provide a link to a repo or REPL that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed.
-      placeholder: Reproduction
-    validations:
-      required: true
-  - type: textarea
-    id: logs
-    attributes:
-      label: Logs
-      description: 'Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.'
-      render: shell
-  - type: textarea
-    id: system-info
-    attributes:
-      label: System Info
-      description: Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers`
-      render: shell
-      placeholder: System, Binaries, Browsers
-    validations:
-      required: true
-  - type: dropdown
-    id: severity
-    attributes:
-      label: Severity
-      description: Select the severity of this issue
-      options:
-        - annoyance
-        - blocking an upgrade
-        - blocking all usage of svelte
-    validations:
-      required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
deleted file mode 100644
index ee3e5a41b9..0000000000
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Discord Chat
-    url: https://svelte.dev/chat
-    about: Ask questions and discuss with other Svelte users in real time.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
deleted file mode 100644
index 08aa9adcb9..0000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-name: 'Feature Request'
-description: Request a new Svelte feature
-labels: [enhancement]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to request this feature! If your feature request is complex or substantial enough to warrant in-depth discussion, maintainers may close the issue and ask you to open an [RFC](https://github.com/sveltejs/rfcs).
-  - type: textarea
-    id: problem
-    attributes:
-      label: Describe the problem
-      description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.
-      placeholder: I'm always frustrated when...
-    validations:
-      required: true
-  - type: textarea
-    id: solution
-    attributes:
-      label: Describe the proposed solution
-      description: Please provide a clear and concise description of what you would like to happen.
-      placeholder: I would like to see...
-    validations:
-      required: true
-  - type: textarea
-    id: alternatives
-    attributes:
-      label: Alternatives considered
-      description: "Please provide a clear and concise description of any alternative solutions or features you've considered."
-    validations:
-      required: true
-  - type: dropdown
-    id: importance
-    attributes:
-      label: Importance
-      description: How important is this feature to you?
-      options:
-        - nice to have
-        - would make my life easier
-        - i cannot use svelte without it
-    validations:
-      required: true
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 49d60aecaa..63e6f2fa47 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,14 +1,7 @@
-## Svelte compiler rewrite
+## Attention
 
-Please note that [the Svelte codebase is currently being rewritten](https://svelte.dev/blog/runes). Thus, it's best to hold off on new features or refactorings for the time being.
+Vous vous apprêtez à ouvrir une PR sur le projet de traduction francophone de la documentation de Svelte.
 
-### Before submitting the PR, please make sure you do the following
+Ce projet est uniquement dédié à de la traduction, et nous n'accepterons donc que les PRs dont l'objet est l'ajout ou la modification de traductions, ou tout outillage associé.
 
-- [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
-- [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
-- [ ] This message body should clearly illustrate what problems it solves.
-- [ ] Ideally, include a test that fails without this PR but passes with it.
-
-### Tests and linting
-
-- [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`
+Pour toute PR liée au projet Svelte en lui-même, merci de les ouvrir sur le [repository officiel](https://github.com/sveltejs/svelte/pulls).
diff --git a/.github/workflows/track-docs.yml b/.github/workflows/track-docs.yml
new file mode 100644
index 0000000000..27f39bc462
--- /dev/null
+++ b/.github/workflows/track-docs.yml
@@ -0,0 +1,47 @@
+name: Docs tracker
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 3 * * *'
+
+jobs:
+  track-docs:
+    runs-on: ubuntu-latest
+    name: Checking Docs
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Svelte docs new commits
+        uses: AlexxNB/track-commits-to-issue@master
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          owner: sveltejs
+          repo: svelte
+          dir: documentation
+  track-site:
+    runs-on: ubuntu-latest
+    name: Checking Site
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Svelte site new commits
+        uses: AlexxNB/track-commits-to-issue@master
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          owner: sveltejs
+          repo: svelte
+          dir: sites/svelte.dev
+  track-svelte:
+    runs-on: ubuntu-latest
+    name: Checking Svelte core
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Svelte new commits
+        uses: AlexxNB/track-commits-to-issue@master
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          owner: sveltejs
+          repo: svelte
+          dir: packages/svelte/src
diff --git a/README.md b/README.md
index 4dbfee3823..f2630c10aa 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,12 @@ The source code for https://svelte.dev lives in the [sites](https://github.com/s
 
 Probably not, but it's possible. If you can't seem to access any `.dev` sites, check out [this SuperUser question and answer](https://superuser.com/q/1413402).
 
+## Translating Svelte docs
+
+This is the french version of the Svelte website.
+
+Read more about this was done [here](i18n.md).
+
 ## License
 
 [MIT](LICENSE.md)
diff --git a/documentation/docs/01-getting-started/01-introduction.md b/documentation/docs/01-getting-started/01-introduction.md
index 8d3c41ce1a..5987290826 100644
--- a/documentation/docs/01-getting-started/01-introduction.md
+++ b/documentation/docs/01-getting-started/01-introduction.md
@@ -2,13 +2,18 @@
 title: Introduction
 ---
 
-Welcome to the Svelte reference documentation! This is intended as a resource for people who already have some familiarity with Svelte and want to learn more about using it.
+Bienvenue sur la documentation Svelte de référence ! Ces pages sont pensées comme une ressource utile pour des personnes ayant déjà une certaine familiarité avec Svelte, et souhaitant en apprendre davantage.
 
-If that's not you (yet), you may prefer to visit the [interactive tutorial](https://learn.svelte.dev) or the [examples](/examples) before consulting this reference. You can try Svelte online using the [REPL](/repl). Alternatively, if you'd like a more fully-featured environment, you can try Svelte on [StackBlitz](https://sveltekit.new).
+Si ce n'est pas (encore) le cas pour vous, vous préférerez probablement jeter un oeil au [tutoriel interactif](/tutorial) ou aux [exemples](/examples) avant de consulter cette section. Vous pouvez essayez Svelte en ligne en utilisant le [REPL](/repl), ou bien sur [StackBlitz](https://sveltekit.new) si vous préférez un environnement de développement plus complet.
 
-## Start a new project
+> Cette documentation en français, ainsi que l'intégralité du contenu en français de ce site, sont une **traduction bénévole et non officielle** de la [documentation](PUBLIC_SVELTE_SITE_URL/docs) et du [site](PUBLIC_SVELTE_SITE_URL) officiels (en anglais), qui restent la référence. N'hésitez pas à y jeter un oeil. Vous pouvez aussi [nous faire part de vos suggestions de traduction](https://github.com/PUBLIC_GITHUB_ORG/svelte/issues) si celles que vous trouverez dans ces pages ne vous conviennent pas.
+>
+> Vous trouverez parfois des termes non traduits, comme <span class="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span> ou encore
+> <span class="vo">[bundler](/docs/web#bundler-packager)</span>. Ces termes sont en général utilisés tels quels en français, et nous avons choisi de les laisser ainsi dans la documentation française. N'hésitez pas à suivre les liens proposés, qui vous dirigeront vers un glossaire fournissant quelques explications.
 
-We recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
+## Démarrer un nouveau projet
+
+Nous recommandons d'utiliser [SvelteKit](PUBLIC_KIT_SITE_URL/), le <span class="vo">[framework](/docs/web#framework)</span> d'application officiel créé par l'équipe Svelte :
 
 ```
 npm create svelte@latest myapp
@@ -17,18 +22,18 @@ npm install
 npm run dev
 ```
 
-SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, deployment, and SSR support. [SvelteKit](https://kit.svelte.dev/) uses [Vite](https://vitejs.dev/) to build your code.
+SvelteKit se charge d'exécuter [le compilateur Svelte](https://www.npmjs.com/package/svelte) pour convertir vos fichiers `.svelte` en fichiers `.js` qui créent le DOM, et en fichiers `.css` qui le stylisent. Il fournit également tout ce dont vous avez besoin pour créer une application web, comme un serveur de développement, du <span class="vo">[routing](/docs/web#routing)</span>, et des outils de déploiement. [SvelteKit](PUBLIC_KIT_SITE_URL/) utilise [Vite](https://vitejs.dev/) pour empaqueter votre code.
 
-### Alternatives to SvelteKit
+### Alternatives à SvelteKit
 
-If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
+Si vous ne souhaitez pas utiliser SvelteKit, vous pouvez aussi utiliser Svelte (sans SvelteKit) avec Vite en exécutant `npm create vite@latest`, puis en choisissant l'option `svelte`. De cette manière, `npm run build` génèrera les fichiers HTML, JS et CSS dans le dossier `dist`. Dans la plupart des cas, vous aurez aussi probablement besoin de [choisir une librairie de routing](/faq#is-there-a-router).
 
-Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
+Il existe également des [plugins pour les bundlers web majeurs](https://sveltesociety.dev/tools#bundling) pour gérer la compilation Svelte — qui génèreront les `.js` et `.css` à insérer dans votre HTML — mais la plupart ne gèreront pas pas le <span class="vo">[rendu côté serveur (SSR)](/docs/web#server-side-rendering)</span>.
 
-## Editor tooling
+## Outillage d'éditeur
 
-The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
+L'équipe Svelte maintient une extension [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), et des intégrations existent également pour d'autres [éditeurs](https://sveltesociety.dev/tools#editor-support) ou outils.
 
-## Getting help
+## Obtenir de l'aide
 
-Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).
+Si vous rencontrez des difficultés, vous trouverez de l'aide sur le [Discord officiel](PUBLIC_SVELTE_SITE_URL/chat) ou sur le [Discord francophone](/chat). Vous trouverez également des réponses sur [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
diff --git a/documentation/docs/01-getting-started/meta.json b/documentation/docs/01-getting-started/meta.json
index 345e69a3c2..e0a37ca96e 100644
--- a/documentation/docs/01-getting-started/meta.json
+++ b/documentation/docs/01-getting-started/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Getting Started"
+	"title": "Bien commencer"
 }
diff --git a/documentation/docs/02-template-syntax/01-svelte-components.md b/documentation/docs/02-template-syntax/01-svelte-components.md
index 7d4abb7b6a..b48b72aa12 100644
--- a/documentation/docs/02-template-syntax/01-svelte-components.md
+++ b/documentation/docs/02-template-syntax/01-svelte-components.md
@@ -1,166 +1,162 @@
 ---
-title: Svelte components
+title: Composants Svelte
 ---
 
-Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
+Les composants sont les briques de base d'une application Svelte. Ils sont décrits dans des fichiers `.svelte`, qui utilisent un HTML augmenté.
 
-All three sections — script, styles and markup — are optional.
+Les trois sections qui le composent - scripts, styles, et <span class="vo">[markup](/docs/web#markup)</span> - sont optionnelles.
 
 ```svelte
 <script>
-	// logic goes here
+	// la logique
 </script>
 
-<!-- markup (zero or more items) goes here -->
+<!-- le markup (avec ou sans éléments) -->
 
 <style>
-	/* styles go here */
+	/* les styles */
 </style>
 ```
 
 ## &lt;script&gt;
 
-A `<script>` block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. There are four additional rules:
+Un bloc `<script>` contient du JavaScript qui est exécuté lorsqu'une instance de composant est créée. Les variables déclarées (ou importées) à la racine du composant sont 'visibles' pour le <span class='vo'>[markup](/docs/web#markup)</span> du composant. Il y a quatre règles supplémentaires:
 
-### 1. `export` creates a component prop
+### 1. `export` crée une props de composant
 
-Svelte uses the `export` keyword to mark a variable declaration as a _property_ or _prop_, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs/basic-markup#attributes-and-props) for more information).
+Svelte utilise le mot-clé `export` pour déclarer une variable en tant que _propriété_ ou <span class='vo'>[_props_](/docs/sveltejs#props)</span>, ce qui la rend accessible lorsque l'on consomme le composant (voir la section sur les [attributs et props](/docs/basic-markup#attributs-et-props)) pour plus d'informations.
 
 ```svelte
 <script>
 	export let foo;
 
-	// Values that are passed in as props
-	// are immediately available
+	// Les valeurs passées en tant que props
+	// sont immédiatement disponibles
 	console.log({ foo });
 </script>
 ```
 
-You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that if the values of props are subsequently updated, then any prop whose value is not specified will be set to `undefined` (rather than its initial value).
+Vous pouvez spécifier une valeur initiale par défaut d'une <span class='vo'>[props](/docs/sveltejs#props)</span>. Elle sera utilisée si la <span class='vo'>[props](/docs/sveltejs#props)</span> n'est pas fournie au composant par le parent lors de l'instanciation du composant (ou si la valeur fournie est `undefined`). Notez que si les valeurs des <span class='vo'>[props](/docs/sveltejs#props)</span> sont mises à jour a posteriori, n'importe quelle valeur de <span class='vo'>[props](/docs/sveltejs#props)</span> non spécifiée sera mise à `undefined` (plutôt qu'à sa valeur initiale).
 
-In development mode (see the [compiler options](/docs/svelte-compiler#compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
+En mode développement (voir les [options de compilation](/docs/svelte-compiler#compile)), un <span class='vo'>[warning](/docs/development#warning)</span> sera affiché si aucune valeur initiale par défaut n'est fournie et que le parent ne précise pas de valeur. Pour museler ce <span class='vo'>[warning](/docs/development#warning)</span>, assurez-vous qu'une valeur initiale par défaut est définie, même si celle-ci est `undefined`.
 
 ```svelte
 <script>
-	export let bar = 'optional default initial value';
+	export let bar = 'valeur initiale par défaut, optionnelle';
 	export let baz = undefined;
 </script>
 ```
 
-If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
+Si vous exportez une `const`, une `class` ou une `function`, elle sera en lecture seule à l'extérieur du composant. En revanche, les fonctions sont des valeurs de <span class='vo'>[props](/docs/sveltejs#props)</span> valides, comme montré ci-dessous.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
-	// these are readonly
+	// ces exports sont en lecture seule
 	export const thisIs = 'readonly';
 
-	/** @param {string} name */
 	export function greet(name) {
 		alert(`hello ${name}!`);
 	}
 
-	// this is a prop
+	// ceci est une prop
 	export let format = (n) => n.toFixed(2);
 </script>
 ```
 
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/component-directives#bind-this).
+Les <span class='vo'>[props](/docs/sveltejs#props)</span> en lecture seule sont accessibles comme propriétés de l'instance en utilisant la [syntaxe `bind:this`](/docs/component-directives#bind-this).
 
-You can use reserved words as prop names.
+Vous pouvez utiliser les mots réservés comme noms de <span class='vo'>[props](/docs/sveltejs#props)</span>.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
-	/** @type {string} */
 	let className;
 
-	// creates a `class` property, even
-	// though it is a reserved word
+	// crée une propriété `class`, même
+	// si le mot est réservé
 	export { className as class };
 </script>
 ```
 
-### 2. Assignments are 'reactive'
+### 2. Les assignations sont 'réactives'
 
-To change component state and trigger a re-render, just assign to a locally declared variable.
+Pour changer l'état d'un composant et déclencher une mise-à-jour du rendu, il suffit d'assigner une variable déclarée localement.
 
-Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
+Les expressions de mise-à-jour (`count += 1`) et les assignations de propriété (`obj.x = y`) produisent le même effet.
 
 ```svelte
 <script>
 	let count = 0;
 
 	function handleClick() {
-		// calling this function will trigger an
-		// update if the markup references `count`
+		// l'exécution de cette fonction déclenchera
+		// une mise à jour si le markup référence `count`
 		count = count + 1;
 	}
 </script>
 ```
 
-Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](https://learn.svelte.dev/tutorial/updating-arrays-and-objects).
+Puisque la réactivité de Svelte est basée sur les assignations, l'utilisation de méthodes de tableaux comme `.push()` et `.splice()` ne déclenchera pas de rendu. Une assignation sera alors nécessaire pour déclencher un nouveau rendu. Vous retrouverez cet exemple ainsi que plus de détails dans le [tutoriel](/tutorial/updating-arrays-and-objects).
 
 ```svelte
 <script>
 	let arr = [0, 1];
 
 	function handleClick() {
-		// this method call does not trigger an update
+		// l'appel de cette méthode ne déclenche pas de rendu
 		arr.push(2);
-		// this assignment will trigger an update
-		// if the markup references `arr`
+
+		// cette assignation déclenchera un rendu
+		// si le markup référence `arr`
 		arr = arr;
 	}
 </script>
 ```
 
-Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates. If you'd like to track changes to a prop, see the next example in the following section.
+En Svelte, les blocs `<script>` sont exécutés uniquement lorsque le composant est créé, ce qui signifie que les assignations au sein d'un bloc `<script>` ne sont pas automatiquement rejouées lorsqu'une <span class='vo'>[props](/docs/sveltejs#props)</span> est mise à jour. Si vous souhaitez suivre les changements d'une <span class='vo'>[props](/docs/sveltejs#props)</span>, allez voir le premier exemple dans la section qui suit.
 
 ```svelte
 <script>
 	export let person;
-	// this will only set `name` on component creation
-	// it will not update when `person` does
+	// ceci assigne seulement `name` lors de la création de l'instance
+	// `name` ne sera pas mise à jour lorsque `person` changera
 	let { name } = person;
 </script>
 ```
 
-### 3. `$:` marks a statement as reactive
+### 3. `$:` déclare une expression comme réactive
 
-Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed.
+Toute expression à la racine du composant (c-à-d ni dans un bloc ni dans une fonction) peut être rendu réactive en la préfixant avec la syntaxe `$:` empruntées aux [labels JS](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/label). Les expressions réactives sont exécutées après tout autre code du script, et avant le rendu du <span class="vo">[markup](/docs/web#markup)</span> du composant, à chaque fois que les valeurs dont elle dépend changent.
 
 ```svelte
 <script>
 	export let title;
 	export let person;
 
-	// this will update `document.title` whenever
-	// the `title` prop changes
+	// ceci met à jour `document.title` lorsque
+	// la prop `title` change
 	$: document.title = title;
 
 	$: {
-		console.log(`multiple statements can be combined`);
-		console.log(`the current title is ${title}`);
+		console.log(`plusieurs expressions peuvent être combinées`);
+		console.log(`le titre actuel est ${title}`);
 	}
 
-	// this will update `name` when 'person' changes
+	// ceci met à jour `name` lorsque `person` change
 	$: ({ name } = person);
 
-	// don't do this. it will run before the previous line
+	// ne faites pas ça:
+	// cette expression est exécutée avant la ligne précédente
 	let name2 = name;
 </script>
 ```
 
-Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
+Seules les valeurs qui apparaissent directement au sein d'un bloc `$:` sont des dépendances de l'expression réactive. Par exemple, dans le code ci-dessous `total` sera mise à jour uniquement lorsque `x` change, mais pas lorsque `y` change.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	let x = 0;
 	let y = 0;
 
-	/** @param {number} value */
 	function yPlusAValue(value) {
 		return value + y;
 	}
@@ -169,102 +165,99 @@ Only values which directly appear within the `$:` block will become dependencies
 </script>
 
 Total: {total}
-<button on:click={() => x++}> Increment X </button>
+<button on:click={() => x++}> Incrémenter X </button>
 
-<button on:click={() => y++}> Increment Y </button>
+<button on:click={() => y++}> Incrémenter Y </button>
 ```
 
-It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
+Il est important de noter que les blocs réactifs sont ordonnés par une analyse statique simple au moment de la compilation, et tout ce que le compilateur considère sont les variables qui sont assignées et utilisées au sein du bloc lui-même, pas au sein d'éventuelles fonctions appelées par le bloc. Cela implique que `yDependent` ne sera pas mise à jour quand `x` change dans l'exemple suivant:
 
 ```svelte
 <script>
 	let x = 0;
 	let y = 0;
 
-	/** @param {number} value */
-	function setY(value) {
+	const setY = (value) => {
 		y = value;
-	}
+	};
 
 	$: yDependent = y;
 	$: setY(x);
 </script>
 ```
 
-Moving the line `$: yDependent = y` below `$: setY(x)` will cause `yDependent` to be updated when `x` is updated.
+Déplacer la ligne `$: yDependent = y` en-dessous de `$: setY(x)` implique que `yDependent` sera mise à jour lorsque `x` change.
 
-If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
+Si une expression est entièrement constituée d'une assignation à une variable non déclarée, Svelte injectera une déclaration `let` à votre place.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
-	/** @type {number} */
 	export let num;
 
-	// we don't need to declare `squared` and `cubed`
-	// — Svelte does it for us
+	// nous n'avons pas besoin de déclarer `squared` et `cubed`
+	// — Svelte le fait pour nous
 	$: squared = num * num;
 	$: cubed = squared * num;
 </script>
 ```
 
-### 4. Prefix stores with `$` to access their values
+### 4. Préfixer les stores avec `$` pour accéder à leur valeur
 
-A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](/docs/svelte-store) contains minimal store implementations which fulfil this contract.
+Un <span class="vo">[_store_](/docs/sveltejs#store)</span> est un objet qui permet un accès réactif à une valeur via un simple _contrat de store_. Le [module `svelte/store`](/docs/svelte-store) contient des implémentations minimales qui remplissent ce contrat.
 
-Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
+À chaque fois que vous avez une référence à un <span class="vo">[store](/docs/sveltejs#store)</span>, vous pouvez accéder à sa valeur au sein d'un composant en le préfixant avec le caractère `$`. Cela indique à Svelte de déclarer la variable préfixée, de s'abonner au <span class="vo">[store](/docs/sveltejs#store)</span> à l'initialisation du composant, et de se désabonner lorsque c'est pertinent.
 
-Assignments to `$`-prefixed variables require that the variable be a writable store, and will result in a call to the store's `.set` method.
+Les assignations aux variables préfixées avec `$` nécessitent que la variable soit un _<span class="vo">[writable](/docs/development#writable)</span> <span class="vo">[store](/docs/sveltejs#store)</span>_, et cela fera appel à la méthode `.set` du <span class="vo">[store](/docs/sveltejs#store)</span>.
 
-Note that the store must be declared at the top level of the component — not inside an `if` block or a function, for example.
+Notez que le <span class="vo">[store](/docs/sveltejs#store)</span> doit être déclaré à la racine du composant — et non au sein d'un bloc `if` ou d'une fonction, par exemple.
 
-Local variables (that do not represent store values) must _not_ have a `$` prefix.
+Les variables locales (qui ne représentent pas la valeur d'un <span class="vo">[store](/docs/sveltejs#store)</span>) ne doivent _pas_ être préfixées avec `$`.
 
 ```svelte
 <script>
 	import { writable } from 'svelte/store';
 
 	const count = writable(0);
-	console.log($count); // logs 0
+	console.log($count); // affiche 0
 
 	count.set(1);
-	console.log($count); // logs 1
+	console.log($count); // affiche 1
 
 	$count = 2;
-	console.log($count); // logs 2
+	console.log($count); // affiche 2
 </script>
 ```
 
-#### Store contract
+#### Le contrat de <span class="vo">[store](/docs/sveltejs#store)</span>
 
 ```ts
 // @noErrors
 store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
 ```
 
-You can create your own stores without relying on [`svelte/store`](/docs/svelte-store), by implementing the _store contract_:
+Vous pouvez créer vos propres <span class="vo">[stores](/docs/sveltejs#store)</span> sans dépendre de [`svelte/store`](/docs/svelte-store), en implémentant vous-même le _contrat de store_ :
 
-1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
-2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.
-3. A store may _optionally_ contain a `.set` method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. Such a store is called a _writable store_.
+1. Un <span class="vo">[store](/docs/sveltejs#store)</span> doit contenir une méthode `.subscribe`, qui doit accepter comme argument une fonction d'abonnement. Lorsque `.subscribe` est appelée, cette fonction d'abonnement doit être appelée immédiatement et de manière synchrone avec la valeur actuelle du <span class="vo">[store](/docs/sveltejs#store)</span>. Toutes les fonctions d'abonnements actives d'un <span class="vo">[store](/docs/sveltejs#store)</span> doivent ensuite être appelées de manière synchrone à chaque fois que la valeur du <span class="vo">[store](/docs/sveltejs#store)</span> est mise à jour.
+2. La méthode `.subscribe` doit retourner une fonction de désabonnement. Exécuter une fonction de désabonnement doit mettre fin à l'abonnement, et la fonction d'abonnement correspondant ne doit plus être appelée par le <span class="vo">[store](/docs/sveltejs#store)</span>.
+3. Un <span class="vo">[store](/docs/sveltejs#store)</span> peut de manière _optionnelle_ contenir une méthode `.set`, qui doit accepter comme argument une nouvelle valeur pour le <span class="vo">[store](/docs/sveltejs#store)</span>, et qui appellera de manière synchrone toutes les fonctions d'abonnement actives du <span class="vo">[store](/docs/sveltejs#store)</span>. Un tel <span class="vo">[store](/docs/sveltejs#store)</span> est appelé un <span class="vo">[store](/docs/sveltejs#store)</span> d'écriture (_writable store_).
 
-For interoperability with RxJS Observables, the `.subscribe` method is also allowed to return an object with an `.unsubscribe` method, rather than return the unsubscription function directly. Note however that unless `.subscribe` synchronously calls the subscription (which is not required by the Observable spec), Svelte will see the value of the store as `undefined` until it does.
+Pour l'interopérabilité avec les Observables RxJS, la méthode `.subscribe` est également autorisée à retourner un objet avec une méthode `.unsubscribe`, au lieu de renvoyer directement la fonction de désabonnement. Notez toutefois qu'à moins que `.subscribe` appelle de manière synchrone la fonction d'abonnement (ce qui n'est pas requis par la spec Observable), Svelte aura `undefined` pour valeur du <span class="vo">[store](/docs/sveltejs#store)</span> jusqu'à ce qu'elle soit appelée.
 
 ## &lt;script context="module"&gt;
 
-A `<script>` tag with a `context="module"` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
+Une balise `<script>` avec un attribut `context="module"` est exécutée une seule fois quand le module est évalué la première fois, au lieu d'une fois pour chaque instance de composant. Les valeurs déclarées au sein de ce bloc sont accessibles depuis un `<script>` classique (et depuis le <span class="vo">[markup](/docs/web#markup)</span> du composant), mais pas inversement.
 
-You can `export` bindings from this block, and they will become exports of the compiled module.
+Vous pouvez `export` des valeurs depuis ce bloc, et elles seront exposées comme exports du module compilés.
 
-You cannot `export default`, since the default export is the component itself.
+Vous ne pouvez pas `export default`, puisque l'export par défaut est le composant lui-même.
 
-> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](/docs/svelte-store).
+> Les variables définies dans des scripts `module` ne sont pas réactives — les réassigner ne déclenchera pas de nouveau rendu même si la variable elle-même est mise à jour. Pour partager des valeurs entre différents composants, priviléviez l'usage d'un [store](/docs/svelte-store).
 
 ```svelte
 <script context="module">
 	let totalComponents = 0;
 
-	// the export keyword allows this function to imported with e.g.
+	// le mot clé "export" permet à cette fonction d'être importée ailleurs, par ex.
 	// `import Example, { alertTotal } from './Example.svelte'`
 	export function alertTotal() {
 		alert(totalComponents);
@@ -273,76 +266,75 @@ You cannot `export default`, since the default export is the component itself.
 
 <script>
 	totalComponents += 1;
-	console.log(`total number of times this component has been created: ${totalComponents}`);
+	console.log(`Nb de fois total où ce composant a été créé: ${totalComponents}`);
 </script>
 ```
 
 ## &lt;style&gt;
 
-CSS inside a `<style>` block will be scoped to that component.
+Le CSS au sein d'un bloc `<style>` sera <span class='vo'>[scopé](/docs/development#scope)</span> à ce composant.
 
-This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).
+Cela est possible grâce à l'ajout d'une classe aux éléments concernés, classe basée sur un <span class='vo'>[hash](/docs/development#hash)</span> des styles du composant (par ex. `svelte-123xyz`).
 
 ```svelte
 <style>
 	p {
-		/* this will only affect <p> elements in this component */
+		/* cela affectera uniquement les éléments `<p>` dans ce composant */
 		color: burlywood;
 	}
 </style>
 ```
 
-To apply styles to a selector globally, use the `:global(...)` modifier.
+Pour appliquer les styles d'un sélecteur globalement, vous pouvez utiliser le modificateur `:global(...)`.
 
 ```svelte
 <style>
 	:global(body) {
-		/* this will apply to <body> */
+		/* ceci s'applique au `<body>` */
 		margin: 0;
 	}
 
 	div :global(strong) {
-		/* this will apply to all <strong> elements, in any
-			 component, that are inside <div> elements belonging
-			 to this component */
+		/* ceci s'applique à tous les éléments `<strong>`, dans n'importe
+			 quel composant, qui sont à l'intérieur d'éléments `<div>`
+			 appartenant à ce composant */
 		color: goldenrod;
 	}
 
 	p:global(.red) {
-		/* this will apply to all <p> elements belonging to this
-			 component with a class of red, even if class="red" does
-			 not initially appear in the markup, and is instead
-			 added at runtime. This is useful when the class
-			 of the element is dynamically applied, for instance
-			 when updating the element's classList property directly. */
+		/* ceci s'applique à tous les éléments `<p>` appartenant à ce
+			 composant avec une classe `red`, même si `class="red"` n'apparaît pas
+			 initialement dans le markup, mais est ajoutée plus tard à runtime.
+			 Cela sert quand la classe de l'élément est dynamiquement appliquée,
+			 par exemple lorsque l'on met à jour la propriété `classList` d'un élément. */
 	}
 </style>
 ```
 
-If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
+Si vous voulez utiliser des `@keyframes` accessibles globalement, vous devez préfixer votre <span class='vo'>[keyframe](/docs/web#keyframe)</span> avec `-global-`.
 
-The `-global-` part will be removed when compiled, and the keyframe then be referenced using just `my-animation-name` elsewhere in your code.
+Le préfixe `-global-` sera supprimé à la compilation, et la <span class='vo'>[keyframe](/docs/web#keyframe)</span> pourra alors être référencée en utilisant simplement `my-animation-name` ailleurs dans le code.
 
-```svelte
+```html
 <style>
 	@keyframes -global-my-animation-name {
-		/* code goes here */
+		...;
 	}
 </style>
 ```
 
-There should only be 1 top-level `<style>` tag per component.
+Il ne peut y avoir qu'une 1 seule balise `<style>` à la racine d'un component.
 
-However, it is possible to have `<style>` tag nested inside other elements or logic blocks.
+Toutefois, il est possible d'avoir une balise `<style>` imbriquée dans d'autres éléments ou blocs logiques.
 
-In that case, the `<style>` tag will be inserted as-is into the DOM, no scoping or processing will be done on the `<style>` tag.
+Dans ce cas, la balise `<style>` sera injectée telle quelle dans le <span class='vo'>[DOM](/docs/web#dom)</span>, aucun <span class='vo'>[scoping](/docs/development#scope)</span> ou formattage ne lui sera appliqué.
 
-```svelte
+```html
 <div>
 	<style>
-		/* this style tag will be inserted as-is */
+		/* cette balise sera injectée telle quelle */
 		div {
-			/* this will apply to all `<div>` elements in the DOM */
+			/* ceci s'appliquera à tous les éléments `<div>` du DOM */
 			color: red;
 		}
 	</style>
diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md
index e6192230d4..ea9aa962ed 100644
--- a/documentation/docs/02-template-syntax/02-basic-markup.md
+++ b/documentation/docs/02-template-syntax/02-basic-markup.md
@@ -1,10 +1,10 @@
 ---
-title: Basic markup
+title: Markup de base
 ---
 
-## Tags
+## Balises
 
-A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag, such as `<Widget>` or `<Namespace.Widget>`, indicates a _component_.
+Une balise en minuscules, comme `<div>`, indique un élément HTML standard. Une balise avec la première lettre en majuscule, comme `<Widget>` ou `<Namespace.Widget>`, indique un _composant_.
 
 ```svelte
 <script>
@@ -16,123 +16,123 @@ A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag
 </div>
 ```
 
-## Attributes and props
+## Attributs et props
 
-By default, attributes work exactly like their HTML counterparts.
+Par défaut, les attributs fonctionnent exactement comme leur équivalent HTML.
 
 ```svelte
 <div class="foo">
-	<button disabled>can't touch this</button>
+	<button disabled>pas touche</button>
 </div>
 ```
 
-As in HTML, values may be unquoted.
+Comme en HTML, les valeurs peuvent être fournies sans guillemets.
 
 <!-- prettier-ignore -->
 ```svelte
 <input type=checkbox />
 ```
 
-Attribute values can contain JavaScript expressions.
+Les valeurs des attributs peuvent contenir des expressions JavaScript.
 
 ```svelte
 <a href="page/{p}">page {p}</a>
 ```
 
-Or they can _be_ JavaScript expressions.
+Ou elles peuvent _être définies_ par des expressions JavaScript.
 
 ```svelte
 <button disabled={!clickable}>...</button>
 ```
 
-Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+Les attributs booléens sont inclus sur l'élément si leur valeur est <span class="vo">[truthy](/docs/javascript#falsy-truthy-truthy)</span> et exclus si leur valeur est <span class="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>.
 
-All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
+Tous les autres attributs sont inclus à moins que leur valeur soit <span class="vo">[nullish](/docs/javascript#nullish)</span>.
 
 ```svelte
-<input required={false} placeholder="This input field is not required" />
-<div title={null}>This div has no title attribute</div>
+<input required={false} placeholder="Ce champ input n'est pas requis" />
+<div title={null}>Cette div n'a pas de titre</div>
 ```
 
-An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
+Une expression peut éventuellement inclure des caractères qui casseraient la mise en valeur de la syntaxe dans du HTML classique, en conséquence il est permis de mettre la valeur en guillemets. Les guillemets n'ont pas d'influence sur le <span class='vo'>[parsing](/docs/development#parser)</span> de la valeur.
 
 <!-- prettier-ignore -->
 ```svelte
 <button disabled="{number !== 42}">...</button>
 ```
 
-When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
+Quand le nom d'un attribut et sa valeur sont identiques, (`name={name}`), il est possible d'écrire `{name}`.
 
 ```svelte
 <button {disabled}>...</button>
-<!-- equivalent to
+<!-- est équivalent à
 <button disabled={disabled}>...</button>
 -->
 ```
 
-By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
+Par convention, les valeurs passées aux composants sont appelées _propriétés_ ou <span class='vo'>[_props_](/docs/sveltejs#props)</span> plutôt qu'_attributs_, caractéristiques du <span class='vo'>[DOM](/docs/web#dom)</span>.
 
-As with elements, `name={name}` can be replaced with the `{name}` shorthand.
+Comme pour les éléments, `name={name}` peut être raccourci en `{name}`.
 
 ```svelte
-<Widget foo={bar} answer={42} text="hello" />
+<Widget foo={bar} answer={42} text="salut" />
 ```
 
-_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
+Les _attributs décomposés (spread attributes)_ permettent de passer de nombreux attributs ou propriétés d'un seul coup.
 
-An element or component can have multiple spread attributes, interspersed with regular ones.
+Un élément ou un composant peut avoir plusieurs attributs décomposés, parsemés ou non d'attributs classiques.
 
 ```svelte
 <Widget {...things} />
 ```
 
-`$$props` references all props that are passed to a component, including ones that are not declared with `export`. Using `$$props` will not perform as well as references to a specific prop because changes to any prop will cause Svelte to recheck all usages of `$$props`. But it can be useful in some cases – for example, when you don't know at compile time what props might be passed to a component.
+La variable `$$props` référence toutes les props qui sont fournies à un composant, y compris celles qui ne sont pas déclarées avec `export`. Utiliser `$$props` ne sera pas aussi performant qu'utiliser une <span class="vo">[prop](/docs/sveltejs#props)</span> spécifique directement car les changements de n'importe quelle prop vont déclencher une nouvelle vérification de toutes les occurences de `$$props`. Toutefois `$$props` peut être utile dans certains cas — par exemple, lorsque vous ne savez pas à la compilation quelles props peuvent être passées au composant.
 
 ```svelte
 <Widget {...$$props} />
 ```
 
-`$$restProps` contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same performance characteristics compared to specific property access as `$$props`.
+La variable `$$restProps` contient uniquement les props qui ne sont _pas_ déclarées avec `export`. Elle peut être utilisée pour relayer des attributs inconnus à un élément dans un composant plus profond. `restProps` souffre des mêmes problématiques de performance que `$$props` comparé à un accès direct à une prop.
 
-```svelte
+```html
 <input {...$$restProps} />
 ```
 
-> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
+> L'attribut `value` d'un élément `input` ou ses éléments enfants de type `option` ne doivent pas être utilisés avec des attributs décomposés lorsque `bind:group` ou `bind:checked` est utilisé. Dans ce cas, Svelte doit être capable d'accéder à la `value` de l'élément directement dans le <span class="vo">[markup](/docs/web#markup)</span>, afin de la relier à la variable correspondante.
 
-> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, `<input type="range" min="0" max="1" value={0.5} step="0.1"/>`, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to `<input type="range" min="0" max="1" step="0.1" value={0.5}/>`.
+> Parfois, l'ordre des attributs est important car Svelte gère les attributs séquentiellement dans JavaScript. Dans l'exemple `<input type="range" min="0" max="1" value={0.5} step="0.1"/>`, Svelte va essayer d'attribuer `1` à la valeur (arrondissant 0.5 à 1 car le pas par défaut est 1), puis va mettre le pas à `0.1`. Pour régler ce problème, utilisez plutôt `<input type="range" min="0" max="1" step="0.1" value={0.5}/>`.
 
-> Another example is `<img src="..." loading="lazy" />`. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `<img loading="lazy" src="...">` to make the image lazily loaded.
+> Un autre exemple est `<img src="..." loading="lazy" />`. Svelte va essayer d'attribuer la `src` de l'image avant d'appliquer `loading="lazy"` à l'élément `<img>`, ce qui arrive trop tard. Pour profiter du <span class='vo'>[lazy loading](/docs/web#lazy-loading)</span>, utilisez plutôt `<img loading="lazy" src="...">`.
 
-## Text expressions
+## Expressions texte
 
-A JavaScript expression can be included as text by surrounding it with curly braces.
+Une expression JavaScript peut être incluse en tant que texte en l'entourant avec des accolades.
 
 ```svelte
 {expression}
 ```
 
-Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `&lbrace;`, `&lcub;`, or `&#123;` for `{` and `&rbrace;`, `&rcub;`, or `&#125;` for `}`.
+Des accolades peuvent être incluses dans un <span class="vo">[template](/docs/development#template)</span> Svelte en utilisant leur [entité HTML](https://developer.mozilla.org/docs/Glossary/Entity) sous forme de chaîne de caractères : `&lbrace;`, `&lcub;`, ou `&#123;` pour `{` et `&rbrace;`, `&rcub;`, ou `&#125;` pour `}`.
 
-> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
+> Si vous utilisez la [notation littérale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor) des expressions régulières (`RegExp`), vous devrez l'entourer de parenthèses.
 
 <!-- prettier-ignore -->
 ```svelte
-<h1>Hello {name}!</h1>
+<h1>Bonjour {name}!</h1>
 <p>{a} + {b} = {a + b}.</p>
 
 <div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
 ```
 
-## Comments
+## Commentaires
 
-You can use HTML comments inside components.
+Vous pouvez utiliser des commentaires HTML à l'intérieur des composants.
 
 ```svelte
-<!-- this is a comment! --><h1>Hello world</h1>
+<!-- quel beau commentaire ! --><h1>Bonjour tout le monde</h1>
 ```
 
-Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
+Les commentaires qui commencent par `svelte-ignore` désactivent les avertissements du prochain bloc de <span class="vo">[markup](/docs/web#markup)</span>. En général, ce sont des avertissements d'accessibilité ; essayez de ne les désactiver que pour une bonne raison.
 
 ```svelte
 <!-- svelte-ignore a11y-autofocus -->
diff --git a/documentation/docs/02-template-syntax/03-logic-blocks.md b/documentation/docs/02-template-syntax/03-logic-blocks.md
index af47f6dfa7..edf8d7a4c6 100644
--- a/documentation/docs/02-template-syntax/03-logic-blocks.md
+++ b/documentation/docs/02-template-syntax/03-logic-blocks.md
@@ -1,5 +1,5 @@
 ---
-title: Logic blocks
+title: Les blocs logiques
 ---
 
 ## {#if ...}
@@ -19,27 +19,27 @@ title: Logic blocks
 {#if expression}...{:else}...{/if}
 ```
 
-Content that is conditionally rendered can be wrapped in an if block.
+Il est possible d'afficher conditionnellement du contenu en l'encadrant par un bloc `if`.
 
 ```svelte
 {#if answer === 42}
-	<p>what was the question?</p>
+	<p>c'était quoi la question déjà ?</p>
 {/if}
 ```
 
-Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
+Des conditions supplémentaires peuvent être ajoutées avec `{:else if expression}`, et il est possible de terminer avec un `{:else}` optionnel.
 
 ```svelte
-{#if porridge.temperature > 100}
-	<p>too hot!</p>
-{:else if 80 > porridge.temperature}
-	<p>too cold!</p>
+{#if soupe.temperature > 100}
+	<p>trop chaud !</p>
+{:else if 80 > soupe.temperature}
+	<p>trop froid !</p>
 {:else}
-	<p>just right!</p>
+	<p>parfait !</p>
 {/if}
 ```
 
-(Blocks don't have to wrap elements, they can also wrap text within elements!)
+(Les blocs n'ont pas besoin d'entourer des éléments, ils peuvent aussi entourer du texte au sein d'éléments !)
 
 ## {#each ...}
 
@@ -68,10 +68,10 @@ Additional conditions can be added with `{:else if expression}`, optionally endi
 {#each expression as name}...{:else}...{/each}
 ```
 
-Iterating over lists of values can be done with an each block.
+Il est possible d'itérer sur des listes de valeurs avec un bloc `each`.
 
 ```svelte
-<h1>Shopping list</h1>
+<h1>Liste de courses</h1>
 <ul>
 	{#each items as item}
 		<li>{item.name} x {item.qty}</li>
@@ -79,9 +79,9 @@ Iterating over lists of values can be done with an each block.
 </ul>
 ```
 
-You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
+Vous pouvez utiliser des blocs `each` pour itérer sur n'importe quel tableau ou valeur similaire — c'est-à-dire un objet avec une propriété `length`.
 
-An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
+Un bloc `each` peut aussi spécifier un _indice_, équivalent au deuxième argument du <span class="vo">[callback](/docs/development#callback)</span> de `array.map(...)`:
 
 ```svelte
 {#each items as item, i}
@@ -89,20 +89,20 @@ An each block can also specify an _index_, equivalent to the second argument in
 {/each}
 ```
 
-If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+Vous pouvez spécifier une _clé_ à un bloc `each`. Cette clé doit identifier de manière unique chaque élément de la liste. Svelte s'en servira pour mettre à jour la liste avec précision lorsque la donnée changera, plutôt que d'ajouter ou enlever des éléments à la fin. La clé peut être n'importe quel objet, mais les chaînes de caractères ou les nombres sont recommandés car ils permettent de persister l'identité, ce qui n'est pas le cas des objets.
 
 ```svelte
 {#each items as item (item.id)}
 	<li>{item.name} x {item.qty}</li>
 {/each}
 
-<!-- or with additional index value -->
+<!-- ou en utilisant un indice -->
 {#each items as item, i (item.id)}
 	<li>{i + 1}: {item.name} x {item.qty}</li>
 {/each}
 ```
 
-You can freely use destructuring and rest patterns in each blocks.
+Vous pouvez librement utiliser la syntaxe de [décomposition](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) dans les blocs `each`.
 
 ```svelte
 {#each items as { id, name, qty }, i (id)}
@@ -118,17 +118,17 @@ You can freely use destructuring and rest patterns in each blocks.
 {/each}
 ```
 
-An each block can also have an `{:else}` clause, which is rendered if the list is empty.
+Un bloc `each` peut aussi avoir une clause `{:else}`, qui sera affichée si la liste est vide.
 
 ```svelte
 {#each todos as todo}
 	<p>{todo.text}</p>
 {:else}
-	<p>No tasks today!</p>
+	<p>Rien à faire aujourd'hui !</p>
 {/each}
 ```
 
-Since Svelte 4 it is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
+Depuis Svelte 4, il est possible d'itérer sur les itérables comme `Map` ou `Set`. Les itérables doivent êtres finis et statiques (ils ne doivent pas changer lorsqu'on itère dessus). Sous le capot, ils sont transformés en tableau avec `Array.from` avant d'être envoyés au rendu. Si vous écrivez du code sensible à la performance, essayez d'éviter les itérables et utilisez plutôt des tableaux classiques, qui sont plus performants dans ce cas.
 
 ## {#await ...}
 
@@ -152,48 +152,47 @@ Since Svelte 4 it is possible to iterate over iterables like `Map` or `Set`. Ite
 {#await expression catch name}...{/await}
 ```
 
-Await blocks allow you to branch on the three possible states of a Promise — pending, fulfilled or rejected.
-In SSR mode, only the pending branch will be rendered on the server.
-If the provided expression is not a Promise only the fulfilled branch will be rendered, including in SSR mode.
+Les blocs `await` permettent de différencier les trois états de promesse possibles — en attente, résolue ou rejetée. En mode <span class="vo">[SSR](/docs/web#server-side-rendering)</span>, seul l'état d'attente sera rendu sur le serveur.
+Si l'expression fournie n'est pas une Promesse, seule la branche résolue sera rendue, même en mode SSR.
 
 ```svelte
 {#await promise}
-	<!-- promise is pending -->
-	<p>waiting for the promise to resolve...</p>
+	<!-- la promesse est en attente -->
+	<p>en attente de la résolution de la promesse...</p>
 {:then value}
-	<!-- promise was fulfilled or not a Promise -->
-	<p>The value is {value}</p>
+	<!-- la promesse est résolue ou l'expression n'est pas une Promesse -->
+	<p>La valeur est {value}</p>
 {:catch error}
-	<!-- promise was rejected -->
-	<p>Something went wrong: {error.message}</p>
+	<!-- la promesse est rejetée -->
+	<p>Quelque chose ne va pas : {error.message}</p>
 {/await}
 ```
 
-The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
+Le bloc `catch` peut être ignoré si vous n'avez pas besoin d'afficher quoi que ce soit lorsque la promesse est rejetée (ou si aucune erreur n'est possible).
 
 ```svelte
 {#await promise}
-	<!-- promise is pending -->
-	<p>waiting for the promise to resolve...</p>
+	<!-- la promesse est en attente -->
+	<p>en attente de la résolution de la promesse...</p>
 {:then value}
-	<!-- promise was fulfilled -->
-	<p>The value is {value}</p>
+	<!-- la promesse est résolue -->
+	<p>La valeur est {value}</p>
 {/await}
 ```
 
-If you don't care about the pending state, you can also omit the initial block.
+Si l'état d'attente ne vous concerne pas, vous pouvez aussi ignorer le bloc initial.
 
 ```svelte
 {#await promise then value}
-	<p>The value is {value}</p>
+	<p>La valeur est {value}</p>
 {/await}
 ```
 
-Similarly, if you only want to show the error state, you can omit the `then` block.
+De manière similaire, si vous voulez uniquement afficher l'état d'erreur, vous pouvez ignorer le bloc `then`.
 
 ```svelte
 {#await promise catch error}
-	<p>The error is {error}</p>
+	<p>L'erreur est {error}</p>
 {/await}
 ```
 
@@ -204,9 +203,9 @@ Similarly, if you only want to show the error state, you can omit the `then` blo
 {#key expression}...{/key}
 ```
 
-Key blocks destroy and recreate their contents when the value of an expression changes.
+Les blocs `key` détruisent et reconstruisent leur contenu quand la valeur de leur expression change.
 
-This is useful if you want an element to play its transition whenever a value changes.
+C'est utile lorsque vous voulez qu'un élément joue sa transition à chaque fois qu'une valeur se met à jour.
 
 ```svelte
 {#key value}
@@ -214,7 +213,7 @@ This is useful if you want an element to play its transition whenever a value ch
 {/key}
 ```
 
-When used around components, this will cause them to be reinstantiated and reinitialised.
+Utilisé autour de composants, un bloc `key` déclenchera leur réinstantiation et réinitialisation.
 
 ```svelte
 {#key value}
diff --git a/documentation/docs/02-template-syntax/04-special-tags.md b/documentation/docs/02-template-syntax/04-special-tags.md
index 4145d8d6d6..4141a47b5f 100644
--- a/documentation/docs/02-template-syntax/04-special-tags.md
+++ b/documentation/docs/02-template-syntax/04-special-tags.md
@@ -1,5 +1,5 @@
 ---
-title: Special tags
+title: Balises spéciales
 ---
 
 ## {@html ...}
@@ -9,11 +9,11 @@ title: Special tags
 {@html expression}
 ```
 
-In a text expression, characters like `<` and `>` are escaped; however, with HTML expressions, they're not.
+Dans une expression texte, les caractères `<` et `>` sont échappés ; ils ne sont en revanche pas échappés dans une expression HTML.
 
-The expression should be valid standalone HTML — `{@html "<div>"}content{@html "</div>"}` will _not_ work, because `</div>` is not valid HTML. It also will _not_ compile Svelte code.
+L'expression doit être du HTML valide en soi — `{@html "<div>"}contenu{@html "</div>"}` ne fonctionnera _pas_, car `</div>` n'est pas du HTML valide. Dans ce cas, Svelte ne réussira _pas_ à compiler.
 
-> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
+> Svelte ne nettoie pas les expressions avant d'injecter le HTML. Si la donnée provient d'une source non sûre, vous devez le nettoyer vous-même pour éviter d'exposer vos utilisateurs à des vulnérabilités de type <span class="vo">[XSS](/docs/web#xss)</span>.
 
 ```svelte
 <div class="blog-post">
@@ -28,13 +28,12 @@ The expression should be valid standalone HTML — `{@html "<div>"}content{@html
 <!--- copy: false --->
 {@debug}
 ```
-
 ```svelte
 <!--- copy: false --->
 {@debug var1, var2, ..., varN}
 ```
 
-The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
+La balise `{@debug ...}` offre une alternative à `console.log(...)`. Elle affiche les valeurs des variables spécifiées lorsqu'elle changent, et met en pause l'exécution du code si vous avez les outils de développement ouverts.
 
 ```svelte
 <script>
@@ -49,21 +48,21 @@ The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the
 <h1>Hello {user.firstname}!</h1>
 ```
 
-`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
+`{@debug ...}` accepte une liste de noms de variables séparés par des virgules (mais pas des expressions).
 
 ```svelte
-<!-- Compiles -->
+<!-- Compile -->
 {@debug user}
 {@debug user1, user2, user3}
 
-<!-- WON'T compile -->
+<!-- Ne compile pas -->
 {@debug user.firstname}
 {@debug myArray[0]}
 {@debug !isReady}
 {@debug typeof user === 'object'}
 ```
 
-The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
+La balise `{@debug}` sans argument insère une expression `debugger` qui est déclenchée lorsque _n'importe quel_ état change, plutôt que certaines variables spécifiques.
 
 ## {@const ...}
 
@@ -72,7 +71,7 @@ The `{@debug}` tag without any arguments will insert a `debugger` statement that
 {@const assignment}
 ```
 
-The `{@const ...}` tag defines a local constant.
+La balise `{@const ...}` définit une constante locale.
 
 ```svelte
 <script>
@@ -85,4 +84,4 @@ The `{@const ...}` tag defines a local constant.
 {/each}
 ```
 
-`{@const}` is only allowed as direct child of `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` or `<svelte:fragment />`.
+`{@const}` est uniquement utilisable en tant qu'enfant direct de `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` ou `<svelte:fragment />`.
diff --git a/documentation/docs/02-template-syntax/05-element-directives.md b/documentation/docs/02-template-syntax/05-element-directives.md
index f9ff1821c8..e000768db0 100644
--- a/documentation/docs/02-template-syntax/05-element-directives.md
+++ b/documentation/docs/02-template-syntax/05-element-directives.md
@@ -1,8 +1,8 @@
 ---
-title: Element directives
+title: Directives d'éléments
 ---
 
-As well as attributes, elements can have _directives_, which control the element's behaviour in some way.
+En plus des attributs, les éléments peuvent avoir des _directives_, qui contrôlent le comportement des éléments de différentes manières.
 
 ## on:_eventname_
 
@@ -10,68 +10,67 @@ As well as attributes, elements can have _directives_, which control the element
 <!--- copy: false --->
 on:eventname={handler}
 ```
-
 ```svelte
 <!--- copy: false --->
 on:eventname|modifiers={handler}
 ```
 
-Use the `on:` directive to listen to DOM events.
+Utilisez la directive `on:` pour écouter des évènements du <span class='vo'>[DOM](/docs/web#dom)</span>.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	let count = 0;
 
-	/** @param {MouseEvent} event */
 	function handleClick(event) {
 		count += 1;
 	}
 </script>
 
 <button on:click={handleClick}>
-	count: {count}
+	Compte: {count}
 </button>
 ```
 
-Handlers can be declared inline with no performance penalty. As with attributes, directive values may be quoted for the sake of syntax highlighters.
+Les gestionnaires d'évènement peuvent être déclarés directement sans pénaliser les performances. Comme pour les attributs, les valeurs utilisées pour les directives peuvent être mises entre guillemets afin d'aider la coloration syntaxique.
 
 ```svelte
-<button on:click={() => (count += 1)}>
-	count: {count}
+<button on:click="{() => count += 1}">
+	Compte: {count}
 </button>
 ```
 
-Add _modifiers_ to DOM events with the `|` character.
+Ajoutez des *modificateurs* aux évènements <span class='vo'>[DOM](/docs/web#dom)</span> avec le caractère `|`.
 
 ```svelte
 <form on:submit|preventDefault={handleSubmit}>
-	<!-- the `submit` event's default is prevented,
-	     so the page won't reload -->
+	<!-- le comportement par défaut de l'évènement `submit` est ignoré,
+		ce qui permet de ne pas recharger la page -->
 </form>
 ```
 
-The following modifiers are available:
+Les modificateurs suivants sont disponibles:
 
-- `preventDefault` — calls `event.preventDefault()` before running the handler
-- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.
-- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
-- `nonpassive` — explicitly set `passive: false`
-- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase
-- `once` — remove the handler after the first time it runs
-- `self` — only trigger handler if `event.target` is the element itself
-- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
+* `preventDefault` — appelle `event.preventDefault()` avant d'exécuter le gestionnaire d'évènement
+* `stopPropagation` — appelle `event.stopPropagation()`, empêchant l'évènement d'atteindre le prochain élément
+* `stopImmediatePropagation` - appelle `event.stopImmediatePropagation()`, empêchant d'autres gestionnaires du même évènement d'être exécutés
+* `passive` — améliore la performance du défilement pour les évènements `touch`/`wheel` (Svelte l'ajoutera automatiquement lorsque qu'il détecte que ce n'est pas problématique)
+* `nonpassive` — déclare explicitement l'évènement avec `passive: false`
+* `capture` — déclenche le gestionnaire d'évènement pendant la phase de <span class='vo'>[capture](/docs/javascript#bubble-capture)</span> plutôt que pendant la phase de <span class='vo'>[bubbling](/docs/javascript#bubble-capture)</span>
+* `once` — supprime le gestionnaire d'évènement après sa première exécution
+* `self` — ne déclenche le gestionnaire d'évènement que si `event.target` est l'élément lui-même
+* `trusted` — ne déclenche le gestionnaire d'évènement que si `event.isTrusted` est `true`. C'est-à-dire si l'évènement est déclenché par une action utilisateur.
 
-Modifiers can be chained together, e.g. `on:click|once|capture={...}`.
+Vous pouvez chaîner les modificateurs, par ex. `on:click|once|capture={...}`.
 
-If the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it.
+Si la directive `on:` est utilisée sans valeur, le composant relaiera l'évènement à son parent, ce qui permettra à ce dernier de l'écouter.
 
 ```svelte
-<button on:click> The component itself will emit the click event </button>
+<button on:click>
+	Le composant lui-même va émettre un évènement clic
+</button>
 ```
 
-It's possible to have multiple event listeners for the same event:
+Il est possible d'avoir plusieurs gestionnaires pour le même évènement:
 
 ```svelte
 <script>
@@ -80,13 +79,12 @@ It's possible to have multiple event listeners for the same event:
 		counter = counter + 1;
 	}
 
-	/** @param {MouseEvent} event */
 	function track(event) {
-		trackEvent(event);
+		trackEvent(event)
 	}
 </script>
 
-<button on:click={increment} on:click={track}>Click me!</button>
+<button on:click={increment} on:click={track}>Cliquez moi !</button>
 ```
 
 ## bind:_property_
@@ -96,59 +94,64 @@ It's possible to have multiple event listeners for the same event:
 bind:property={variable}
 ```
 
-Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent. Most bindings are specific to particular elements.
+En général, la donnée _descend_ du parent vers l'enfant. La directive `bind:` permet à la donnée de remonter de l'enfant vers le parent. Le plus souvent ces liaisons sont spécifiques à des éléments particuliers.
 
-The simplest bindings reflect the value of a property, such as `input.value`.
+L'exemple le plus simple d'une liaison reflète la valeur d'une propriété, comme `input.value`.
 
 ```svelte
-<input bind:value={name} />
-<textarea bind:value={text} />
+<input bind:value={name}>
+<textarea bind:value={text}></textarea>
 
-<input type="checkbox" bind:checked={yes} />
+<input type="checkbox" bind:checked={yes}>
 ```
 
-If the name matches the value, you can use a shorthand.
+Si le nom de la variable est le même que le nom de la propriété, vous pouvez simplifier l'écriture.
 
 ```svelte
-<input bind:value />
-<!-- equivalent to
-<input bind:value={value} />
--->
+<!-- Ces écritures sont équivalentes -->
+<input bind:value={value}>
+<input bind:value>
 ```
 
-Numeric input values are coerced; even though `input.value` is a string as far as the DOM is concerned, Svelte will treat it as a number. If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
+Les valeurs numériques sont traitées comme des nombres ; même si `input.value` est une chaîne de caractères pour le <span class='vo'>[DOM](/docs/web#dom)</span>, Svelte traitera cette valeur comme un nombre. Si l'`<input>` est vide ou invalide (dans le cas de `type="number"` par exemple), la valeur sera `undefined`.
 
 ```svelte
-<input type="number" bind:value={num} />
-<input type="range" bind:value={num} />
+<input type="number" bind:value={num}>
+<input type="range" bind:value={num}>
 ```
 
-On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly.
+Sur les éléments `<input>` de type `type="file"`, vous pouvez utiliser `bind:files` pour obtenir la [`FileList` des fichiers sélectionnés](https://developer.mozilla.org/fr/docs/Web/API/FileList). Cette liste est en lecture seule.
 
 ```svelte
-<label for="avatar">Upload a picture:</label>
-<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
+<label for="avatar">Choisissez une image :</label>
+<input
+	accept="image/png, image/jpeg"
+	bind:files
+	id="avatar"
+	name="avatar"
+	type="file"
+/>
 ```
 
-If you're using `bind:` directives together with `on:` directives, the order that they're defined in affects the value of the bound variable when the event handler is called.
+Si vous utilisez des directives `bind:` conjointement à des directives `on:`, l'ordre dans lequel elles sont définies affectera la valeur de la variable liée lorsque la fonction d'écoute sera appelée.
 
 ```svelte
 <script>
-	let value = 'Hello World';
+	let value = 'Bonjour tout le monde';
 </script>
 
 <input
-	on:input={() => console.log('Old value:', value)}
+	on:input={() => console.log('Ancienne valeur:', value)}
 	bind:value
-	on:input={() => console.log('New value:', value)}
+	on:input={() => console.log('Nouvelle valeur:', value)}
 />
 ```
 
-Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`.
+Dans ce cas, nous avons lié la valeur d'un `<input>` de texte qui utilise l'évènement `input`. Des liaisons sur d'autres éléments pourraient utiliser d'autres évènements comme `change`.
 
-## Binding `<select>` value
+### Lier les valeurs de `<select>`
 
-A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
+Une liaison sur un `<select>` correspond à la propriété `value` de l'`<option>` sélectionnée, qui peut être n'importe quelle valeur (pas uniquement des chaînes de caractères, comme c'est le cas en général dans le <span class='vo'>[DOM](/docs/web#dom)</span>).
 
 ```svelte
 <select bind:value={selected}>
@@ -158,72 +161,73 @@ A `<select>` value binding corresponds to the `value` property on the selected `
 </select>
 ```
 
-A `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`.
+Un élément `<select multiple>` se comporte de manière similaire à un groupe de `<checkbox>`. La variable liée est un tableau avec un élément correspondant à la propriété `value` de chaque `<option>` sélectionnée.
 
 ```svelte
 <select multiple bind:value={fillings}>
-	<option value="Rice">Rice</option>
-	<option value="Beans">Beans</option>
-	<option value="Cheese">Cheese</option>
-	<option value="Guac (extra)">Guac (extra)</option>
+	<option value="Riz">Riz</option>
+	<option value="Haricots">Haricots</option>
+	<option value="Fromage">Fromage</option>
+	<option value="Guacamole (supplément)">Guacamole (supplément)</option>
 </select>
 ```
 
-When the value of an `<option>` matches its text content, the attribute can be omitted.
+Quand la valeur d'une `<option>` correspond à son contenu texte, l'attribut peut être ignoré.
 
 ```svelte
 <select multiple bind:value={fillings}>
-	<option>Rice</option>
-	<option>Beans</option>
-	<option>Cheese</option>
-	<option>Guac (extra)</option>
+	<option>Riz</option>
+	<option>Haricots</option>
+	<option>Formage</option>
+	<option>Guacamole (supplément)</option>
 </select>
 ```
 
-Elements with the `contenteditable` attribute support the following bindings:
+Les éléments avec l'attribut `contenteditable` permettent les liaisons suivantes:
+- [`innerHTML`](https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML)
+- [`innerText`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/innerText)
+- [`textContent`](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent)
 
-- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
-- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
-- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-
-There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
+Il y a de légères différences entre ces différentes liaisons, apprenez-en plus [ici](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent#Differences_from_innerText).
 
 <!-- for some reason puts the comment and html on same line -->
 <!-- prettier-ignore -->
 ```svelte
-<div contenteditable="true" bind:innerHTML={html} />
+<div contenteditable="true" bind:innerHTML={html}></div>
 ```
 
-`<details>` elements support binding to the `open` property.
+Les éléments `<details>` permettent les liaisons avec la propriété `open`.
 
 ```svelte
 <details bind:open={isOpen}>
-	<summary>Details</summary>
-	<p>Something small enough to escape casual notice.</p>
+	<summary>Détails</summary>
+	<p>
+		Quelque chose suffisamment petit pour passer inaperçu.
+	</p>
 </details>
 ```
 
-## Media element bindings
+### Liaisons d'éléments media
 
-Media elements (`<audio>` and `<video>`) have their own set of bindings — seven _readonly_ ones...
+Les éléments media (`<audio>` et `<video>`) ont leurs propres liaisons — au nombre de 7 et en _lecture seule_ ...
 
-- `duration` (readonly) — the total duration of the video, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `played` (readonly) — ditto
-- `seekable` (readonly) — ditto
-- `seeking` (readonly) — boolean
-- `ended` (readonly) — boolean
-- `readyState` (readonly) — number between (and including) 0 and 4
+* `duration` (lecture seule) — durée totale de la vidéo, en secondes
+* `buffered` (lecture seule) — tableau d'objets `{start, end}`
+* `played` (lecture seule) — idem
+* `seekable` (lecture seule) — idem
+* `seeking` (lecture seule) — booléen
+* `ended` (lecture seule) — booléen
+* `readyState` (lecture seule) — nombre entre 0 (inclus) et 4 (inclus)
 
-...and five _two-way_ bindings:
+... et 5 liaisons _lecture-écriture_ :
 
-- `currentTime` — the current playback time in the video, in seconds
-- `playbackRate` — how fast or slow to play the video, where 1 is 'normal'
-- `paused` — this one should be self-explanatory
-- `volume` — a value between 0 and 1
-- `muted` — a boolean value indicating whether the player is muted
+* `currentTime` — temps actuel de lecture de la vidéo, en secondes
+* `playbackRate` — vitesse de lecture de la vidéo, 1 étant 'normal'
+* `paused` — a priori vous voyez ce que c'est
+* `volume` — une valeur entre 0 et 1
+* `muted` — booléen indiquant si le lecteur est en sourdine
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+Les vidéos ont de plus des liaisons en lecture seule pour les attributs `videoWidth` et `videoHeight`.
 
 ```svelte
 <video
@@ -242,15 +246,15 @@ Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
 	bind:muted
 	bind:videoWidth
 	bind:videoHeight
-/>
+></video>
 ```
 
-## Image element bindings
+### Liaisons des éléments image
 
-Image elements (`<img>`) have two readonly bindings:
+Les éléments d'image (`<img>`) ont deux liaisons en lecture seule :
 
-- `naturalWidth` (readonly) — the original width of the image, available after the image has loaded
-- `naturalHeight` (readonly) — the original height of the image, available after the image has loaded
+* `naturalWidth` (lecture seule) — la largeur d'origine de l'image, disponible après le chargement de l'image
+* `naturalHeight` (lecture seule) — la hauteur d'origine de l'image, disponible après le chargement de l'image
 
 ```svelte
 <img
@@ -259,18 +263,21 @@ Image elements (`<img>`) have two readonly bindings:
 ></img>
 ```
 
-## Block-level element bindings
+### Liaisons des éléments de type `block`
 
-Block-level elements have 4 read-only bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
+Les éléments de type `block` ont 4 liaisons en lecture seule, mesurées en utilisant [une technique similaire à celle-ci](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) (en anglais):
 
-- `clientWidth`
-- `clientHeight`
-- `offsetWidth`
-- `offsetHeight`
+* `clientWidth`
+* `clientHeight`
+* `offsetWidth`
+* `offsetHeight`
 
 ```svelte
-<div bind:offsetWidth={width} bind:offsetHeight={height}>
-	<Chart {width} {height} />
+<div
+	bind:offsetWidth={width}
+	bind:offsetHeight={height}
+>
+	<Chart {width} {height}/>
 </div>
 ```
 
@@ -281,29 +288,27 @@ Block-level elements have 4 read-only bindings, measured using a technique simil
 bind:group={variable}
 ```
 
-Inputs that work together can use `bind:group`.
+Les inputs qui fonctionnent ensemble peuvent utiliser `bind:group`.
 
 ```svelte
 <script>
-	let tortilla = 'Plain';
-
-	/** @type {Array<string>} */
+	let tortilla = 'Simple';
 	let fillings = [];
 </script>
 
-<!-- grouped radio inputs are mutually exclusive -->
-<input type="radio" bind:group={tortilla} value="Plain" />
-<input type="radio" bind:group={tortilla} value="Whole wheat" />
-<input type="radio" bind:group={tortilla} value="Spinach" />
+<!-- les inputs radio groupés sont mutuellement exclusifs -->
+<input type="radio" bind:group={tortilla} value="Simple">
+<input type="radio" bind:group={tortilla} value="Complète">
+<input type="radio" bind:group={tortilla} value="Épinards">
 
-<!-- grouped checkbox inputs populate an array -->
-<input type="checkbox" bind:group={fillings} value="Rice" />
-<input type="checkbox" bind:group={fillings} value="Beans" />
-<input type="checkbox" bind:group={fillings} value="Cheese" />
-<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
+<!-- les inputs checkbox groupés remplissent un tableau -->
+<input type="checkbox" bind:group={fillings} value="Riz">
+<input type="checkbox" bind:group={fillings} value="Haricots">
+<input type="checkbox" bind:group={fillings} value="Fromage">
+<input type="checkbox" bind:group={fillings} value="Guacamole (supplément)">
 ```
 
-> `bind:group` only works if the inputs are in the same Svelte component.
+> `bind:group` ne fonctionne que si les `<input>` sont dans le même composant Svelte.
 
 ## bind:this
 
@@ -312,13 +317,12 @@ Inputs that work together can use `bind:group`.
 bind:this={dom_node}
 ```
 
-To get a reference to a DOM node, use `bind:this`.
+Utiliser `bind:this` vous permet d'obtenir une référence à un noeud <span class='vo'>[DOM](/docs/web#dom)</span>.
 
 ```svelte
 <script>
 	import { onMount } from 'svelte';
 
-	/** @type {HTMLCanvasElement} */
 	let canvasElement;
 
 	onMount(() => {
@@ -327,7 +331,7 @@ To get a reference to a DOM node, use `bind:this`.
 	});
 </script>
 
-<canvas bind:this={canvasElement} />
+<canvas bind:this={canvasElement}></canvas>
 ```
 
 ## class:_name_
@@ -336,23 +340,22 @@ To get a reference to a DOM node, use `bind:this`.
 <!--- copy: false --->
 class:name={value}
 ```
-
 ```svelte
 <!--- copy: false --->
 class:name
 ```
 
-A `class:` directive provides a shorter way of toggling a class on an element.
+Une directive `class:` permet de facilement ajouter ou enlever une classe à un élément.
 
 ```svelte
-<!-- These are equivalent -->
-<div class={isActive ? 'active' : ''}>...</div>
-<div class:active={isActive}>...</div>
+<!-- Ces syntaxes sont équivalentes -->
+<div class="{active ? 'active' : ''}">...</div>
+<div class:active={active}>...</div>
 
-<!-- Shorthand, for when name and value match -->
+<!-- Syntaxe raccourcie, quand le nom de la variable correspond au nom de la classe -->
 <div class:active>...</div>
 
-<!-- Multiple class toggles can be included -->
+<!-- Plusieurs directives `class:` peuvent être utilisées -->
 <div class:active class:inactive={!active} class:isAdmin>...</div>
 ```
 
@@ -361,39 +364,37 @@ A `class:` directive provides a shorter way of toggling a class on an element.
 ```svelte
 style:property={value}
 ```
-
 ```svelte
 style:property="value"
 ```
-
 ```svelte
 style:property
 ```
 
-The `style:` directive provides a shorthand for setting multiple styles on an element.
+La directive `style:` fournit un raccourci pour modifier directement le style d'un élément.
 
 ```svelte
-<!-- These are equivalent -->
+<!-- Ces syntaxes sont équivalentes -->
 <div style:color="red">...</div>
 <div style="color: red;">...</div>
 
-<!-- Variables can be used -->
+<!-- Vous pouvez utiliser des variables -->
 <div style:color={myColor}>...</div>
 
-<!-- Shorthand, for when property and variable name match -->
+<!-- Syntaxe raccourcie, quand le nom de la variable correspond au nom de la propriété -->
 <div style:color>...</div>
 
-<!-- Multiple styles can be included -->
-<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
+<!-- Plusieurs directives `style:` peuvent être utilisées -->
+<div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}>...</div>
 
-<!-- Styles can be marked as important -->
+<!-- Vous pouvez définir des styles comme importants -->
 <div style:color|important="red">...</div>
 ```
 
-When `style:` directives are combined with `style` attributes, the directives will take precedence:
+Quand des directives `style:` sont combinées avec des attributs `style`, les directives sont prioritaires.
 
 ```svelte
-<div style="color: blue;" style:color="red">This will be red</div>
+<div style="color: blue;" style:color="red">Ceci sera rouge</div>
 ```
 
 ## use:_action_
@@ -402,7 +403,6 @@ When `style:` directives are combined with `style` attributes, the directives wi
 <!--- copy: false --->
 use:action
 ```
-
 ```svelte
 <!--- copy: false --->
 use:action={parameters}
@@ -417,53 +417,52 @@ action = (node: HTMLElement, parameters: any) => {
 }
 ```
 
-Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
+Les actions sont des fonctions exécutées lorsqu'un élément est créé. Elles peuvent renvoyer un objet avec une méthode `destroy` qui sera appelée lors de la destruction de l'élément.
 
 ```svelte
 <script>
-	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
-		// the node has been mounted in the DOM
+		// le noeud a été ajouté au DOM
 
 		return {
 			destroy() {
-				// the node has been removed from the DOM
+				// le noeud a été supprimé du DOM
 			}
 		};
 	}
 </script>
 
-<div use:foo />
+<div use:foo></div>
 ```
 
-An action can have a parameter. If the returned value has an `update` method, it will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup.
+Une action peut avoir un argument. Si la valeur renvoyée possède une méthode `update`, celle-ci sera exécutée à chaque fois que cet argument changera, juste après que Svelte a appliqué les modifications au <span class="vo">[markup](/docs/web#markup)</span>.
+
+> Ne vous inquiétez pas du fait que l'on redéclare la fonction `foo` pour chaque instance — Svelte garde en mémoire toute fonction qui ne dépend pas d'un état local en dehors de la définition du composant.
 
-> Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 
 ```svelte
 <script>
 	export let bar;
 
-	/** @type {import('svelte/action').Action}  */
 	function foo(node, bar) {
-		// the node has been mounted in the DOM
+		// le noeud a été ajouté au DOM
 
 		return {
 			update(bar) {
-				// the value of `bar` has changed
+				// la valeur de `bar` a changé
 			},
 
 			destroy() {
-				// the node has been removed from the DOM
+				// le noeud a été supprimé du DOM
 			}
 		};
 	}
 </script>
 
-<div use:foo={bar} />
+<div use:foo={bar}></div>
 ```
 
-Read more in the [`svelte/action`](/docs/svelte-action) page.
+Plus d'infos dans la page [`svelte/action`](/docs/svelte-action).
 
 ## transition:_fn_
 
@@ -509,53 +508,57 @@ transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out'
 }
 ```
 
-A transition is triggered by an element entering or leaving the DOM as a result of a state change.
+Une transition est déclenchée lorsqu'un élément entre ou sort du <span class='vo'>[DOM](/docs/web#dom)</span> après un changement d'état.
 
-When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.
+Quand un bloc transitionne vers sa sortie, tous les éléments au sein du bloc, y compris ceux n'ayant pas de transition propre, sont laissés dans le DOM tant que toutes les transitions du bloc se soient terminées.
 
-The `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress.
+La directive `transition:` établit une transition _bidirectionnelle_, ce qui implique qu'elle peut être inversée sans heurts en cours de transition.
 
 ```svelte
 {#if visible}
-	<div transition:fade>fades in and out</div>
+	<div transition:fade>
+		s'estompe en entrant et en sortant
+	</div>
 {/if}
 ```
 
-Transitions are local by default (in Svelte 3, they were global by default). Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.
+Les transitions sont locales par défaut (dans Svelte 3, elles étaient globales par défaut). Les transitions locales sont jouées uniquement lorsque le bloc auquel elles appartiennent est créé ou détruit, _pas_ lorsqu'un bloc parent est créé ou détruit.
 
 ```svelte
 {#if x}
 	{#if y}
 		<!-- Svelte 3: <p transition:fade|local> -->
-		<p transition:fade>fades in and out only when y changes</p>
+		<p transition:fade>entre et sort en s'estompant seulement quand y change</p>
 
 		<!-- Svelte 3: <p transition:fade> -->
-		<p transition:fade|global>fades in and out when x or y change</p>
+		<p transition:fade|global>entre et sort en s'estompant quand x ou y change</p>
 	{/if}
 {/if}
 ```
 
-> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs/client-side-component-api) and marking the transition as `global`.
+> Par défaut, les transitions d'entrée (`in`) ne sont pas jouées au premier rendu. Vous pouvez modifier ce comportement en appliquant `intro: true` lorsque vous [instanciez manuellement un composant](/docs/client-side-component-api).
 
-## Transition parameters
+## Paramètres de transition
 
-Like actions, transitions can have parameters.
+À l'instar des actions, les transitions peuvent avoir des paramètres.
 
-(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+(La syntaxe `{{accolades}}` n'est pas spéciale ; il s'agit simplement d'un objet dans une balise d'expression.)
 
 ```svelte
 {#if visible}
-	<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>
+	<div transition:fade="{{ duration: 2000 }}">
+		s'estompe en entrant et en sortant sur une durée de 2 secondes
+	</div>
 {/if}
 ```
 
-## Custom transition functions
+## Transitions personnalisées
 
-Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
+Les transitions peuvent être définies par des fonctions personnalisées. Si l'objet retourné possède une fonction `css`, Svelte créera une animation CSS qui sera jouée sur l'élément.
 
-The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
+L'argument `t` passé à `css` est une valeur entre `0` et `1` après que la fonction `easing` a été appliquée. Les transitions _entrantes_ sont jouées de `0` à `1`, les transitions _sortantes_ sont jouées de `1` à `0` — en d'autres termes, `1` est l'état normal de l'élément, comme si aucune transition ne lui était appliquée. L'argument `u` est égal à `1 - t`.
 
-The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
+La fonction est régulièrement appelée _avant_ que la transition ne commence, avec différentes valeurs pour `t` et `u`.
 
 ```svelte
 <script>
@@ -581,13 +584,13 @@ The function is called repeatedly _before_ the transition begins, with different
 </script>
 
 {#if visible}
-	<div in:whoosh>whooshes in</div>
+	<div in:whoosh>entre en faisant woosh</div>
 {/if}
 ```
 
-A custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments.
+Une fonction de transition personnalisée peut aussi renvoyer une fonction `tick`, qui est appelée _pendant_ la transition avec les mêmes arguments `t` et `u`.
 
-> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
+> Il est recommandé d'utiliser `css` plutôt que `tick`, si possible — les animations CSS sont exécutées sur un <span class='vo'>[thread](/docs/development#thread)</span> différent de celui de JS, évitant ainsi de ralentir les machines les moins puissantes.
 
 ```svelte
 <!--- file: App.svelte --->
@@ -599,10 +602,13 @@ A custom transition function can also return a `tick` function, which is called
 	 * @param {{ speed?: number }} params
 	 */
 	function typewriter(node, { speed = 1 }) {
-		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
+		const valid = (
+			node.childNodes.length === 1 &&
+			node.childNodes[0].nodeType === Node.TEXT_NODE
+		);
 
 		if (!valid) {
-			throw new Error(`This transition only works on elements with a single text node child`);
+			throw new Error(`Cette transition ne fonctionne que sur les éléments avec un seul noeud texte comme enfant`);
 		}
 
 		const text = node.textContent;
@@ -610,7 +616,7 @@ A custom transition function can also return a `tick` function, which is called
 
 		return {
 			duration,
-			tick: (t) => {
+			tick: t => {
 				const i = ~~(text.length * t);
 				node.textContent = text.slice(0, i);
 			}
@@ -619,37 +625,39 @@ A custom transition function can also return a `tick` function, which is called
 </script>
 
 {#if visible}
-	<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>
+	<p in:typewriter="{{ speed: 1 }}">
+		Portez ce vieux whisky au juge blond qui fume
+	</p>
 {/if}
 ```
 
-If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](https://learn.svelte.dev/tutorial/deferred-transitions) possible.
+Si une transition retourne une fonction au lieu d'un objet transition, la fonction sera appelée lors de la prochaine micro-tâche. Cela permet à plusieurs transitions de se coordonner, rendant les effets de [fondu croisé](PUBLIC_LEARN_SITE_URL/tutorial/deferred-transitions) possibles.
 
-Transition functions also receive a third argument, `options`, which contains information about the transition.
+Les fonctions de transition peuvent aussi avoir un troisième argument, `options`, qui contient des informations sur la transition.
 
-Available values in the `options` object are:
+Les valeurs possibles dans l'objet `options` sont:
 
-- `direction` - one of `in`, `out`, or `both` depending on the type of transition
+* `direction` - `in`, `out`, or `both`, selon le type de transition
 
-## Transition events
+## Évènements de transition
 
-An element with transitions will dispatch the following events in addition to any standard DOM events:
+Un élément ayant des transitions génére les évènements suivants en plus des évènements <span class='vo'>[DOM](/docs/web#dom)</span> standards:
 
-- `introstart`
-- `introend`
-- `outrostart`
-- `outroend`
+* `introstart`
+* `introend`
+* `outrostart`
+* `outroend`
 
 ```svelte
 {#if visible}
 	<p
-		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart={() => (status = 'intro started')}
-		on:outrostart={() => (status = 'outro started')}
-		on:introend={() => (status = 'intro ended')}
-		on:outroend={() => (status = 'outro ended')}
+		transition:fly="{{ y: 200, duration: 2000 }}"
+		on:introstart="{() => status = "début de l'entrée"}"
+		on:outrostart="{() => status = "début de la sortie"}"
+		on:introend="{() => status = "fin de l'entrée"}"
+		on:outroend="{() => status = "fin de la sortie"}"
 	>
-		Flies in and out
+		Entre et sort en volant
 	</p>
 {/if}
 ```
@@ -716,13 +724,15 @@ out:fn|local
 out:fn|local={params}
 ```
 
-Similar to `transition:`, but only applies to elements entering (`in:`) or leaving (`out:`) the DOM.
+Similaire à `transition:`, mais s'applique uniquement aux éléments entrant (`in:`) ou sortant (`out:`) du <span class='vo'>[DOM](/docs/web#dom)</span>.
 
-Unlike with `transition:`, transitions applied with `in:` and `out:` are not bidirectional — an in transition will continue to 'play' alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
+Contrairement à `transition:`, les transitions appliquées avec `in:` et `out:` ne sont pas bi-directionnelles — une transition entrante continuera sa course en parallèle de la transition sortante, plutôt que d'être inversée, si le bloc est supprimé pendant la transition en cours. Si une transition sortante est annulée, les transitions seront rejouées du début.
 
 ```svelte
 {#if visible}
-	<div in:fly out:fade>flies in, fades out</div>
+	<div in:fly out:fade>
+		entre en volant, sort en fondu
+	</div>
 {/if}
 ```
 
@@ -765,38 +775,38 @@ DOMRect {
 }
 ```
 
-An animation is triggered when the contents of a [keyed each block](/docs/logic-blocks#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
+Une animation est déclenchée quand le contenu d'un [bloc `each` à clé](/docs/logic-blocks#each) est réordonné. Les animations ne sont pas jouées lorsqu'un élément est ajouté ou supprimé, seulement lorsque l'indice d'un élément de liste change au sein d'un bloc `each`. Les directives `animate:` doivent appartenir à un élément enfant _direct_ d'un bloc `each` à clé.
 
-Animations can be used with Svelte's [built-in animation functions](/docs/svelte-animate) or [custom animation functions](/docs/element-directives#custom-animation-functions).
+Les animations peuvent être utilisées avec les [fonctions d'animation natives](/docs/svelte-animate) de Svelte ou avec des [fonctions d'animation personnalisées](/docs/element-directives#fonctions-d-animation-personnalis-es).
 
 ```svelte
-<!-- When `list` is reordered the animation will run-->
+<!-- Quand `list` est réordonnée, l'animation sera jouée -->
 {#each list as item, index (item)}
 	<li animate:flip>{item}</li>
 {/each}
 ```
 
-## Animation Parameters
+## Paramètres d'animation
 
-As with actions and transitions, animations can have parameters.
+À l'instar des actions et des transitions, les animations peuvent avoir des paramètres.
 
-(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+(La syntaxe `{{accolades}}` n'est pas spéciale; il s'agit simplement d'un objet dans une balise d'expression.)
 
 ```svelte
 {#each list as item, index (item)}
-	<li animate:flip={{ delay: 500 }}>{item}</li>
+	<li animate:flip="{{ delay: 500 }}">{item}</li>
 {/each}
 ```
 
-## Custom animation functions
+## Fonctions d'animation personnalisées
 
-Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
+Les animations peuvent être définies par des fonctions fournissant un `node`, un objet `animation`, et n'importe quels `parameters` en arguments. L'argument `animation` est un objet ayant les propriétés `from` et `to`, chacune contenant un [DOMRect](https://developer.mozilla.org/fr/docs/Web/API/DOMRect#Properties) décrivant la géométrie de l'élément dans ses positions de départ (`start`) et arrivée (`end`). La propriété `from` est le DOMRect de l'élément dans sa position de départ, la propriété `to` est le DOMRect de l'élément dans sa position d'arrivée après que la liste a été réordonnée et le <span class='vo'>[DOM](/docs/web#dom)</span> mis à jour.
 
-If the returned object has a `css` method, Svelte will create a CSS animation that plays on the element.
+Si l'objet renvoyé a une méthode `css`, Svelte va créer une animation CSS qui sera jouée sur l'élément.
 
-The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.
+L'argument `t` passé à `css` est une valeur qui va de `0` à `1` avec que la fonction `easing` a été appliquée. L'argument `u` est égal à `1 - t`.
 
-The function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.
+La fonction est régulièrement appelée _avant_ que la transition ne commence, avec différentes valeurs pour `t` et `u`.
 
 <!-- TODO: Types -->
 
@@ -810,6 +820,7 @@ The function is called repeatedly _before_ the animation begins, with different
 	 * @param {any} params
 	 */
 	function whizz(node, { from, to }, params) {
+
 		const dx = from.left - to.left;
 		const dy = from.top - to.top;
 
@@ -819,7 +830,7 @@ The function is called repeatedly _before_ the animation begins, with different
 			delay: 0,
 			duration: Math.sqrt(d) * 120,
 			easing: cubicOut,
-			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
+			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t*360}deg);`
 		};
 	}
 </script>
@@ -829,9 +840,9 @@ The function is called repeatedly _before_ the animation begins, with different
 {/each}
 ```
 
-A custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments.
+Une fonction d'animation personnalisée peut aussi renvoyer une fonction `tick`, qui est appelée _pendant_ la transition avec les mêmes arguments `t` et `u`.
 
-> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
+> Il est recommandé d'utiliser `css` plutôt que `tick`, si possible — les animations CSS sont exécutées sur un <span class='vo'>[thread](/docs/development#thread)</span> différent de celui de JS, évitant ainsi de ralentir les machines les moins puissantes.
 
 ```svelte
 <script>
@@ -843,6 +854,7 @@ A custom animation function can also return a `tick` function, which is called _
 	 * @param {any} params
 	 */
 	function whizz(node, { from, to }, params) {
+
 		const dx = from.left - to.left;
 		const dy = from.top - to.top;
 
@@ -852,7 +864,8 @@ A custom animation function can also return a `tick` function, which is called _
 			delay: 0,
 			duration: Math.sqrt(d) * 120,
 			easing: cubicOut,
-			tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
+			tick: (t, u) =>
+				Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
 		};
 	}
 </script>
diff --git a/documentation/docs/02-template-syntax/06-component-directives.md b/documentation/docs/02-template-syntax/06-component-directives.md
index 39bdf80010..5ba1c652f1 100644
--- a/documentation/docs/02-template-syntax/06-component-directives.md
+++ b/documentation/docs/02-template-syntax/06-component-directives.md
@@ -1,15 +1,15 @@
 ---
-title: Component directives
+title: Directives de composant
 ---
 
-## on:_eventname_
+## on:*eventname*
 
 ```svelte
 <!--- copy: false --->
 on:eventname={handler}
 ```
 
-Components can emit events using [`createEventDispatcher`](/docs/svelte#createeventdispatcher) or by forwarding DOM events.
+Les composants peuvent émettre des évènements en utilisant [createEventDispatcher](/docs/svelte#createeventdispatcher), ou en relayant les évènements <span class='vo'>[DOM](/docs/web#dom)</span>.
 
 ```svelte
 <script>
@@ -25,16 +25,17 @@ Components can emit events using [`createEventDispatcher`](/docs/svelte#createev
 <button on:click> two </button>
 ```
 
-Listening for component events looks the same as listening for DOM events:
+Il est possible d'écouter des évènements de composant de la même manière que pour des évènements <span class='vo'>[DOM](/docs/web#dom)</span> :
 
 ```svelte
-<SomeComponent on:whatever={handler} />
+<UnComposant on:peuimporte={handler} />
 ```
 
-As with DOM events, if the `on:` directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it.
+Comme pour les évènements <span class='vo'>[DOM](/docs/web#dom)</span>, si la direction `on:` est utilisée sans valeur, l'évènement sera *relayé*, ce qui permet au parent du composant de l'écouter.
+
 
 ```svelte
-<SomeComponent on:whatever />
+<UnComposant on:peuimporte />
 ```
 
 ## --style-props
@@ -44,72 +45,85 @@ As with DOM events, if the `on:` directive is used without a value, the event wi
 --style-props="anycssvalue"
 ```
 
-You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
+Vous pouvez aussi passer des props de style aux composants en utilisant les [propriétés CSS personnalisées](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties). Cela permet notamment d'appliquer des thèmes.
 
-Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
+Cette fonctionnalité est principalement du sucre syntaxique, que Svelte va transformer pour entourer l'élément, comme dans cet exemple :
 
 ```svelte
-<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" />
+<Slider
+  bind:value
+  min={0}
+  --rail-color="black"
+  --track-color="rgb(0, 0, 255)"
+/>
 ```
 
-Desugars to this:
+Qui va générer :
 
 ```svelte
 <div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
-	<Slider bind:value min={0} max={100} />
+  <Slider
+    bind:value
+    min={0}
+    max={100}
+  />
 </div>
 ```
 
-**Note**: Since this is an extra `<div>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
+**Note**: Faites attention, cette syntaxe ajoute une `<div>` à votre <span class="vo">[markup](/docs/web#markup)</span>, qui pourra être ciblée accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.
 
-For SVG namespace, the example above desugars into using `<g>` instead:
+Dans le <span class='vo'>[namespace](/docs/development#namespace)</span> SVG, l'exemple ci-dessus va générer un `<g>` à la place d'une `<div>` :
 
 ```svelte
 <g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
-	<Slider bind:value min={0} max={100} />
+  <Slider
+    bind:value
+    min={0}
+    max={100}
+  />
 </g>
 ```
 
-**Note**: Since this is an extra `<g>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
+**Note**: Faites attention, cette syntaxe ajoute un `<g>` à votre <span class="vo">[markup](/docs/web#markup)</span>, qui pourra être ciblé accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.
 
-Svelte's CSS Variables support allows for easily themeable components:
+Le support des variables CSS dans Svelte permet d'appliquer des thèmes aux composants de manière simple :
 
 ```svelte
 <style>
-	.potato-slider-rail {
-		background-color: var(--rail-color, var(--theme-color, 'purple'));
-	}
+  .potato-slider-rail {
+    background-color: var(--rail-color, var(--theme-color, 'purple'));
+  }
 </style>
 ```
 
-So you can set a high-level theme color:
+Vous pouvez alors définir une couleur de thème à plus haut niveau :
 
 ```css
 /* global.css */
 html {
-	--theme-color: black;
+  --theme-color: black;
 }
 ```
 
-Or override it at the consumer level:
+Ou l'écraser au niveau de l'instantiation du composant :
 
 ```svelte
-<Slider --rail-color="goldenrod" />
+<Slider --rail-color="goldenrod"/>
 ```
 
-## bind:_property_
+## bind:*property*
 
 ```svelte
 bind:property={variable}
 ```
 
-You can bind to component props using the same syntax as for elements.
+Vous pouvez lier des props de composant en utilisant la même syntaxe que pour les éléments.
 
 ```svelte
-<Keypad bind:value={pin} />
+<Keypad bind:value={pin}/>
 ```
 
-While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.
+Alors que les <span class="vo">[props](/docs/sveltejs#props)</span> de Svelte sont réactives sans ajouter de liaison, cette réactivité est descendante vers l'intérieur du composant par défaut. Utiliser `bind:property` permet aux modifications effectuées sur cette prop depuis l'intérieur du composant de remonter en dehors du composant.
 
 ## bind:this
 
@@ -118,12 +132,13 @@ While Svelte props are reactive without binding, that reactivity only flows down
 bind:this={component_instance}
 ```
 
-Components also support `bind:this`, allowing you to interact with component instances programmatically.
+Les composants permettent aussi `bind:this`, permettant d'interagir avec les instances de composant programmatiquement.
 
 ```svelte
-<ShoppingCart bind:this={cart} />
+<ShoppingCart bind:this={cart}/>
 
-<button on:click={() => cart.empty()}> Empty shopping cart </button>
+<button on:click={() => cart.empty()}> Caddie vide </button>
 ```
 
-> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
+> Notez qu'on ne peut pas écrire `{cart.empty}` puisque `cart` est `undefined` quand le bouton est rendu la première fois, ce qui provoquerait une erreur
+
diff --git a/documentation/docs/02-template-syntax/07-special-elements.md b/documentation/docs/02-template-syntax/07-special-elements.md
index 74a42d486e..98dd0906ed 100644
--- a/documentation/docs/02-template-syntax/07-special-elements.md
+++ b/documentation/docs/02-template-syntax/07-special-elements.md
@@ -1,120 +1,118 @@
 ---
-title: Special elements
+title: Éléments spéciaux
 ---
 
 ## `<slot>`
 
 ```svelte
-<slot><!-- optional fallback --></slot>
+<slot><!-- contenu par défaut optionnel --></slot>
 ```
-
 ```svelte
-<slot name="x"><!-- optional fallback --></slot>
+<slot name="x"><!-- contenu par défaut optionnel --></slot>
 ```
-
 ```svelte
-<slot prop={value} />
+<slot prop={value}></slot>
 ```
 
-Components can have child content, in the same way that elements can.
+Les composants peuvent avoir du contenu enfant, de la même façon que les éléments.
 
-The content is exposed in the child component using the `<slot>` element, which can contain fallback content that is rendered if no children are provided.
+Le contenu est exposé dans le composant enfant avec l'élément `<slot>`, qui peut avoir un contenu par défaut qui sera utilisé si aucun enfant n'est fourni.
 
 ```svelte
 <!-- Widget.svelte -->
 <div>
 	<slot>
-		this fallback content will be rendered when no content is provided, like in the first example
+    ce contenu slot par défaut sera rendu si aucun contenu n'est fourni, comme dans le premier exemple
 	</slot>
 </div>
 
 <!-- App.svelte -->
 <Widget />
-<!-- this component will render the default content -->
+<!-- ce composant va rendre le contenu par défaut -->
 
 <Widget>
-	<p>this is some child content that will overwrite the default slot content</p>
+	<p>ceci est du contenu qui remplacera le contenu slot par défaut</p>
 </Widget>
 ```
 
-Note: If you want to render regular `<slot>` element, You can use `<svelte:element this="slot" />`.
+Note: Si vous souhaitez afficher [un élément HTML de type `<slot>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot), vous pouvez utiliser `<svelte:element this="slot" />`.
 
-### `<slot name="`_name_`">`
+### `<slot name="`*name*`">`
 
-Named slots allow consumers to target specific areas. They can also have fallback content.
+Les <span class="vo">[slots](/docs/sveltejs#slot)</span> nommés permettent aux parents de cibler des zones spécifiques. Ils peuvent aussi avoir du contenu par défaut.
 
 ```svelte
 <!-- Widget.svelte -->
 <div>
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer" />
+	<slot name="header">Aucun en-tête fourni</slot>
+	<p>Du contenu entre l'en-tête et le bas de page</p>
+	<slot name="footer"></slot>
 </div>
 
 <!-- App.svelte -->
 <Widget>
-	<h1 slot="header">Hello</h1>
+	<h1 slot="header">Bonjour</h1>
 	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
 </Widget>
 ```
 
-Components can be placed in a named slot using the syntax `<Component slot="name" />`.
-In order to place content in a slot without using a wrapper element, you can use the special element `<svelte:fragment>`.
+Les composants peuvent être placés dans un <span class="vo">[slot](/docs/sveltejs#slot)</span> nommé en utilisant le syntaxe `<Component slot="name />`.
+Pour positionner du contenu dans un <span class="vo">[slot](/docs/sveltejs#slot)</span> sans l'entourer d'un élément, vous pouvez utiliser l'élément spécial `<svelte:fragment>`.
 
 ```svelte
 <!-- Widget.svelte -->
 <div>
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer" />
+	<slot name="header">Aucun en-tête fourni</slot>
+	<p>Du contenu entre l'en-tête et le bas de page</p>
+	<slot name="footer"></slot>
 </div>
 
 <!-- App.svelte -->
 <Widget>
 	<HeaderComponent slot="header" />
 	<svelte:fragment slot="footer">
-		<p>All rights reserved.</p>
+		<p>Tous droits réservés.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
 	</svelte:fragment>
 </Widget>
 ```
 
-### $$slots
+### `$$slots`
 
-`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it.
+L'objet `$$slots` a comme clés les noms des <span class="vo">[slots](/docs/sveltejs#slot)</span> passés au composant par le parent. Si le parent ne fournit pas un <span class="vo">[slot](/docs/sveltejs#slot)</span> avec un nom particulier, ce nom ne sera pas présent dans `$$slots`. Cela permet aux composants d'afficher un <span class="vo">[slot](/docs/sveltejs#slot)</span> (et d'autres éléments, comment des *wrappers* de style) uniquement si le parent le fournit.
 
-Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `<div slot="title" />` to a child component, `$$slots.title` will be truthy within the child.
+Notez que passer explicitement un <span class="vo">[slot](/docs/sveltejs#slot)</span> nommé vide ajoutera le nom de ce slot à `$$slots`. Par exemple, si un parent fournit `<div slot="title" />` à un composant enfant, `$$slots.title` sera *truthy* dans l'enfant.
 
 ```svelte
 <!-- Card.svelte -->
 <div>
-	<slot name="title" />
+	<slot name="title"></slot>
 	{#if $$slots.description}
-		<!-- This <hr> and slot will render only if a slot named "description" is provided. -->
-		<hr />
-		<slot name="description" />
+		<!-- Ce <hr> et ce <slot> seront rendus uniquement si un slot nommé "description" est fourni -->
+		<hr>
+		<slot name="description"></slot>
 	{/if}
 </div>
 
 <!-- App.svelte -->
 <Card>
-	<h1 slot="title">Blog Post Title</h1>
-	<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
+	<h1 slot="title">Titre d'article de blog</h1>
+	<!-- Aucun slot "description" n'est fourni, donc aucun des éléments dépendants de $$slots.description ne sera rendu -->
 </Card>
 ```
 
-### `<slot key={`_value_`}>`
+### `<slot key={`*value*`}>`
 
-Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
+Les <span class="vo">[slots](/docs/sveltejs#slot)</span> peuvent être rendus zéro ou plusieurs fois, et peuvent passer des valeurs *en retour* au parent en utilisant des <span class="vo">[props](/docs/sveltejs#props)</span>. Le parent expose ces valeurs au <span class="vo">[template](/docs/development#template)</span> de <span class="vo">[slot](/docs/sveltejs#slot)</span> avec la directive `let:`.
 
-The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
+Il est possible d'utiliser la syntaxe raccourcie usuelle — `let:item` est équivalent à `let:item={item}`, et `<slot {item}>` est équivalent à `<slot item={item}>`.
 
 ```svelte
 <!-- FancyList.svelte -->
 <ul>
 	{#each items as item}
 		<li class="fancy">
-			<slot prop={item} />
+			<slot prop={item}></slot>
 		</li>
 	{/each}
 </ul>
@@ -125,19 +123,19 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
 </FancyList>
 ```
 
-Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.
+Les <span class="vo">[slots](/docs/sveltejs#slot)</span> nommés peuvent aussi exposer des valeurs. La directive `let:` ira sur l'élément avec l'attribut `slot` correspondant.
 
 ```svelte
 <!-- FancyList.svelte -->
 <ul>
 	{#each items as item}
 		<li class="fancy">
-			<slot name="item" {item} />
+			<slot name="item" {item}></slot>
 		</li>
 	{/each}
 </ul>
 
-<slot name="footer" />
+<slot name="footer"></slot>
 
 <!-- App.svelte -->
 <FancyList {items}>
@@ -148,56 +146,55 @@ Named slots can also expose values. The `let:` directive goes on the element wit
 
 ## `<svelte:self>`
 
-The `<svelte:self>` element allows a component to include itself, recursively.
+L'élément `<svelte:self>` permet à un composant de s'inclure lui-même, récursivement.
 
-It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
+Cet élément ne peut pas être utilisé à la racine du <span class="vo">[markup](/docs/web#markup)</span> ; il doit être placé à l'intérieur d'un bloc `{#if}` ou `{#each}` ou passé à un `<slot>` pour éviter une boucle infinie.
 
 ```svelte
 <script>
-	/** @type {number} */
 	export let count;
 </script>
 
 {#if count > 0}
-	<p>counting down... {count}</p>
-	<svelte:self count={count - 1} />
+	<p>compte à rebours ... {count}</p>
+	<svelte:self count="{count - 1}"/>
 {:else}
-	<p>lift-off!</p>
+	<p>décollage !</p>
 {/if}
 ```
 
 ## `<svelte:component>`
 
 ```svelte
-<svelte:component this={expression} />
+<svelte:component this={expression}/>
 ```
 
-The `<svelte:component>` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated.
+L'élément `<svelte:component>` rend un composant dynamiquement, en utilisant le constructeur du composant spécifié avec la propriété `this`. Quand cette propriété change, l'instance du composant est détruite et recréée.
 
-If `this` is falsy, no component is rendered.
+Si la valeur de `this` est <span class="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>, aucun composant n'est rendu.
 
 ```svelte
-<svelte:component this={currentSelection.component} foo={bar} />
+<svelte:component this={currentSelection.component} foo={bar}/>
 ```
 
+
 ## `<svelte:element>`
 
 ```svelte
-<svelte:element this={expression} />
+<svelte:element this={expression}/>
 ```
 
-The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
+L'élément `<svelte:element>` permet de rendre un élément d'un type spécifié dynamiquement. Cela peut servir par exemple pour afficher du contenu texte enrichi provenant d'un CMS. Toutes les propriétés et fonctions d'écoute d'évènements seront appliquées à l'élément.
 
-The only supported binding is `bind:this`, since the element type-specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
+Le seul type de liaison (<span class="vo">[binding](/docs/sveltejs#binding)</span>) possible dans ce cas est `bind:this`, puisque les liaisons spécifiques créées par Svelte au moment de la compilation pour le type de l'élément (par ex. `bind:value` pour les éléments `<input>`) ne sont pas compatibles avec un type de balise dynamique.
 
-If `this` has a nullish value, the element and its children will not be rendered.
+Si `this` a une valeur <span class="vo">[nullish](/docs/javascript#nullish)</span>, l'élément et ses enfants ne seront pas rendus.
 
-If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode.
+Si `this` a pour valeur le nom d'une [balise vide](https://developer.mozilla.org/fr/docs/Glossary/Void_element) (comme `br`), et des enfants ont été fournis à `<svelte:element>`, une erreur d'exécution sera levée en mode développement.
 
 ```svelte
 <script>
 	let tag = 'div';
-
 	export let handler;
 </script>
 
@@ -207,140 +204,148 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
 ## `<svelte:window>`
 
 ```svelte
-<svelte:window on:event={handler} />
+<svelte:window on:event={handler}/>
 ```
-
 ```svelte
-<svelte:window bind:prop={value} />
+<svelte:window bind:prop={value}/>
 ```
 
-The `<svelte:window>` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.
+L'élément `<svelte:window>` permet d'ajouter des fonctions d'écoute d'évènements à l'objet `window` sans avoir à penser à les supprimer quand le composant est détruit, ou sans avoir à vérifier l'existence de `window` lorsque l'on fait des rendus côté serveur.
 
-Unlike `<svelte:self>`, this element may only appear at the top level of your component and must never be inside a block or element.
+À l'inverse de `<svelte:self>`, cet élément peut uniquement être placé à la racine du <span class="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
 
 ```svelte
 <script>
-	/** @param {KeyboardEvent} event */
 	function handleKeydown(event) {
-		alert(`pressed the ${event.key} key`);
+		alert(`la touche ${event.key} a été enfoncée`);
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window on:keydown={handleKeydown}/>
 ```
 
-You can also bind to the following properties:
+Vous pouvez aussi lier (avec `bind:`) les propriétés suivantes :
 
-- `innerWidth`
-- `innerHeight`
-- `outerWidth`
-- `outerHeight`
-- `scrollX`
-- `scrollY`
-- `online` — an alias for `window.navigator.onLine`
-- `devicePixelRatio`
+* `innerWidth`
+* `innerHeight`
+* `outerWidth`
+* `outerHeight`
+* `scrollX`
+* `scrollY`
+* `online` — alias de `window.navigator.onLine`
+* `devicePixelRatio`
 
-All except `scrollX` and `scrollY` are readonly.
+Toutes ces propriétés sont en lecture seule, à l'exception de `scrollX` and `scrollY`.
 
 ```svelte
-<svelte:window bind:scrollY={y} />
+<svelte:window bind:scrollY={y}/>
 ```
 
-> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
+> Notez que la page ne défilera pas à la valeur fournie initialement pour des raisons d'accessibilité. Seuls les changements ultérieurs liés aux variables `scrollX` et `scrollY` déclencheront le défilement. Cependant, si un défilement initial est tout de même nécessaire, vous pouvez utiliser `scrollTo()` dans `onMount()`.
 
 ## `<svelte:document>`
 
 ```svelte
-<svelte:document on:event={handler} />
+<svelte:document on:event={handler}/>
 ```
 
 ```svelte
-<svelte:document bind:prop={value} />
+<svelte:document bind:prop={value}/>
 ```
 
-Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on `document`.
+À l'instar de `<svelte:window>`, cet élément vous permet d'ajouter des gestionnaires d'évènement sur `document`, comme `visibilitychange`, qui n'est pas déclenché sur `window`. Cet élément vous permet aussi d'utiliser des [actions](/docs/element-directives#use-action) sur `document`.
 
-As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
+Comme pour `<svelte:window>`, cet élément peut uniquement être utilisé à la racine du <span class="vo">[markup](/docs/web#markup)</span> de votre composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
 
 ```svelte
-<svelte:document on:visibilitychange={handleVisibilityChange} use:someAction />
+<svelte:document
+	on:visibilitychange={handleVisibilityChange}
+	use:someAction
+/>
 ```
 
-You can also bind to the following properties:
+Vous pouvez aussi lier (avec `:bind`) les propriétés suivantes:
 
-- `fullscreenElement`
-- `visibilityState`
+* `fullscreenElement`
+* `visibilityState`
 
-All are readonly.
+Elles sont toutes en lecture seule.
 
 ## `<svelte:body>`
 
 ```svelte
-<svelte:body on:event={handler} />
+<svelte:body on:event={handler}/>
 ```
 
-Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element.
+À l'instar de `<svelte:window>`, cet élément vous permet d'ajouter des fonctions d'écoute pour les évènements se produisant sur le `document.body`, comme `mouseenter` et `mouseleave`, qui ne se déclenchent pas sur `window`. Cela permet également d'utiliser des [actions](/docs/element-directives#use-action) sur l'élément `<body>`.
 
-As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
+
+Comme pour `<svelte:window>` et `<svelte:document>`, cet élément peut uniquement être placé à la racine du <span class="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
 
 ```svelte
-<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} use:someAction />
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+	use:someAction
+/>
 ```
 
+
 ## `<svelte:head>`
 
 ```svelte
 <svelte:head>...</svelte:head>
 ```
 
-This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content.
+Cet élément rend possible l'insertion d'éléments dans `document.head`. Lors d'un rendu côté serveur, le contenu de `head` est exposé séparément du contenu `html`.
 
-As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
+Comme pour `<svelte:window>`, `<svelte:document>` et `<svelte:body>`, cet élément peut uniquement être placé à la racine du <span class="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
 
 ```svelte
 <svelte:head>
-	<title>Hello world!</title>
-	<meta name="description" content="This is where the description goes for SEO" />
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 ```
 
 ## `<svelte:options>`
 
 ```svelte
-<svelte:options option={value} />
+<svelte:options option={value}/>
 ```
 
-The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/svelte-compiler#compile). The possible options are:
+L'élément `<svelte:options>` permet de fournir à un composant des options de compilation spécifiques, dont le détail est fourni dans [la section Compilation](/docs/svelte-compiler#compile).
+Les options disponibles sont:
 
-- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-- `accessors={true}` — adds getters and setters for the component's props
-- `accessors={false}` — the default
-- `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings
-- `customElement="..."` — the name to use when compiling this component as a custom element
+* `immutable={true}` — vous n'utilisez aucune donnée mutable, le compilateur peut donc se contenter d'effectuer des vérifications d'égalité par référence pour déterminer si des valeurs ont changé
+* `immutable={false}` — utilisé par défaut. Svelte sera plus conservatif pour vérifier si des objets mutables ont changé
+* `accessors={true}` — ajoute des <span class="vo">[getters](/docs/development#getter-setter)</span> et <span class="vo">[setters](/docs/development#getter-setter)</span> aux <span class="vo">[props](/docs/sveltejs#props)</span> d'un composant
+* `accessors={false}` — utilisé par défaut
+* `namespace="..."` — le <span class="vo">[namespace](/docs/development#namespace)</span> où ce composant sera utilisé, le plus souvent "svg" ; utilisez le <span class="vo">[namespace](/docs/development#namespace)</span> "foreign" pour désactiver l'insensibilité à la casse des noms d'attributs ainsi que les avertissements spécifiques au HTML
+* `tag="..."` — le nom à utiliser à la compilation de ce composant en <span class="vo">[web component](/docs/web#web-component)</span>
 
 ```svelte
-<svelte:options customElement="my-custom-element" />
+<svelte:options tag="my-custom-element"/>
 ```
 
 ## `<svelte:fragment>`
 
-The `<svelte:fragment>` element allows you to place content in a [named slot](/docs/special-elements#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+L'élément `<svelte:fragment>` permet de placer du contenu dans un [slot nommé](/docs/special-elements#slot-slot-name-name) sans l'encadrer par un élément <span class="vo">[DOM](/docs/web#dom)</span> supplémentaire. Cela permet de garder la structure de votre document intacte.
 
 ```svelte
 <!-- Widget.svelte -->
 <div>
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer" />
+	<slot name="header">Aucun en-tête fourni</slot>
+	<p>Du contenu entre l'en-tête et le bas de page</p>
+	<slot name="footer"></slot>
 </div>
 
 <!-- App.svelte -->
 <Widget>
-	<h1 slot="header">Hello</h1>
+	<HeaderComponent slot="header" />
 	<svelte:fragment slot="footer">
-		<p>All rights reserved.</p>
+		<p>Tous droits réservés.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
 	</svelte:fragment>
 </Widget>
 ```
+
diff --git a/documentation/docs/02-template-syntax/meta.json b/documentation/docs/02-template-syntax/meta.json
index e703825a0c..bd7ff0de22 100644
--- a/documentation/docs/02-template-syntax/meta.json
+++ b/documentation/docs/02-template-syntax/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Template Syntax"
+	"title": "Syntaxe"
 }
diff --git a/documentation/docs/03-runtime/01-svelte.md b/documentation/docs/03-runtime/01-svelte.md
index da738b4594..4041b2ec8e 100644
--- a/documentation/docs/03-runtime/01-svelte.md
+++ b/documentation/docs/03-runtime/01-svelte.md
@@ -2,27 +2,27 @@
 title: svelte
 ---
 
-The `svelte` package exposes [lifecycle functions](https://learn.svelte.dev/tutorial/onmount) and the [context API](https://learn.svelte.dev/tutorial/context-api).
+Le paquet `svelte` expose les [fonctions de cycle de vie](PUBLIC_LEARN_SITE_URL/tutorial/onmount) et l'[API de contexte](PUBLIC_LEARN_SITE_URL/tutorial/context-api).
 
 ## `onMount`
 
 > EXPORT_SNIPPET: svelte#onMount
 
-The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
+La fonction `onMount` permet de planifier l'exécution d'un <span class="vo">[callback](/docs/development#callback)</span> dès que le composant a été monté dans le <span class="vo">[DOM](/docs/web#dom)</span>. Elle doit être appelée pendant l'instantiation du composant (mais elle n'a pas besoin d'être définie _à l'intérieur_ du composant ; elle peut être appelée depuis un module externe).
 
-`onMount` does not run inside a [server-side component](/docs/server-side-component-api).
+`onMount` n'est pas exécutée pas à l'intérieur d'un [composant serveur](/docs/server-side-component-api).
 
 ```svelte
 <script>
 	import { onMount } from 'svelte';
 
 	onMount(() => {
-		console.log('the component has mounted');
+		console.log('le composant est monté');
 	});
 </script>
 ```
 
-If a function is returned from `onMount`, it will be called when the component is unmounted.
+Si une fonction est renvoyée par `onMount`, celle-ci sera appelée lorsque le composant sera démonté.
 
 ```svelte
 <script>
@@ -38,22 +38,22 @@ If a function is returned from `onMount`, it will be called when the component i
 </script>
 ```
 
-> This behaviour will only work when the function passed to `onMount` _synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
+> Ce comportement ne fonctionne que si la fonction passée à `onMount` renvoie une valeur de manière _synchrone_. Les fonctions `async` renvoient toujours une `Promise`, ce qui implique qu'elles ne peuvent jamais renvoyer une fonction de manière _synchrone_.
 
 ## `beforeUpdate`
 
 > EXPORT_SNIPPET: svelte#beforeUpdate
 
-Schedules a callback to run immediately before the component is updated after any state change.
+Planifie l'exécution d'un <span class="vo">[callback](/docs/development#callback)</span> immédiatement avant la mise à jour du composant, lorsqu'un changement d'état s'est produit.
 
-> The first time the callback runs will be before the initial `onMount`
+> La première exécution du <span class="vo">[callback](/docs/development#callback)</span> se produit juste avant l'appel du `onMount` initial.
 
 ```svelte
 <script>
 	import { beforeUpdate } from 'svelte';
 
 	beforeUpdate(() => {
-		console.log('the component is about to update');
+		console.log('le composant est sur le point de se mettre à jour');
 	});
 </script>
 ```
@@ -62,16 +62,16 @@ Schedules a callback to run immediately before the component is updated after an
 
 > EXPORT_SNIPPET: svelte#afterUpdate
 
-Schedules a callback to run immediately after the component has been updated.
+Planifie un <span class="vo">[callback](/docs/development#callback)</span> à exécuter immédiatement après la mise à jour du composant.
 
-> The first time the callback runs will be after the initial `onMount`
+> La première exécution du <span class="vo">[callback](/docs/development#callback)</span> se produit juste après l'appel du `onMount` initial.
 
-```svelte
+```sv
 <script>
 	import { afterUpdate } from 'svelte';
 
 	afterUpdate(() => {
-		console.log('the component just updated');
+		console.log("le composant vient d'être mis à jour");
 	});
 </script>
 ```
@@ -80,16 +80,16 @@ Schedules a callback to run immediately after the component has been updated.
 
 > EXPORT_SNIPPET: svelte#onDestroy
 
-Schedules a callback to run immediately before the component is unmounted.
+Planifie un <span class="vo">[callback](/docs/development#callback)</span> à exécuter immédiatement avant que le composant ne soit démonté.
 
-Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
+Parmi les <span class="vo">[callbacks](/docs/development#callback)</span> de `onMount`, `beforeUpdate`, `afterUpdate` et `onDestroy`, c'est le seul qui s'exécute dans un composant côté serveur.
 
 ```svelte
 <script>
 	import { onDestroy } from 'svelte';
 
 	onDestroy(() => {
-		console.log('the component is being destroyed');
+		console.log('le composant va être détruit');
 	});
 </script>
 ```
@@ -98,16 +98,16 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
 
 > EXPORT_SNIPPET: svelte#tick
 
-Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
+Renvoie une promesse qui se résout une fois que tous les changements d'état en attente ont été appliqués, ou dans la micro-tâche suivante s'il n'y en a pas.
 
 ```svelte
 <script>
 	import { beforeUpdate, tick } from 'svelte';
 
 	beforeUpdate(async () => {
-		console.log('the component is about to update');
+		console.log('le composant est sur le point de se mettre à jour');
 		await tick();
-		console.log('the component just updated');
+		console.log('le composant vient de se mettre à jour');
 	});
 </script>
 ```
@@ -116,9 +116,9 @@ Returns a promise that resolves once any pending state changes have been applied
 
 > EXPORT_SNIPPET: svelte#setContext
 
-Associates an arbitrary `context` object with the current component and the specified `key` and returns that object. The context is then available to children of the component (including slotted content) with `getContext`.
+Associe un objet `context` arbitraire au composant courant et à la `key` spécifiée, puis retourne cet objet. Le contexte est alors accessible pour les enfants du composant (y compris le contenu de <span class="vo">[slot](/docs/sveltejs#slot)</span>) avec `getContext`.
 
-Like lifecycle functions, this must be called during component initialisation.
+Comme les fonctions de cycle de vie, elle doit être appelée pendant l'instantiation du composant.
 
 ```svelte
 <script>
@@ -128,13 +128,13 @@ Like lifecycle functions, this must be called during component initialisation.
 </script>
 ```
 
-> Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which _will_ be reactive.
+> Le contexte n'est pas intrinsèquement réactif. Si vous avez besoin de valeurs réactives dans le contexte, alors vous pouvez passer un store dans le contexte, store qui _sera_ réactif.
 
 ## `getContext`
 
 > EXPORT_SNIPPET: svelte#getContext
 
-Retrieves the context that belongs to the closest parent component with the specified `key`. Must be called during component initialisation.
+Récupère le contexte qui appartient au composant parent le plus proche avec la `key` spécifiée. Doit être appelé pendant l'instantiation du composant.
 
 ```svelte
 <script>
@@ -148,14 +148,14 @@ Retrieves the context that belongs to the closest parent component with the spec
 
 > EXPORT_SNIPPET: svelte#hasContext
 
-Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
+Vérifie si une clé donnée a été définie dans le contexte d'un composant parent. Doit être appelé pendant l'instantiation du composant.
 
 ```svelte
 <script>
 	import { hasContext } from 'svelte';
 
 	if (hasContext('answer')) {
-		// do something
+		// faites quelque chose
 	}
 </script>
 ```
@@ -164,7 +164,7 @@ Checks whether a given `key` has been set in the context of a parent component.
 
 > EXPORT_SNIPPET: svelte#getAllContexts
 
-Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.
+Récupère l'ensemble des contextes appartenant au composant parent le plus proche. Doit être appelé pendant l'instantiation du composant. Utile, par exemple, si vous créez un composant de manière programmatique et que vous voulez lui passer le contexte existant.
 
 ```svelte
 <script>
@@ -178,9 +178,9 @@ Retrieves the whole context map that belongs to the closest parent component. Mu
 
 > EXPORT_SNIPPET: svelte#createEventDispatcher
 
-Creates an event dispatcher that can be used to dispatch [component events](/docs/component-directives#on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
+Crée un générateur d'événements qui peut être utilisé pour distribuer les [événements de composants] (/docs#template-syntaxe-component-directives-on-eventname). Les générateurs d'événements sont des fonctions qui peuvent prendre deux arguments : `name` et `detail`.
 
-Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
+Les événements de composants créés avec `createEventDispatcher` créent un [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) (en anglais). Ces événements ne suivent pas la chaîne de <span class="vo">[bubbling](/docs/javascript#bubble-capture)</span>. L'argument `detail` correspond à la propriété [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) (en anglais) et peut contenir tout type de données.
 
 ```svelte
 <script>
@@ -189,22 +189,22 @@ Component events created with `createEventDispatcher` create a [CustomEvent](htt
 	const dispatch = createEventDispatcher();
 </script>
 
-<button on:click={() => dispatch('notify', 'detail value')}>Fire Event</button>
+<button on:click="{() => dispatch('notify', 'detail value')}">Générer un événement</button>
 ```
 
-Events dispatched from child components can be listened to in their parent. Any data provided when the event was dispatched is available on the `detail` property of the event object.
+Les événements envoyés par les composants enfants peuvent être écoutés par leur parent. Toutes les données fournies lors de l'envoi de l'événement sont disponibles dans la propriété `detail` de l'objet événement.
 
 ```svelte
 <script>
 	function callbackFunction(event) {
-		console.log(`Notify fired! Detail: ${event.detail}`);
+		console.log(`Événement généré ! Détail: ${event.detail}`)
 	}
 </script>
 
-<Child on:notify={callbackFunction} />
+<Child on:notify="{callbackFunction}"/>
 ```
 
-Events can be cancelable by passing a third parameter to the dispatch function. The function returns `false` if the event is cancelled with `event.preventDefault()`, otherwise it returns `true`.
+Les événements peuvent être annulables en passant un troisième paramètre à la fonction `dispatch`. La fonction renvoie `false` si l'événement est annulé avec `event.preventDefault()`, sinon elle renvoie `true`.
 
 ```svelte
 <script>
@@ -215,15 +215,16 @@ Events can be cancelable by passing a third parameter to the dispatch function.
 	function notify() {
 		const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
 		if (shouldContinue) {
-			// no one called preventDefault
+			// personne n'a appelé preventDefault
 		} else {
-			// a listener called preventDefault
+			// un listener a appelé preventDefault
 		}
 	}
 </script>
 ```
 
-You can type the event dispatcher to define which events it can receive. This will make your code more type safe both within the component (wrong calls are flagged) and when using the component (types of the events are now narrowed). See [here](typescript#script-lang-ts-events) how to do it.
+Vous pouvez typer le générateur d'évènement pour définir quels évènements il peut recevoir. Cela rendra votre
+code plus solide à la fois dans le composant (les mauvais appels seront mis en valeur) et lorsque vous utiliserez le composant (les types d'évènements seront réduits). Voir [cette section](typescript#script-lang-ts-events) pour plus de détail.
 
 ## Types
 
diff --git a/documentation/docs/03-runtime/02-svelte-store.md b/documentation/docs/03-runtime/02-svelte-store.md
index a87a3722ec..58586c5400 100644
--- a/documentation/docs/03-runtime/02-svelte-store.md
+++ b/documentation/docs/03-runtime/02-svelte-store.md
@@ -2,64 +2,64 @@
 title: 'svelte/store'
 ---
 
-The `svelte/store` module exports functions for creating [readable](/docs/svelte-store#readable), [writable](/docs/svelte-store#writable) and [derived](/docs/svelte-store#derived) stores.
+Le module `svelte/store` exporte des fonctions pour créer des <span class="vo">[stores](/docs/sveltejs#store)</span> [de lecture (_readable_)](/docs/svelte-store#readable), [d'écriture (_writable_)](/docs/svelte-store#writable) et [dérivés (_derived_)](/docs/svelte-store#derived).
 
-Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
+Gardez à l'esprit que vous n'êtes pas _obligé•e_ d'utiliser ces fonctions pour profiter de la [syntaxe réactive `$store`](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) dans vos composants. Tout objet qui implémente correctement `.subscribe`, `unsubscribe`, et (éventuellement) `.set` est un store valide, et fonctionnera à la fois avec la syntaxe spéciale, et avec les [stores dérivés](/docs/svelte-store#derived) de Svelte.
 
-This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values) to see what a correct implementation looks like.
+Cela permet d'envelopper presque toute autre bibliothèque de gestion d'état réactif pour l'utiliser dans Svelte. Renseignez-vous sur le [contrat de store](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) pour voir à quoi ressemble une implémentation fonctionnelle.
 
 ## `writable`
 
 > EXPORT_SNIPPET: svelte/store#writable
 
-Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
+Fonction qui crée un <span class="vo">[store](/docs/sveltejs#store)</span> dont les valeurs peuvent être définies à partir de composants "extérieurs". Il est créé comme un objet avec les méthodes supplémentaires `set` et `update`.
 
-`set` is a method that takes one argument which is the value to be set. The store value gets set to the value of the argument if the store value is not already equal to it.
+`set` est une méthode qui prend un argument la valeur à définir. La valeur courante du <span class="vo">[store](/docs/sveltejs#store)</span> est remplacée par la valeur de l'argument si celle-ci n'est pas déjà égale à la valeur courante.
 
-`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
+`update` est une méthode qui prend un <span class="vo">[callback](/docs/development#callback)</span> comme seul argument. Le <span class="vo">[callback](/docs/development#callback)</span> prend la valeur existante du <span class="vo">[store](/docs/sveltejs#store)</span> comme argument et renvoie la nouvelle valeur à définir pour le <span class="vo">[store](/docs/sveltejs#store)</span>.
 
-```js
+```ts
 /// file: store.js
 import { writable } from 'svelte/store';
 
 const count = writable(0);
 
-count.subscribe((value) => {
-	console.log(value);
-}); // logs '0'
+count.subscribe(valeur => {
+	console.log(valeur);
+}); // affiche '0'.
 
-count.set(1); // logs '1'
+count.set(1); // affiche '1'.
 
-count.update((n) => n + 1); // logs '2'
+count.update(n => n + 1); // affiche '2'.
 ```
 
-If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store, and an `update` function which works like the `update` method on the store, taking a callback to calculate the store's new value from its old value. It must return a `stop` function that is called when the subscriber count goes from one to zero.
+Si une fonction est passée comme deuxième argument, elle sera appelée lorsque le nombre d'abonnés au store passera de zéro à un (mais pas de un à deux, etc.). Cette fonction a comme argument une fonction `set` qui peut changer la valeur du <span class="vo">[store](/docs/sveltejs#store)</span>. Elle doit retourner une fonction `stop` qui sera appelée lorsque le nombre d'abonnés passera de un à zéro.
 
-```js
+```ts
 /// file: store.js
 import { writable } from 'svelte/store';
 
 const count = writable(0, () => {
-	console.log('got a subscriber');
-	return () => console.log('no more subscribers');
+	console.log('vous avez un abonné');
+	return () => console.log("vous n'avez plus d'abonnés");
 });
 
-count.set(1); // does nothing
+count.set(1); // ne fait rien
 
-const unsubscribe = count.subscribe((value) => {
+const unsubscribe = count.subscribe(value => {
 	console.log(value);
-}); // logs 'got a subscriber', then '1'
+}); // affiche 'vous avez un abonné', puis '1'.
 
-unsubscribe(); // logs 'no more subscribers'
+unsubscribe(); // affiche "vous n'avez plus d'abonnés".
 ```
 
-Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
+Notez que la valeur d'un `writable` est perdue lorsqu'il est détruit, par exemple lorsque la page est rafraîchie. Cependant, vous pouvez écrire votre propre logique pour synchroniser la valeur, par exemple dans le `localStorage`.
 
 ## `readable`
 
 > EXPORT_SNIPPET: svelte/store#readable
 
-Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
+Crée un <span class="vo">[store](/docs/sveltejs#store)</span> dont la valeur ne peut pas être modifiée de l'extérieur. Le premier argument est la valeur initiale du <span class="vo">[store](/docs/sveltejs#store)</span>, le second argument est le même que le second argument de `writable`.
 
 ```ts
 import { readable } from 'svelte/store';
@@ -87,9 +87,9 @@ const ticktock = readable('tick', (set, update) => {
 
 > EXPORT_SNIPPET: svelte/store#derived
 
-Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
+Dérive un <span class="vo">[store](/docs/sveltejs#store)</span> à partir d'un ou plusieurs autres <span class="vo">[stores](/docs/sveltejs#store)</span>. Le <span class="vo">[callback](/docs/development#callback)</span> s'exécute initialement lorsque le premier abonné s'abonne, puis à chaque fois que les dépendances du <span class="vo">[store](/docs/sveltejs#store)</span> changent.
 
-In the simplest version, `derived` takes a single store, and the callback returns a derived value.
+Dans la version la plus simple, `derived` prend un seul <span class="vo">[store](/docs/sveltejs#store)</span>, et le <span class="vo">[callback](/docs/development#callback)</span> renvoie une valeur dérivée.
 
 ```ts
 // @filename: ambient.d.ts
@@ -108,9 +108,9 @@ import { derived } from 'svelte/store';
 const doubled = derived(a, ($a) => $a * 2);
 ```
 
-The callback can set a value asynchronously by accepting a second argument, `set`, and an optional third argument, `update`, calling either or both of them when appropriate.
+Le <span class="vo">[callback](/docs/development#callback)</span> peut définir une valeur de manière asynchrone en acceptant un second argument, `set`, et en l'appelant au moment opportun.
 
-In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be `undefined`.
+Dans ce cas, vous pouvez également passer un troisième argument à `derived` - la valeur initiale du <span class="vo">[store](/docs/sveltejs#store)</span> dérivé avant le premier appel de `set` ou `update`. Si aucune valeur initiale n'est fournie, la valeur initiale du <span class="vo">[store](/docs/sveltejs#store)</span> sera `undefined`.
 
 ```ts
 // @filename: ambient.d.ts
@@ -138,12 +138,12 @@ const delayed = derived(
 const delayedIncrement = derived(a, ($a, set, update) => {
 	set($a);
 	setTimeout(() => update((x) => x + 1), 1000);
-	// every time $a produces a value, this produces two
-	// values, $a immediately and then $a + 1 a second later
+	// chaque fois que $a produit une valeur, ceci va produire
+	// deux valeurs, $a immédiatement, pius $a + 1 une seconde plus tard
 });
 ```
 
-If you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.
+Si vous renvoyez une fonction à partir du <span class="vo">[callback](/docs/development#callback)</span>, elle sera appelée lorsque a) le <span class="vo">[callback](/docs/development#callback)</span> s'exécute à nouveau, ou b) le dernier abonné se désabonne.
 
 ```ts
 // @filename: ambient.d.ts
@@ -174,7 +174,7 @@ const tick = derived(
 );
 ```
 
-In both cases, an array of arguments can be passed as the first argument instead of a single store.
+Dans les deux cas, un tableau d'arguments peut être passé comme premier argument au lieu d'un seul <span class="vo">[store](/docs/sveltejs#store)</span>.
 
 ```ts
 // @filename: ambient.d.ts
@@ -203,9 +203,9 @@ const delayed = derived([a, b], ([$a, $b], set) => {
 
 > EXPORT_SNIPPET: svelte/store#readonly
 
-This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
+Cette fonction utilitaire crée un <span class="vo">[store](/docs/sveltejs#store)</span> en lecture seule (<span class="vo">[readonly](/docs/development#readonly)</span>) à partir d'un autre <span class="vo">[store](/docs/sveltejs#store)</span>. Vous pouvez toujours vous abonner aux changements du <span class="vo">[store](/docs/sveltejs#store)</span> original en utilisant le <span class="vo">[store](/docs/sveltejs#store)</span> `readonly`.
 
-```js
+```ts
 import { readonly, writable } from 'svelte/store';
 
 const writableStore = writable(1);
@@ -222,9 +222,9 @@ readableStore.set(2); // ERROR
 
 > EXPORT_SNIPPET: svelte/store#get
 
-Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
+De manière générale, il est recommandé de lire la valeur d'un <span class="vo">[store](/docs/sveltejs#store)</span> en vous y abonnant et en utilisant la valeur à mesure qu'elle change. Occasionnellement, vous pouvez avoir besoin de récupérer la valeur d'un <span class="vo">[store](/docs/sveltejs#store)</span> auquel vous n'êtes pas abonné. `get` vous permet de le faire.
 
-> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
+> Cela fonctionne en créant un abonnement, en lisant la valeur, puis en se désabonnant. Cette méthode n'est donc pas recommandée lorsque le code concerné est exécuté à haute fréquence.
 
 ```ts
 // @filename: ambient.d.ts
diff --git a/documentation/docs/03-runtime/03-svelte-motion.md b/documentation/docs/03-runtime/03-svelte-motion.md
index a0b8d95623..e8a45bb1e6 100644
--- a/documentation/docs/03-runtime/03-svelte-motion.md
+++ b/documentation/docs/03-runtime/03-svelte-motion.md
@@ -2,24 +2,24 @@
 title: 'svelte/motion'
 ---
 
-The `svelte/motion` module exports two functions, `tweened` and `spring`, for creating writable stores whose values change over time after `set` and `update`, rather than immediately.
+Le module `svelte/motion` exporte deux fonctions, `tweened` et `spring`, pour créer des <span class="vo">[stores](/docs/sveltejs#store)</span> de type `writable` dont les valeurs changent dans le temps après `set` et `update`, plutôt qu'immédiatement.
 
 ## `tweened`
 
 > EXPORT_SNIPPET: svelte/motion#tweened
 
-Tweened stores update their values over a fixed duration. The following options are available:
+Les <span class="vo">[stores](/docs/sveltejs#store)</span> `tweened` mettent à jour leur valeur sur une durée fixe. Les options suivantes sont disponibles:
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number` | `function`, default 400) — milliseconds the tween lasts
-- `easing` (`function`, default `t => t`) — an [easing function](/docs/svelte-easing)
-- `interpolate` (`function`) — see below
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number` | `function`, par défaut 400) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `t => t`) - une [fonction de lissage (`easing function`)](/docs/svelte-easing)
+* `interpolate` (`function`) - voir ci-dessous
 
-`store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
+`store.set` et `store.update` peuvent accepter un second argument `options` qui remplacera les options passées à l'instanciation.
 
-Both functions return a Promise that resolves when the tween completes. If the tween is interrupted, the promise will never resolve.
+Les deux fonctions retournent une promesse qui se résout lorsque la transition se termine. Si la transition est interrompue, la promesse ne sera jamais résolue.
 
-Out of the box, Svelte will interpolate between two numbers, two arrays or two objects (as long as the arrays and objects are the same 'shape', and their 'leaf' properties are also numbers).
+Sans que vous n'ayez rien à faire, Svelte interpolera entre deux nombres, deux tableaux ou deux objets (tant que les tableaux et les objets ont la même "forme" et que leurs propriétés "feuilles" sont également des nombres).
 
 ```svelte
 <script>
@@ -32,17 +32,17 @@ Out of the box, Svelte will interpolate between two numbers, two arrays or two o
 	});
 
 	function handleClick() {
-		// this is equivalent to size.update(n => n + 1)
+		// équivalent à size.update(n => n + 1)
 		$size += 1;
 	}
 </script>
 
 <button on:click={handleClick} style="transform: scale({$size}); transform-origin: 0 0">
-	embiggen
+	grandir
 </button>
 ```
 
-If the initial value is `undefined` or `null`, the first value change will take effect immediately. This is useful when you have tweened values that are based on props, and don't want any motion when the component first renders.
+Si la valeur initiale est `undefined` ou `null`, le premier changement de valeur prendra effet immédiatement. Ceci est utile lorsque vous avez des valeurs d'interpolation qui sont basées sur des propriétés de composant et que vous ne voulez pas qu'il y ait de mouvement lors du premier rendu du composant.
 
 ```ts
 // @filename: ambient.d.ts
@@ -65,7 +65,7 @@ const size = tweened(undefined, {
 $: $size = big ? 100 : 10;
 ```
 
-The `interpolate` option allows you to tween between _any_ arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours.
+L'option `interpolate` vous permet de faire une transition entre _n'importe quelles_ valeurs arbitraires. Cette option doit être une fonction `(a, b) => t => value`, où `a` est la valeur de départ, `b` est la valeur cible, `t` est un nombre entre 0 et 1, et `value` est le résultat. Par exemple, il est possible d'utiliser [d3-interpolate](https://github.com/d3/d3-interpolate) pour interpoler entre deux couleurs.
 
 ```svelte
 <script>
@@ -93,13 +93,13 @@ The `interpolate` option allows you to tween between _any_ arbitrary values. It
 
 > EXPORT_SNIPPET: svelte/motion#spring
 
-A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available:
+Un <span class="vo">[store](/docs/sveltejs#store)</span> de type `spring` change progressivement vers sa valeur cible en fonction de ses paramètres `stiffness` (raideur) et `damping` (amortissement). Alors que les stores `tweened` changent leur valeur sur une durée fixe, les stores `spring` changent leur valeur sur une durée qui est déterminée par leur vélocité courante, permettant un mouvement plus naturel dans de nombreuses situations. Les options suivantes sont disponibles :
 
-- `stiffness` (`number`, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring
-- `damping` (`number`, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring
-- `precision` (`number`, default `0.01`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise
+* `stiffness` (`number`, par défaut `0.15`) - une valeur entre 0 et 1, où une valeur plus grande signifie un ressort plus 'raide'.
+* `damping` (`number`, par défaut `0.8`) - une valeur entre 0 et 1, où une valeur plus basse signifie un ressort plus 'élastique'.
+* `precision` (`number`, par défaut `0.01`) - détermine le seuil à partir duquel le ressort est considéré comme 'arrêté'. Une valeur plus basse signifie un ressort plus précis.
 
-All of the options above can be changed while the spring is in motion, and will take immediate effect.
+Toutes les options ci-dessus peuvent être changées pendant que le ressort est en mouvement, et prendront effet immédiatement.
 
 ```js
 import { spring } from 'svelte/motion';
@@ -110,17 +110,17 @@ size.damping = 0.4;
 size.precision = 0.005;
 ```
 
-As with [`tweened`](/docs/svelte-motion#tweened) stores, `set` and `update` return a Promise that resolves if the spring settles.
+Comme avec les <span class="vo">[stores](/docs/sveltejs#store)</span> [`tweened`](/docs/svelte-motion#tweened), `set` et `update` retournent une promesse qui se résout lorsque le ressort s'arrête.
 
-Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`.
+Les deux méthodes `set` et `update` peuvent prendre un second argument - un objet avec les propriétés `hard` ou `soft`. `{ hard: true }` fixe immédiatement la valeur cible ; `{ soft: n }` préserve l'élan actuel pendant `n` secondes avant de s'arrêter. `{ soft: true }` est équivalent à `{ soft: 0.5 }`.
 
 ```js
 import { spring } from 'svelte/motion';
 
 const coords = spring({ x: 50, y: 50 });
-// updates the value immediately
+// change la valeur immédiatement
 coords.set({ x: 100, y: 200 }, { hard: true });
-// preserves existing momentum for 1s
+// garde l'élan actuel pendant 1s
 coords.update(
 	(target_coords, coords) => {
 		return { x: target_coords.x, y: coords.y };
@@ -129,7 +129,7 @@ coords.update(
 );
 ```
 
-[See a full example on the spring tutorial.](https://learn.svelte.dev/tutorial/springs)
+[Un exemple complet de store de type `spring` est disponible dans le tutoriel.](PUBLIC_LEARN_SITE_URL/tutorial/springs)
 
 ```svelte
 <script>
@@ -145,7 +145,7 @@ coords.update(
 </script>
 ```
 
-If the initial value is `undefined` or `null`, the first value change will take effect immediately, just as with `tweened` values (see above).
+Si la valeur initiale est `undefined` ou `null`, le premier changement de valeur prendra effet immédiatement, comme pour les valeurs `tweened` (voir ci-dessus).
 
 ```ts
 // @filename: ambient.d.ts
diff --git a/documentation/docs/03-runtime/04-svelte-transition.md b/documentation/docs/03-runtime/04-svelte-transition.md
index fe8d184e1a..d94e586777 100644
--- a/documentation/docs/03-runtime/04-svelte-transition.md
+++ b/documentation/docs/03-runtime/04-svelte-transition.md
@@ -2,7 +2,7 @@
 title: 'svelte/transition'
 ---
 
-The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs/element-directives#transition-fn).
+Le module `svelte/transition` exporte 7 fonctions : `fade`, `blur`, `fly`, `slide`, `scale`, `draw` et `crossfade`. Ces fonctions sont utilisables avec les [`transitions`](/docs/element-directives#transition-fn) Svelte.
 
 ## `fade`
 
@@ -23,15 +23,15 @@ in:fade={params}
 out:fade={params}
 ```
 
-Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.
+Anime l'opacité d'un élément de 0 jusqu'à l'opacité courante pour les transitions de type `in` et depuis l'opacité courante vers 0 pour les transitions de type `out`.
 
-`fade` accepts the following parameters:
+Les paramètres suivants peuvent être utilisés avec `fade` :
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `linear`) — une [fonction de lissage](/docs/svelte-easing)
 
-You can see the `fade` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/transition).
+Un exemple de transition de type `fade` est présenté dans le [tutoriel relatif aux transitions](PUBLIC_LEARN_SITE_URL/tutorial/transition).
 
 ```svelte
 <script>
@@ -39,7 +39,7 @@ You can see the `fade` transition in action in the [transition tutorial](https:/
 </script>
 
 {#if condition}
-	<div transition:fade={{ delay: 250, duration: 300 }}>fades in and out</div>
+	<div transition:fade={{ delay: 250, duration: 300 }}>Apparaît et disparaît en s'estompant</div>
 {/if}
 ```
 
@@ -62,15 +62,15 @@ in:blur={params}
 out:blur={params}
 ```
 
-Animates a `blur` filter alongside an element's opacity.
+Anime le filtre de flou (`blur`) en même temps que l'opacité d'un élément.
 
-`blur` accepts the following parameters:
+Les paramètres suivants peuvent être utilisés avec `blur` :
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
-- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
-- `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
+* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
+* `amount` (`number | string`, par défaut 5) - la taille du flou. Supporte les unités CSS (par exemple : `"4rem"`). L'unité par défaut est `px`.
 
 ```svelte
 <script>
@@ -78,7 +78,7 @@ Animates a `blur` filter alongside an element's opacity.
 </script>
 
 {#if condition}
-	<div transition:blur={{ amount: 10 }}>fades in and out</div>
+	<div transition:blur={{ amount: 10 }}>Apparaît et disparaît avec un flou</div>
 {/if}
 ```
 
@@ -101,19 +101,20 @@ in:fly={params}
 out:fly={params}
 ```
 
-Animates the x and y positions and the opacity of an element. `in` transitions animate from the provided values, passed as parameters to the element's default values. `out` transitions animate from the element's default values to the provided values.
+Anime les positions x, y et l'opacité d'un élément. Les transitions entrantes (`in`) permettent d'animer les propriétés depuis les valeurs spécifiées, passées en tant que paramètres, vers les valeurs par défaut. Les transitions sortantes (`out`) permettent quant à elles d'animer depuis les valeurs par défaut de l'élément vers les valeurs spécifiées.
 
-`fly` accepts the following parameters:
+Les paramètres suivants peuvent être utilisés avec `fly` :
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
-- `x` (`number | string`, default 0) - the x offset to animate out to and in from
-- `y` (`number | string`, default 0) - the y offset to animate out to and in from
-- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
+* `x` (`number | string`, par défaut 0) - décalage horizontal de l'animation
+* `y` (`number | string`, par défaut 0) - décalage vertical de l'animation
+* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
 
-x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
-You can see the `fly` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/adding-parameters-to-transitions).
+x et y utilisent `px` par défaut mais supportent les unités CSS, par exemple `x: '100vw'` ou `y: '50%'`.
+
+Un exemple de transition de type `fly` est présenté dans le [tutoriel relatif aux transitions](PUBLIC_LEARN_SITE_URL/tutorial/adding-parameters-to-transitions).
 
 ```svelte
 <script>
@@ -125,7 +126,7 @@ You can see the `fly` transition in action in the [transition tutorial](https://
 	<div
 		transition:fly={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}
 	>
-		flies in and out
+		apparaît et disparaît avec un déplacement
 	</div>
 {/if}
 ```
@@ -149,15 +150,14 @@ in:slide={params}
 out:slide={params}
 ```
 
-Slides an element in and out.
-
-`slide` accepts the following parameters:
+L'animation de type `slide` permet de faire apparaître et disparaître un élément en glissant depuis et vers le haut.
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+Les paramètres suivants peuvent être utilisés avec `slide` :
 
-* `axis` (`x` | `y`, default `y`) — the axis of motion along which the transition occurs
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
+* `axis` (`x` | `y`, par défaut `y`) — l'axe de déplacement utilisé pour la transition
 
 ```svelte
 <script>
@@ -167,7 +167,7 @@ Slides an element in and out.
 
 {#if condition}
 	<div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>
-		slides in and out horizontally
+		Apparaît et disparaît en glissant
 	</div>
 {/if}
 ```
@@ -191,15 +191,15 @@ in:scale={params}
 out:scale={params}
 ```
 
-Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
+Anime l'opacité et l'échelle d'un élément. Les transitions entrantes (`in`) s'animent à partir des valeurs fournies en paramètre vers les valeurs par défaut de l'élément, passées en paramètres. Les transitions sortantes (`out`) s'animent à partir des valeurs par défaut de l'élément vers les valeurs fournies en paramètre.
 
-`scale` accepts the following parameters:
+Les paramètres suivants peuvent être utilisés avec `scale` :
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
-- `start` (`number`, default 0) - the scale value to animate out to and in from
-- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
+* `start` (`number`, par défaut 0) - ratio d'agrandissement de l'animation
+* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
 
 ```svelte
 <script>
@@ -209,7 +209,7 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
 
 {#if condition}
 	<div transition:scale={{ duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut }}>
-		scales in and out
+		Apparaît et disparaît avec un zoom
 	</div>
 {/if}
 ```
@@ -233,16 +233,16 @@ in:draw={params}
 out:draw={params}
 ```
 
-Animates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `<path>` and `<polyline>`.
+Anime le tracé d'un élément SVG, comme un serpent dans un tube. Les transitions entrantes (`in`) commencent avec le tracé non visible et dessinent le tracé. Les transitions sortantes (`out`) commencent avec le tracé visible et l'effacent au fur et à mesure. L'animation `draw` ne fonctionne qu'avec les éléments ayant la méthode `getTotalLength`, comme `<path>` et `<polyline>`.
 
-`draw` accepts the following parameters:
+Les paramètres suivants peuvent être utilisés avec `draw` :
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `speed` (`number`, default undefined) - the speed of the animation, see below.
-- `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `speed` (`number`, par défaut undefined) - vitesse de l'animation, voir ci-dessous.
+* `duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
 
-The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
+Le paramètre de vitesse `speed` peut être utilisé à la place du paramètre durée `duration` pour spécifier la vitesse de la transition en fonction de la longueur totale du chemin. Il s'agit d'un coefficient permettant de calculer la durée de l'animation : `durée = longueur / vitesse` (`duration = length / speed`). Par exemple, un chemin qui mesure 1000 pixels de long avec une vitesse de 1 aura une durée de 1000ms. Avec une vitesse de `0.5`, l'animation aura un temps doublé. Avec une vitesse de `2`, l'animation sera deux fois plus lente.
 
 ```svelte
 <script>
@@ -268,14 +268,14 @@ The `speed` parameter is a means of setting the duration of the transition relat
 
 > EXPORT_SNIPPET: svelte/transition#crossfade
 
-The `crossfade` function creates a pair of [transitions](/docs/element-directives#transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+La fonction de fondu croisé `crossfade` crée deux [transitions](/docs/element-directives#transition-fn) appelées `send` et `receive`. Quand un élément est "envoyé", Svelte cherche un élément correspondant "reçu" et génère une transition qui déplace l'élément vers la position de sa contrepartie en le faisant disparaître. Quand un élément est "reçu", l'inverse s'applique. S'il n'y a pas d'élément reçu, la transition par défaut `fallback` s'applique.
 
-`crossfade` accepts the following parameters:
+Les paramètres suivants peuvent être utilisés avec `crossfade` :
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
-- `fallback` (`function`) — A fallback [transition](/docs/element-directives#transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
+* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
+* `fallback` (`function`) — une [transition](/docs/element-directives#transition-fn) de secours à utiliser lorsqu'il n'y a pas d'élément "reçu" correspondant.
 
 ```svelte
 <script>
@@ -289,9 +289,9 @@ The `crossfade` function creates a pair of [transitions](/docs/element-directive
 </script>
 
 {#if condition}
-	<h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
+	<h1 in:send={{ key }} out:receive={{ key }}>GROS ELEMENT</h1>
 {:else}
-	<small in:send={{ key }} out:receive={{ key }}>small elem</small>
+	<small in:send={{ key }} out:receive={{ key }}>petit élément</small>
 {/if}
 ```
 
diff --git a/documentation/docs/03-runtime/05-svelte-animate.md b/documentation/docs/03-runtime/05-svelte-animate.md
index 44be6d448b..dba98c3370 100644
--- a/documentation/docs/03-runtime/05-svelte-animate.md
+++ b/documentation/docs/03-runtime/05-svelte-animate.md
@@ -2,7 +2,7 @@
 title: 'svelte/animate'
 ---
 
-The `svelte/animate` module exports one function for use with Svelte [animations](/docs/element-directives#animate-fn).
+Le module `svelte/animate` exporte une fonction à utiliser avec les [animations](/docs/element-directives#animate-fn) Svelte.
 
 ## `flip`
 
@@ -13,20 +13,21 @@ The `svelte/animate` module exports one function for use with Svelte [animations
 animate:flip={params}
 ```
 
-The `flip` function calculates the start and end position of an element and animates between them, translating the `x` and `y` values. `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).
+La méthode `flip` calcule la position de départ et d'arrivée d'un élément et génère une animation de translation des coordonnées `x` et `y`. Le mot `flip` est l'acronyme de [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/) (en anglais).
 
-`flip` accepts the following parameters:
+Les paramètres suivants peuvent être utilisés avec `flip` :
 
-- `delay` (`number`, default 0) — milliseconds before starting
-- `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
+* `duration` (`number` | `function`, par défaut `d => Math.sqrt(d) * 120`) - voir ci-dessous
+* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
 
-`duration` can be provided as either:
 
-- a `number`, in milliseconds.
-- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.
+Le paramètre de durée `duration` peut être:
 
-You can see a full example on the [animations tutorial](https://learn.svelte.dev/tutorial/animate).
+- soit un nombre, en millisecondes.
+- une fonction, `distance: number => duration: number`, dont le paramètre correspond à la distance que l'élément va parcourir en pixels et qui retourne la durée en millisecondes. Cela permet de définir une durée, relative à la distance parcourue de l'élément.
+
+Un exemple complet est présenté dans le [tutoriel relatif aux animations](PUBLIC_LEARN_SITE_URL/tutorial/animate).
 
 ```svelte
 <script>
diff --git a/documentation/docs/03-runtime/06-svelte-easing.md b/documentation/docs/03-runtime/06-svelte-easing.md
index f98d4001f0..bcc46f9c6e 100644
--- a/documentation/docs/03-runtime/06-svelte-easing.md
+++ b/documentation/docs/03-runtime/06-svelte-easing.md
@@ -2,22 +2,23 @@
 title: 'svelte/easing'
 ---
 
-Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
+Les fonctions de lissage permettent de configurer la vitesse de transitions ou d'animations. Elles peuvent également être utilisées avec les <span class="vo">[stores](/docs/sveltejs#store)</span> [`tweened`](/docs/svelte-motion#tweened) et [`spring`](/docs/svelte-motion#spring). `svelte/easing` exporte 31 utilitaires, une fonction de lissage linéaire (`linear`), et 3 variantes de 10 différentes fonctions de lissage : `in`, `out` et `inOut`.
 
-You can explore the various eases using the [ease visualiser](/examples/easing) in the [examples section](/examples).
+Un exemple de chaque méthode est présenté dans le [démonstrateur des fonctions de lissage](/examples/easing) ainsi que dans la section d'[exemples](/examples).
 
-| ease        | in          | out          | inOut          |
-| ----------- | ----------- | ------------ | -------------- |
-| **back**    | `backIn`    | `backOut`    | `backInOut`    |
-| **bounce**  | `bounceIn`  | `bounceOut`  | `bounceInOut`  |
-| **circ**    | `circIn`    | `circOut`    | `circInOut`    |
-| **cubic**   | `cubicIn`   | `cubicOut`   | `cubicInOut`   |
+
+| ease | in | out | inOut |
+| --- | --- | --- | --- |
+| **back** | `backIn` | `backOut` | `backInOut` |
+| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` |
+| **circ** | `circIn` | `circOut` | `circInOut` |
+| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` |
 | **elastic** | `elasticIn` | `elasticOut` | `elasticInOut` |
-| **expo**    | `expoIn`    | `expoOut`    | `expoInOut`    |
-| **quad**    | `quadIn`    | `quadOut`    | `quadInOut`    |
-| **quart**   | `quartIn`   | `quartOut`   | `quartInOut`   |
-| **quint**   | `quintIn`   | `quintOut`   | `quintInOut`   |
-| **sine**    | `sineIn`    | `sineOut`    | `sineInOut`    |
+| **expo** | `expoIn` | `expoOut` | `expoInOut` |
+| **quad** | `quadIn` | `quadOut` | `quadInOut` |
+| **quart** | `quartIn` | `quartOut` | `quartInOut` |
+| **quint** | `quintIn` | `quintOut` | `quintInOut` |
+| **sine** | `sineIn` | `sineOut` | `sineInOut` |
 
 <!-- TODO -->
 
diff --git a/documentation/docs/03-runtime/07-svelte-action.md b/documentation/docs/03-runtime/07-svelte-action.md
index ebd4185774..76f8def89e 100644
--- a/documentation/docs/03-runtime/07-svelte-action.md
+++ b/documentation/docs/03-runtime/07-svelte-action.md
@@ -2,17 +2,17 @@
 title: svelte/action
 ---
 
-Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
+Les actions sont des fonctions exécutées lorsqu'un élément est créé. Elles peuvent renvoyer un objet avec une méthode `destroy` qui sera appelée lors de la destruction de l'élément.
 
 ```svelte
 <script>
 	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
-		// the node has been mounted in the DOM
+		// le noeud a été ajouté au DOM
 
 		return {
 			destroy() {
-				// the node has been removed from the DOM
+				// le noeud a été supprimé du DOM
 			}
 		};
 	}
@@ -21,9 +21,9 @@ Actions are functions that are called when an element is created. They can retur
 <div use:foo />
 ```
 
-An action can have a parameter. If the returned value has an `update` method, it will be called immediately after Svelte has applied updates to the markup whenever that parameter changes.
+Une action peut avoir un argument. Si la valeur renvoyée possède une méthode `update`, celle-ci sera exécutée à chaque fois que cet argument changera, juste après que Svelte a appliqué les modifications au <span class="vo">[markup](/docs/web#markup)</span>.
 
-> Don't worry that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
+> Ne vous inquiétez pas du fait que l'on redéclare la fonction `foo` pour chaque instance — Svelte garde en mémoire toute fonction qui ne dépend pas d'un état local en dehors de la définition du composant.
 
 ```svelte
 <script>
@@ -32,15 +32,15 @@ An action can have a parameter. If the returned value has an `update` method, it
 
 	/** @type {import('svelte/action').Action<HTMLElement, string>}  */
 	function foo(node, bar) {
-		// the node has been mounted in the DOM
+		// le noeud a été ajouté au DOM
 
 		return {
 			update(bar) {
-				// the value of `bar` has changed
+				// la valeur de `bar` a changé
 			},
 
 			destroy() {
-				// the node has been removed from the DOM
+				// le noeud a été supprimé du DOM
 			}
 		};
 	}
@@ -51,6 +51,8 @@ An action can have a parameter. If the returned value has an `update` method, it
 
 ## Attributes
 
+Les actions émettent parfois des évènements ou appliquent des attributs personnalisés à l'élément sur lequel elles sont utilisées. Pour gérer cela, les actions typées avec `Action` ou `ActionReturn` peuvent avoir un dernier paramètres, `Attributes` :
+
 Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with `Action` or `ActionReturn` type can have a last parameter, `Attributes`:
 
 ```svelte
@@ -59,14 +61,14 @@ Sometimes actions emit custom events and apply custom attributes to the element
 	 * @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}
 	 */
 	function foo(node, { prop }) {
-		// the node has been mounted in the DOM
+		// le noeud a été ajouté au DOM
 
-		//...LOGIC
+		//...LOGIQUE
 		node.dispatchEvent(new CustomEvent('emit', { detail: 'hello' }));
 
 		return {
 			destroy() {
-				// the node has been removed from the DOM
+				// le noeud a été supprimé du DOM
 			}
 		};
 	}
diff --git a/documentation/docs/04-compiler-and-api/01-svelte-compiler.md b/documentation/docs/04-compiler-and-api/01-svelte-compiler.md
index 014a2617a3..a1b912eadb 100644
--- a/documentation/docs/04-compiler-and-api/01-svelte-compiler.md
+++ b/documentation/docs/04-compiler-and-api/01-svelte-compiler.md
@@ -2,15 +2,15 @@
 title: 'svelte/compiler'
 ---
 
-Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/tools/#bundling) for additional tools like Rollup and Webpack.
+En général, vous n'interagirez pas directement avec le compilateur Svelte, mais vous l'intègrerez plutôt dans un processus de <span class="vo">[build](/docs/development#build)</span> à travers un <span class="vo">[plugin](/docs/development#plugin)</span> de <span class="vo">[bundler](/docs/web#bundler-packager)</span>. Le plugin que l'équipe Svelte recommande et avec lequel elle travaille est [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). Le <span class="vo">[framework](/docs/web#framework)</span> [SvelteKit](PUBLIC_KIT_SITE_URL/) fournit une configuration de `vite-plugin-svelte` qui permet de compiler des applications et de <span class="vo">[packager](/docs/web#bundler-packager)</span> des [librairies de composants Svelte](PUBLIC_KIT_SITE_URL/docs/packaging). Svelte Society maintient des [plugins](https://sveltesociety.dev/tools/#bundling) pour d'autres bundlers (notamment Rollup et Webpack).
 
-Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
+Néanmoins, il est utile de comprendre comment utiliser le compilateur, puisque les plugins exposent généralement des options.
 
 ## compile
 
 > EXPORT_SNIPPET: svelte/compiler#compile
 
-This is where the magic happens. `svelte.compile` takes your component source code, and turns it into a JavaScript module that exports a class.
+C'est ici que la magie opère. `svelte.compile` convertit le code source des composants en module JavaScript qui exporte des classes.
 
 ```js
 // @filename: ambient.d.ts
@@ -29,9 +29,9 @@ const result = compile(source, {
 });
 ```
 
-Refer to [CompileOptions](#types-compileoptions) for all the available options.
+Référez-vous à la section [CompilerOptions](#types-compileoptions) pour voir les options disponibles.
 
-The returned `result` object contains the code for your component, along with useful bits of metadata.
+L'objet retourné `result` contient le code du composant, ainsi que des métadonnées utiles.
 
 ```ts
 // @filename: ambient.d.ts
@@ -47,13 +47,13 @@ import { compile } from 'svelte/compiler';
 const { js, css, ast, warnings, vars, stats } = compile(source);
 ```
 
-Refer to [CompileResult](#types-compileresult) for a full description of the compile result.
+Référez-vous à la section [CompilerResult](#types-compileresult) pour une description du résultat compilé.
 
 ## parse
 
 > EXPORT_SNIPPET: svelte/compiler#parse
 
-The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
+La méthode `parse` convertit un composant pour retourner son arbre de la syntaxe abstraite (<span class="vo">[AST](/docs/development#ast)</span>). Contrairement à la compilation avec l'option `generate: false`, aucune validation ni analyse n'est effectuée. Notez que l'AST n'est pas considéré comme une <span class="vo">[API](/docs/development#api)</span> publique ; des changements critiques pourraient survenir à n'importe quel moment.
 
 ```js
 // @filename: ambient.d.ts
@@ -74,21 +74,22 @@ const ast = parse(source, { filename: 'App.svelte' });
 
 > EXPORT_SNIPPET: svelte/compiler#preprocess
 
-A number of [official and community-maintained preprocessing plugins](https://sveltesociety.dev/tools#preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
+Un certain nombre de [plugins de pré-processeur maintenus par la communauté](https://sveltesociety.dev/tools#preprocessors) est disponible pour vous permettre d'utiliser Svelte avec des outils comme TypeScript, PostCSS, SCSS, et Less.
 
-You can write your own preprocessor using the `svelte.preprocess` API.
+Vous pouvez écrire votre propre pré-processeur en utilisant l'<span class="vo">[API](/docs/development#api)</span> `svelte.
 
-The `preprocess` function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a `<style lang="sass">` block into vanilla CSS.
+La fonction `preprocess` fournit des <span class="vo">[framework](/docs/web#framework)</span> pour transformer le code source d'un composant selon vos besoins. Par exemple, elle peut convertir un bloc `<style lang="sass">` en css natif.
 
-The first argument is the component source code. The second is an array of _preprocessors_ (or a single preprocessor, if you only have one), where a preprocessor is an object with a `name` which is required, and `markup`, `script` and `style` functions, each of which is optional.
+Le premier argument est le code source du composant lui-même. Le second argument est un tableau de _pré-processeurs_ (ou éventuellement un seul pré-processeur si vous n'en avez qu'un). Un pré-processeur est un objet contenant trois fonctions : `markup`, `script` et `style`, toutes optionnelles.
 
-The `markup` function receives the entire component source text, along with the component's `filename` if it was specified in the third argument.
+La fonction `markup` reçoit en argument le <span class="vo">[markup](/docs/web#markup)</span> du composant, et le nom du composant `filename` s'il était spécifié comme troisième argument.
 
-The `script` and `style` functions receive the contents of `<script>` and `<style>` elements respectively (`content`) as well as the entire component source text (`markup`). In addition to `filename`, they get an object of the element's attributes.
+Les fonctions `script` et `style` reçoivent le contenu des blocs `<script>` et `<style>` respectivement (`content`) ainsi que toute la source textuelle (`markup`) du composant. En plus du nom du fichier `filename`, elles reçoivent un objet contenant les attributs de l'élément.
 
-Each `markup`, `script` or `style` function must return an object (or a Promise that resolves to an object) with a `code` property, representing the transformed source code. Optionally they can return an array of `dependencies` which represents files to watch for changes, and a `map` object which is a sourcemap mapping back the transformation to the original code. `script` and `style` preprocessors can optionally return a record of attributes which represent the updated attributes on the script/style tag.
+Chaque fonction `markup`, `script` et `style` doit retourner un objet (ou une Promesse qui résout un objet) contenant un attribut `code`, représentant le code source transformé. Ces fonctions peuvent aussi renvoyer un tableau facultatif de dépendances `dependencies` qui représente les fichiers dont les changements sont à surveiller, ainsi qu'un objet `map` qui est une <span class="vo">[sourcemap](/docs/web#sourcemap)</span> renvoyant la transformation vers le code d'origine.
+Les pré-processeurs `script` et `style` peuvent de manière optionnelle renvoyer un ensemble d'attributs qui représentent les attributs mis à jour sur les balises `<script>`/`<style>`.
 
-> Preprocessor functions should return a `map` object whenever possible or else debugging becomes harder as stack traces can't link to the original code correctly.
+> Les fonctions de <span class="vo">[preprocessing](/docs/web#preprocessing)</span> doivent également retourner un objet `map` en plus de `code` et `dependencies`, où `map` correspond à la <span class="vo">[sourcemap](/docs/web#sourcemap)</span> de la transformation.
 
 ```ts
 // @filename: ambient.d.ts
@@ -125,7 +126,7 @@ const { code } = await preprocess(
 );
 ```
 
-If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) and [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
+Si un tableau de dépendances `dependencies` est retourné, il sera inclus dans l'objet retourné. Ce tableau est utilisé par des librairies comme [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) pour surveiller les changements dans les fichiers, par exemple si un bloc `<style>` contient un import de type `@import`.
 
 ```ts
 /// file: preprocess-sass.js
@@ -150,14 +151,14 @@ const { code } = await preprocess(
 	{
 		name: 'my-fancy-preprocessor',
 		markup: ({ content, filename }) => {
-			// Return code as is when no foo string present
+			// renvoie le code tel quel quand aucune string foo n'est présente
 			const pos = content.indexOf('foo');
 			if (pos < 0) {
 				return;
 			}
 
-			// Replace foo with bar using MagicString which provides
-			// a source map along with the changed code
+			// Remplace foo par bar en utilisant MagicString qui fournit
+			// une sourcemap en plus du code modifié
 			const s = new MagicString(content, { filename });
 			s.overwrite(pos, pos + 3, 'bar', { storeName: true });
 
@@ -167,7 +168,7 @@ const { code } = await preprocess(
 			};
 		},
 		style: async ({ content, attributes, filename }) => {
-			// only process <style lang="sass">
+			// traite uniquement <style lang="sass">
 			if (attributes.lang !== 'sass') return;
 
 			const { css, stats } = await new Promise((resolve, reject) =>
@@ -184,7 +185,7 @@ const { code } = await preprocess(
 				)
 			);
 
-			// remove lang attribute from style tag
+			// supprime l'attribut lang de la balise <style>
 			delete attributes.lang;
 
 			return {
@@ -200,9 +201,9 @@ const { code } = await preprocess(
 );
 ```
 
-Multiple preprocessors can be used together. The output of the first becomes the input to the second. Within one preprocessor, `markup` runs first, then `script` and `style`.
+Plusieurs pré-processeurs peuvent être utilisés ensemble. La sortie du premier devient l'argument du second. Les fonctions sont exécutées dans l'ordre suivant : `markup`, `script` puis `style`.
 
-> In Svelte 3, all `markup` functions ran first, then all `script` and then all `style` preprocessors. This order was changed in Svelte 4.
+> En Svelte 3, toutes les fonctions `markup` étaient exécutées en premier, puis toutes les fonctions `script` et enfin toutes les fonctions `style`. Cet ordre a été changé dans Svelte 4.
 
 ```js
 /// file: multiple-preprocessor.js
@@ -220,27 +221,27 @@ import { preprocess } from 'svelte/compiler';
 
 const { code } = await preprocess(source, [
 	{
-		name: 'first preprocessor',
+		name: 'premier pré-processeur',
 		markup: () => {
-			console.log('this runs first');
+			console.log('ceci est éxécuté en premier');
 		},
 		script: () => {
-			console.log('this runs second');
+			console.log('ça en second');
 		},
 		style: () => {
-			console.log('this runs third');
+			console.log('ça en troisième');
 		}
 	},
 	{
-		name: 'second preprocessor',
+		name: 'second pré-processeur',
 		markup: () => {
-			console.log('this runs fourth');
+			console.log('ça en quatrième');
 		},
 		script: () => {
-			console.log('this runs fifth');
+			console.log('ça en cinquième');
 		},
 		style: () => {
-			console.log('this runs sixth');
+			console.log('ça en sixième');
 		}
 	}
 ], {
@@ -252,18 +253,18 @@ const { code } = await preprocess(source, [
 
 > EXPORT_SNIPPET: svelte/compiler#walk
 
-The `walk` function provides a way to walk the abstract syntax trees generated by the parser, using the compiler's own built-in instance of [estree-walker](https://github.com/Rich-Harris/estree-walker).
+La fonction `walk` fournit un un moyen de parcourir les arbres <span class="vo">[AST](/docs/development#ast)</span> générés par le <span class="vo">[parser](/docs/development#parser)</span>, en utilisant l'utilitaire [estree-walker](https://github.com/Rich-Harris/estree-walker) du compilateur.
 
-The walker takes an abstract syntax tree to walk and an object with two optional methods: `enter` and `leave`. For each node, `enter` is called (if present). Then, unless `this.skip()` is called during `enter`, each of the children are traversed, and then `leave` is called on the node.
+La fonction prend comme argument l'arbre <span class="vo">[AST](/docs/development#ast)</span> à traiter et un objet contenant 2 méthodes facultatives : `enter` et `leave`. `enter` est appelée pour chaque noeud (si la méthode est définie). Puis, à moins que `this.skip()` n'ait été appelée lors de l'exécution de `enter`, chaque enfant est également traversé. Enfin, la méthode `leave` est appelée pour le noeud actuel.
 
 ```js
 /// file: compiler-walk.js
 // @filename: ambient.d.ts
 declare global {
 	var ast: import('estree').Node;
-	function do_something(node: import('estree').Node): void;
-	function do_something_else(node: import('estree').Node): void;
-	function should_skip_children(node: import('estree').Node): boolean;
+	function faire_quelque_chose(node: import('estree').Node): void;
+	function faire_autre_chose(node: import('estree').Node): void;
+	function doit_ignorer_les_enfants(node: import('estree').Node): boolean;
 }
 
 export {};
@@ -275,13 +276,13 @@ import { walk } from 'svelte/compiler';
 
 walk(ast, {
 	enter(node, parent, prop, index) {
-		do_something(node);
-		if (should_skip_children(node)) {
+		faire_quelque_chose(node);
+		if (doit_ignorer_les_enfants(node)) {
 			this.skip();
 		}
 	},
 	leave(node, parent, prop, index) {
-		do_something_else(node);
+		faire_autre_chose(node);
 	}
 });
 ```
@@ -290,11 +291,11 @@ walk(ast, {
 
 > EXPORT_SNIPPET: svelte/compiler#VERSION
 
-The current version, as set in package.json.
+La version actuelle, définie dans le fichier `package.json`.
 
 ```js
 import { VERSION } from 'svelte/compiler';
-console.log(`running svelte version ${VERSION}`);
+console.log(`la version ${VERSION} de Svelte est en cours d'exécution`);
 ```
 
 ## Types
diff --git a/documentation/docs/04-compiler-and-api/02-client-side-component-api.md b/documentation/docs/04-compiler-and-api/02-client-side-component-api.md
index 93856cf010..c8fad70fc3 100644
--- a/documentation/docs/04-compiler-and-api/02-client-side-component-api.md
+++ b/documentation/docs/04-compiler-and-api/02-client-side-component-api.md
@@ -1,8 +1,8 @@
 ---
-title: 'Client-side component API'
+title: 'API de composant client-side'
 ---
 
-## Creating a component
+## Créer un composant
 
 ```ts
 // @errors: 2554
@@ -20,7 +20,7 @@ declare global {
 const component = new Component(options);
 ```
 
-A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.
+Un composant <span class="vo">[client-side](/docs/web#client-side-rendering)</span> est une classe JavaScript correspondant à un composant compilé avec l'option `generate: 'dom'` (ou avec l'option `generate` non spécifiée).
 
 ```ts
 // @errors: 2554
@@ -40,31 +40,31 @@ import App from './App.svelte';
 const app = new App({
 	target: document.body,
 	props: {
-		// assuming App.svelte contains something like
+		// en supposant que App.svelte contienne :
 		// `export let answer`:
 		answer: 42
 	}
 });
 ```
 
-The following initialisation options can be provided:
+Les options d'initialisation suivantes peuvent être utilisées :
 
-| option    | default     | description                                                                                          |
-| --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
-| `target`  | **none**    | An `HTMLElement` or `ShadowRoot` to render to. This option is required                               |
-| `anchor`  | `null`      | A child of `target` to render the component immediately before                                       |
-| `props`   | `{}`        | An object of properties to supply to the component                                                   |
-| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component                             |
-| `hydrate` | `false`     | See below                                                                                            |
-| `intro`   | `false`     | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes |
+| option | défaut | description |
+| --- | --- | --- |
+| `target` | **none** | Un élément `HTMLElement` ou `ShadowRoot` sur lequel rendre le composant. Cette option est obligatoire
+| `anchor` | `null` | Un enfant de la cible `target` à rendre juste avant le composant
+| `props` | `{}` | Des propriétés avec lesquelles le composant sera initialisé
+| `context` | `new Map()` | Une `Map` de paires clé-valeur de contexte à fournir au composant
+| `hydrate` | `false` | Voir plus bas
+| `intro` | `false` | Si `true`, jouera les transitions au premier rendu, plutôt que d'attendre de futurs changements d'état
 
-Existing children of `target` are left where they are.
+Les enfants existants de la cible `target` ne sont pas affectés.
 
-The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
+L'option d'hydratation `hydrate` indique à Svelte de mettre à jour le <span class="vo">[DOM](/docs/web#dom)</span> existant (habituellement à partir du <span class="vo">[SSR](/docs/web/#ssr)</span>) plutôt que de créer de nouveaux éléments. Cela ne fonctionnera que si le composant a été compilé avec l'option [`hydratable: true`](/docs/svelte-compiler#compile). L'hydratation de la section `<head>` ne fonctionnera que si le code généré côté serveur a également été compilé avec l'option `hydratable: true`. Cette option a pour effet d'identifier chaque élément à l'intérieur de la section `<head>` de telle sorte que le composant sache quels éléments il peut supprimer pendant l'hydratation.
 
-Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
+Alors que les enfants de la cible `target` ne sont normalement pas modifiés, l'option `hydrate: true` causera leur suppression. Pour cette raison, l'option `anchor` ne peut pas être utilisée en même temps que `hydrate: true`.
 
-The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.
+Le <span class="vo">[DOM](/docs/web#dom)</span> existant n'a pas besoin de correspondre au composant, Svelte "réparera" le DOM au fur et à mesure.
 
 ```ts
 /// file: index.js
@@ -106,9 +106,9 @@ export {};
 component.$set(props);
 ```
 
-Programmatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `<script>` block.
+`$set` définit programmatiquement les <span class="vo">[props](/docs/sveltejs#props)</span> d'une instance de composant. `component.$set({ x: 1 })` est équivalent à `x = 1` à l'intérieur de la balise `<script>` du composant.
 
-Calling this method schedules an update for the next microtask — the DOM is _not_ updated synchronously.
+L'appel de cette méthode déclenchera une mise à jour à la prochaine micro-tâche — le <span class="vo">[DOM](/docs/web#dom)</span> _n'est pas_ mis à jour de manière synchrone.
 
 ```ts
 // @filename: ambient.d.ts
@@ -146,9 +146,9 @@ export {};
 component.$on(ev, callback);
 ```
 
-Causes the `callback` function to be called whenever the component dispatches an `event`.
+`$on` enregistre un <span class="vo">[callback](/docs/development#callback)</span> qui sera appelé à chaque génération d'un évènement de type `event`.
 
-A function is returned that will remove the event listener when called.
+`$on` retourne une fonction dont l'exécution permet de supprimer l'écoute de cet événement.
 
 ```ts
 /// file: index.js
@@ -189,9 +189,9 @@ export {}
 component.$destroy();
 ```
 
-Removes a component from the DOM and triggers any `onDestroy` handlers.
+Retire un composant du <span class="vo">[DOM](/docs/web#dom)</span> et déclenche les <span class="vo">[callbacks](/docs/development#callback)</span> de type `onDestroy` associés.
 
-## Component props
+## Props de composant
 
 ```js
 // @filename: ambient.d.ts
@@ -228,9 +228,9 @@ export {}
 component.prop = value;
 ```
 
-If a component is compiled with `accessors: true`, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a _synchronous_ update, rather than the default async update caused by `component.$set(...)`.
+Si un composant est compilé avec l'option `accessors: true`, chaque instance sera générée avec des <span class="vo">[getters et setters](/docs/development#getter-setter)</span> correspondant à chacune de ses <span class="vo">[props](/docs/sveltejs#props)</span>. Mettre à jour une des props déclenchera une mise à jour _synchrone_. Ce comportement est différent de la mise à jour asynchrone déclenchée par l'appel `component.$set(...)`.
 
-By default, `accessors` is `false`, unless you're compiling as a custom element.
+Par défaut, `accessors` est initialisé à `false`, à moins que vous ne compiliez un [web component](/docs/custom-elements-api).
 
 ```js
 /// file: index.js
diff --git a/documentation/docs/04-compiler-and-api/03-server-side-component-api.md b/documentation/docs/04-compiler-and-api/03-server-side-component-api.md
index 0b25ce3380..a2f8402ac9 100644
--- a/documentation/docs/04-compiler-and-api/03-server-side-component-api.md
+++ b/documentation/docs/04-compiler-and-api/03-server-side-component-api.md
@@ -1,5 +1,5 @@
 ---
-title: 'Server-side component API'
+title: 'API de composant server-side'
 ---
 
 ```js
@@ -7,11 +7,11 @@ title: 'Server-side component API'
 const result = Component.render(...)
 ```
 
-Unlike client-side components, server-side components don't have a lifespan after you render them — their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.
+À la différence des composants <span class="vo">[client-side](/docs/web#client-side-rendering)</span>, les composants <span class="vo">[server-side](/docs/web#server-side-rendering)</span> n'ont pas d'existence après que vous les ayez rendus — leur seul et unique rôle est de créer du HTML et du CSS. Pour cette raison, leur <span class="vo">[API](/docs/development#api)</span> est un peu différente.
 
-A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
+Un composant <span class="vo">[server-side](/docs/web#server-side-rendering)</span> expose une méthode `render` qui peut être appelée avec des <span class="vo">[props](/docs/sveltejs#props)</span> optionnelles. Cette méthode renvoie un objet avec des champs `head`, `html` et `css`, où `head` représente le contenu de tout élément `<svelte:head>` rencontré.
 
-You can import a Svelte component directly into Node using [`svelte/register`](/docs/svelte-register).
+Vous pouvez importer un composant Svelte directement dans Node en utilisant [`svelte/register`](/docs/svelte-register).
 
 ```js
 // @noErrors
@@ -24,18 +24,18 @@ const { head, html, css } = App.render({
 });
 ```
 
-The `.render()` method accepts the following parameters:
+La méthode `.render()` accepte les paramètres suivants :
 
-| parameter | default | description                                        |
+| paramètre | défaut | description                                        |
 | --------- | ------- | -------------------------------------------------- |
-| `props`   | `{}`    | An object of properties to supply to the component |
-| `options` | `{}`    | An object of options                               |
+| `props`   | `{}`    | Un objet de <span class="vo">[props](/docs/sveltejs#props)</span> à fournir au composant |
+| `options` | `{}`    | Un objet d'options                               |
 
-The `options` object takes in the following options:
+L'objet `options` accepte les champs suivants :
 
-| option    | default     | description                                                              |
+| option    | défaut     | description                                                              |
 | --------- | ----------- | ------------------------------------------------------------------------ |
-| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component |
+| `context` | `new Map()` | Une `Map` de paires clé-valeur de contexte à fournir au composant |
 
 ```js
 // @noErrors
diff --git a/documentation/docs/04-compiler-and-api/04-custom-elements-api.md b/documentation/docs/04-compiler-and-api/04-custom-elements-api.md
index 2227ae83c2..9abeea0e51 100644
--- a/documentation/docs/04-compiler-and-api/04-custom-elements-api.md
+++ b/documentation/docs/04-compiler-and-api/04-custom-elements-api.md
@@ -1,82 +1,81 @@
 ---
-title: 'Custom elements API'
+title: 'API de web component'
 ---
 
-Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs/special-elements#svelte-options).
+Les composants Svelte peuvent également être compilés en [web components (ou "custom elements")](/docs/web#web-component) en utilisant l'option `customElement: true`. Il est recommandé de spécifier un nom de balise pour le composant en utilisant la balise [`<svelte:options>`](/docs/special-elements#svelte-options) et l'attribut `customElement`.
 
 ```svelte
 <svelte:options customElement="my-element" />
 
-<!-- in Svelte 3, do this instead:
+<!-- en Svelte 3, faire plutôt ceci :
 <svelte:options tag="my-element" />
 -->
 
 <script>
-	export let name = 'world';
+	export let name = 'tout le monde';
 </script>
 
-<h1>Hello {name}!</h1>
+<h1>Bonjour {name} !</h1>
 <slot />
 ```
 
-You can leave out the tag name for any of your inner components which you don't want to expose and use them like regular Svelte components. Consumers of the component can still name it afterwards if needed, using the static `element` property which contains the custom element constructor and which is available when the `customElement` compiler option is `true`.
+Vous pouvez ignorer le nom de balise pour tout composant imbriqué que vous ne voulez pas exposer et les utiliser plutôt comme des composants Svelte normaux. Il sera toujours possible de nommer ce composant au moment de son instanciation si besoin, en utilisant la <span class="vo">[props](/docs/sveltejs#props)</span> statique `element` qui contient le constructeur de <span class="vo">[web component](/docs/web#web-component)</span> et qui est disponible lorsque l'option de compilateur `customElement` est à `true`.
 
 ```js
 // @noErrors
 import MyElement from './MyElement.svelte';
 
 customElements.define('my-element', MyElement.element);
-// In Svelte 3, do this instead:
+// en Svelte 3, faire plutôt ceci :
 // customElements.define('my-element', MyElement);
 ```
 
-Once a custom element has been defined, it can be used as a regular DOM element:
+Une fois qu'un <span class="vo">[web component](/docs/web#web-component)</span> a été défini, il peut être utilisé comme un élément du <span class="vo">[DOM](/docs/web#dom)</span> classique :
 
 ```js
 document.body.innerHTML = `
 	<my-element>
-		<p>This is some slotted content</p>
+		<p>Ceci est du contenu enfant</p>
 	</my-element>
 `;
 ```
 
-By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs/basic-markup#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
+Par défaut, les <span class="vo">[web components](/docs/web#web-component)</span> sont compilés avec l'option `accessors: true`, qui indique que n'importe quelle [props](/docs/basic-markup#attributs-et-props) sera exposée comme propriété de l'élément <span class="vo">[DOM](/docs/web#dom)</span> (et sera traitée comme un attribut modifiable lorsque ce sera possible).
 
-To prevent this, add `accessors={false}` to `<svelte:options>`.
+Pour empêcher ce comportement, vous pouvez ajouter l'option `accessors={false}` à la balise `<svelte:options>`.
 
 ```js
 // @noErrors
 const el = document.querySelector('my-element');
 
-// get the current value of the 'name' prop
+// affiche la valeur courante de la propriété 'name'
 console.log(el.name);
 
-// set a new value, updating the shadow DOM
+// met à jour une nouvelle valeur, mettant à jour le shadow DOM
 el.name = 'everybody';
 ```
 
-## Component lifecycle
+## Cycle de vie du web component
 
-Custom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custom element. The custom element wrapper takes care of handling its lifecycle appropriately.
+Les <span class="vo">[web component](/docs/web#web-component)</span> sont créés à partir de composants Svelte en utilisant une approche de <span class="vo">[wrapper](/docs/development#wrapper)</span>. Cela signifie que le composant Svelte imbriqué n'a aucune conscience qu'il est au sein d'un <span class="vo">[web component](/docs/web#web-component)</span>. Le web component englobant prend lui-même en charge la gestion du cycle de vie.
 
-When a custom element is created, the Svelte component it wraps is _not_ created right away. It is only created in the next tick after the `connectedCallback` is invoked. Properties assigned to the custom element before it is inserted into the DOM are temporarily saved and then set on component creation, so their values are not lost. The same does not work for invoking exported functions on the custom element though, they are only available after the element has mounted. If you need to invoke functions before component creation, you can work around it by using the [`extend` option](#component-options).
+Quand un <span class="vo">[web component](/docs/web#web-component)</span> est créé, le composant Svelte qu'il embarque n'est _pas_ créé immédiatement. Il est uniquement créé lors du <span class="vo">[tick](/docs/sveltejs#tick)</span> suivant l'appel à `connectedCallback`. Les propriétés assignées au <span class="vo">[web component](/docs/web#web-component)</span> avant qu'il ne soit inséré dans le <span class="vo">[DOM](/docs/web#dom)</span> sont temporairement enregistrées et assignées à la création du composant, pour ne pas perdre leur valeur. Toutefois, la même chose ne fonctionne pas pour l'invocation des fonctions exportées par le <span class="vo">[web component](/docs/web#web-component)</span>, elles sont uniquement disponibles après le montage du composant. Si vous avez besoin d'invoquer des fonctions avant la création du composant, vous pouvez contourner le problème en utilisant l'option [`extend` option](#options-de-composant).
 
-When a custom element written with Svelte is created or updated, the shadow DOM will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component.
+Lorsqu'un <span class="vo">[web component](/docs/web#web-component)</span> écrit avec Svelte est créé ou mis à jour, le <span class="vo">[DOM fantôme](/docs/javascript#shadow-dom)</span> reflète la valeur lors du <span class="vo">[tick](/docs/sveltejs#tick)</span> suivant, et non immédiatement. Ainsi, les mises à jour peuvent être groupées, et les déplacements <span class="vo">[DOM](/docs/web#dom)</span> qui détachent temporairement (mais de manière synchrone) les éléments du DOM ne déclenchent pas le démontage du composant sous-jacent.
 
-The inner Svelte component is destroyed in the next tick after the `disconnectedCallback` is invoked.
+Le composant Svelte sous-jacent est détruit dans le <span class="vo">[tick](/docs/sveltejs#tick)</span> suivant l'invocation de `disconnectedCallback`.
 
-## Component options
+## Options de composant
 
-When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>` since Svelte 4. This object may contain the following properties:
+Lorsque vous construisez un <span class="vo">[web component](/docs/web#web-component)</span>, vous pouvez définir plusieurs aspects en utilisant l'attribut `customElement` de `<svelte:options>` en tant qu'objet, et ce depuis Svelte 4. Cet objet peut avoir les propriétés suivantes :
 
-- `tag`: the mandatory `tag` property for the custom element's name
-- `shadow`: an optional property that can be set to `"none"` to forgo shadow root creation. Note that styles are then no longer encapsulated, and you can't use slots
+- `tag`: le nom du <span class="vo">[web component](/docs/web#web-component)</span>, obligatoire
+- `shadow`: champ optionnel dont la valeur peut être `"none"` pour ignorer la création du [noeud fantôme racine](/docs/javascript#shadow-dom). Notez que les styles ne seront alors plus encapsulés, et que ne pourrez plus utiliser de <span class="vo">[slot](/docs/sveltejs#slot)</span>
 - `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:
-  - `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: "<desired name>"`.
-  - `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`.
-  - `type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object'`: While converting an attribute value to a prop value and reflecting it back, the prop value is assumed to be a `String` by default. This may not always be accurate. For instance, for a number type, define it using `type: "Number"`
-    You don't need to list all properties, those not listed will use the default settings.
-- `extend`: an optional property which expects a function as its argument. It is passed the custom element class generated by Svelte and expects you to return a custom element class. This comes in handy if you have very specific requirements to the life cycle of the custom element or want to enhance the class to for example use [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples) for better HTML form integration.
+	- `attribute: string`: Pour mettre à jour une <span class="vo">[props](/docs/sveltejs#props)</span> d'un <span class="vo">[web component](/docs/web#web-component)</span>, vous avez deux alternatives : soit affecter la props sur la référence de l'élément comme illustré juste au-dessus ou utiliser un attribut HTML. Pour cette dernière, le nom par défaut de l'attribut est le nom de la props en minuscules. Vous pouvez modifier ceci avec `attribute: "<nom que vous voulez>"`
+	- `reflect: boolean`: Par défaut, les <span class="vo">[props](/docs/sveltejs#props)</span> mises à jour ne sont pas reflétées dans le <span class="vo">[DOM](/docs/web#dom)</span>. Pour activer ce comportement, utiliser `reflect: true`.
+	- `type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object'`: Si vous convertissez une valeur d'attribut en valeur de <span class="vo">[props](/docs/sveltejs#props)</span> pour la refléter dans le <span class="vo">[DOM](/docs/web#dom)</span>, la valeur de la props est supposée de type `String` par défaut. Ce n'est pas toujours correct. Par exemple, pour un nombre, vous pouvez utiliser `type: "Number"`
+- `extend`: une propriété optionnelle qui attend une fonction comme argument. Cette fonction est passée à la classe du <span class="vo">[web component](/docs/web#web-component)</span> générée par Svelte et attend que vous retourniez une classe de <span class="vo">[web component](/docs/web#web-component)</span>. Cela est utile si vous ave des contraintes particulières concernant le cycle de vie du <span class="vo">[web component](/docs/web#web-component)</span> ou si vous voulez améliorer la classe pour utiliser par exemple les [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples) (en anglais) pour une meilleure intégration des formulaires.
 
 ```svelte
 <svelte:options
@@ -87,7 +86,7 @@ When constructing a custom element, you can tailor several aspects by defining `
 			name: { reflect: true, type: 'Number', attribute: 'element-index' }
 		},
 		extend: (customElementConstructor) => {
-			// Extend the class so we can let it participate in HTML forms
+			// Étend la classe pour lui permettre de participer aux formulaires HTML
 			return class extends customElementConstructor {
 				static formAssociated = true;
 
@@ -96,9 +95,9 @@ When constructing a custom element, you can tailor several aspects by defining `
 					this.attachedInternals = this.attachInternals();
 				}
 
-				// Add the function here, not below in the component so that
-				// it's always available, not just when the inner Svelte component
-				// is mounted
+				// Ajoutez la fonction ici, pas en-dessous dans le composant
+				// pour qu'elle soit toujours accessible, pas seulement lorsque
+				// le composant Svelte sous-jacent est monté
 				randomIndex() {
 					this.elementIndex = Math.random();
 				}
@@ -119,14 +118,16 @@ When constructing a custom element, you can tailor several aspects by defining `
 ...
 ```
 
-## Caveats and limitations
+## Limitations
 
-Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
+Les <span class="vo">[web components](/docs/web#web-component)</span> sont un bon moyen de <span class="vo">[packager](/docs/web#bundler-packager)</span> des composants pour une utilisation dans une application développée dans une autre technologie que Svelte, puisqu'ils fonctionneront avec du HTML et JavaScript natifs mais aussi avec [la plupart des frameworks](https://custom-elements-everywhere.com/). Il y a cependant des différences importantes à connaître :
 
-- Styles are _encapsulated_, rather than merely _scoped_ (unless you set `shadow: "none"`). This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier
-- Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string
-- Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads
-- In Svelte, slotted content renders _lazily_. In the DOM, it renders _eagerly_. In other words, it will always be created even if the component's `<slot>` element is inside an `{#if ...}` block. Similarly, including a `<slot>` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times
-- The `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot
-- Polyfills are required to support older browsers
-- You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element.
+- Le style est _encapsulé_, plutôt que simplement <span class="vo">[scopé](/docs/development#scope)</span>. Cela signifie que tout style défini en dehors du composant (par exemple, celui défini dans un fichier `global.css` et celui défini avec `:global(...)`) ne s'appliquera pas au <span class="vo">[web component](/docs/web#web-component)</span>
+- Plutôt que d'être extrait dans un fichier `.css` séparé, le style est <span class="vo">[inliné](/docs/javascript#inline)</span> directement en tant que `string` JavaScript
+- Les <span class="vo">[web components](/docs/web#web-component)</span> ne sont généralement pas faits pour être rendus côté serveur, puisque le <span class="vo">[DOM fantôme](/docs/javascript#shadow-dom)</span> est invisible tant que le code JavaScript n'est pas chargé
+- En Svelte, les éléments <span class="vo">[slottés](/docs/sveltejs#slot)</span> sont rendus de manière <span class="vo">[lazy](/docs/web#lazy-loading)</span>. Dans le <span class="vo">[DOM](/docs/web#dom)</span>, le rendu est "impatient". En d'autres termes, le composant sera toujours créé même si l'élément `<slot>` est à l'intérieur d'un bloc `{#if ...}`. De la même manière, inclure un `<slot>` dans un bloc `{#each ...}` ne rendra pas l'enfant plusieurs fois
+- La directive `let:` n'a aucun effet, car les <span class="vo">[web components](/docs/web#web-component)</span> n'ont aucun moyen de passer de la donnée au composant parent qui fournit le <span class="vo">[slot](/docs/sveltejs#slot)</span>
+- Des <span class="vo">[polyfills](/docs/javascript#polyfill)</span> sont nécessaires pour supporter de vieux navigateurs
+- Vous pouvez utiliser la fonctionnalité Svelte de contexte entre des composants Svelte classiques à l'intérieur d'un <span class="vo">[web component](/docs/web#web-component)</span>, mais vous ne pouvez pas l'utiliser entre différents <span class="vo">[web component](/docs/web#web-component)</span>. En d'autres mots, vous ne pouvez pas utiliser `setContext` dans un <span class="vo">[web component](/docs/web#web-component)</span> parent et lire ce contexte avec `getContext` dans un <span class="vo">[web component](/docs/web#web-component)</span> enfant.
+
+Lorsqu'un <span class="vo">[web component](/docs/web#web-component)</span> écrit avec Svelte est créé ou mis à jour, le <span class="vo">[DOM fantôme](/docs/javascript#shadow-dom)</span> reflète la valeur dans le rendu suivant, et non immédiatement. Ainsi, les mises à jour peuvent être groupées, et les déplacements <span class="vo">[DOM](/docs/web#dom)</span> qui détachent temporairement (mais de manière synchrone) les éléments du DOM ne déclenchent pas le démontage du composant sous-jacent.
diff --git a/documentation/docs/04-compiler-and-api/meta.json b/documentation/docs/04-compiler-and-api/meta.json
index 8f2e3ee590..701a62a3bc 100644
--- a/documentation/docs/04-compiler-and-api/meta.json
+++ b/documentation/docs/04-compiler-and-api/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Compiler and API"
+	"title": "Compilateur et API"
 }
diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md
index ea932eff34..cc6b1b76d9 100644
--- a/documentation/docs/05-misc/01-faq.md
+++ b/documentation/docs/05-misc/01-faq.md
@@ -1,124 +1,124 @@
 ---
-title: Frequently asked questions
+title: Foire aux questions
 ---
 
-## I'm new to Svelte. Where should I start?
+## Je débute avec Svelte. Par où commencer ?
 
-We think the best way to get started is playing through the interactive [tutorial](https://learn.svelte.dev/). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
+Nous pensons que la meilleure manière de commencer est de jouer avec le [tutoriel](PUBLIC_LEARN_SITE_URL/) interactif. Chaque étape est principalement axée sur un aspect spécifique et est facile à suivre. Vous éditerez et exécuterez de vrais composants directement dans votre navigateur.
 
-Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
+Cinq à dix minutes devraient suffire pour démarrer. Une heure et demie devrait vous permettre de parcourir entièrement le tutoriel.
 
-## Where can I get support?
+## Où puis-je obtenir de l'aide ?
 
-If your question is about certain syntax, the [API page](https://svelte.dev/docs) is a good place to start.
+Si votre question est en rapport avec une certaine syntaxe, la [page d'API](https://svelte-french.vercel.app/docs/introduction) est un bon point de départ.
 
-Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)!
+Stack Overflow est un forum populaire pour poser des questions liées à du code ou si vous bloquez sur une erreur spécifique. Lisez les questions existantes étiquetées avec [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) ou [posez la votre](https://stackoverflow.com/questions/ask?tags=svelte) !
 
-There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](https://svelte.dev/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.
+Il existe des forums en ligne pour échanger à propos des bonnes pratiques, de l'architecture d'une application ou tout simplement pour apprendre à connaître d'autres développeurs Svelte. [Le Discord anglophone](PUBLIC_SVELTE_SITE_URL/chat), le [Discord francophone](https://discord.gg/D6Dzc5m3) ou [le canal Reddit](https://www.reddit.com/r/sveltejs/) en sont des exemples. Si vous avez une question relative à du code Svelte, Stack Overflow est probablement le meilleur endroit.
 
-## Are there any third-party resources?
+## Existe-t-il des ressources tierces ?
 
-Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
+La Svelte Society maintient une [liste de livres et vidéos](https://sveltesociety.dev/resources).
 
-## How can I get VS Code to syntax-highlight my .svelte files?
+## Comment puis-je utiliser la coloration syntaxique sur mes fichiers .svelte dans VS Code ?
 
-There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+Il existe une [extension VS Code officielle pour Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
-## Is there a tool to automatically format my .svelte files?
+## Existe-t-il un outil pour formater automatiquement mes fichiers .svelte ?
 
-You can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.
+Vous pouvez utiliser Prettier avec le <span class="vo">[plugin](/docs/development#plugin)</span> [plugin-prettier-svelte](https://www.npmjs.com/package/prettier-plugin-svelte).
 
-## How do I document my components?
+## Comment documenter mes composants ?
 
-In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.
+Dans les éditeurs qui utilisent le <span class="vo">[Language Server](/docs/web#language-server)</span> Svelte ([svelte-language-server](https://www.npmjs.com/package/svelte-language-server)), vous pouvez documenter les composants, fonctions et exports à l'aide de commentaires spécialement formatés.
 
-````svelte
+```svelte
 <script>
-	/** What should we call the user? */
-	export let name = 'world';
+	/** Comment doit-on appeler l'utilisateur ? */
+	export let nom = 'world';
 </script>
 
 <!--
 @component
-Here's some documentation for this component.
-It will show up on hover.
+Voici une documentation pour ce composant.
+Elle apparaîtra au survol
 
-- You can use markdown here.
-- You can also use code blocks here.
-- Usage:
+- Vous pouvez utiliser la syntaxe Markdown ici.
+- Vous pouvez également utiliser des blocs de code ici.
+- Utilisation:
   ```tsx
-  <main name="Arethra">
+  <main nom="Arethra">
   ```
 -->
 <main>
 	<h1>
-		Hello, {name}
+		Salut, {nom}
 	</h1>
 </main>
 ````
 
-Note: The `@component` is necessary in the HTML comment which describes your component.
+Note: Le `@component` est nécessaire dans le commentaire HTML qui décrit votre composant.
 
-## Does Svelte scale?
+## Est-ce que l'usage de Svelte est pertinent à grande échelle ?
 
-There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).
+Il y aura certainement un article de blog à ce sujet, mais en attendant, consultez [cette discussion](https://github.com/sveltejs/svelte/issues/2546).
 
-## Is there a UI component library?
+## Existe-t-il une bibliothèque de composants d'interface ?
 
-There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/components#design-systems) on the Svelte Society website.
+Il existe plusieurs bibliothèques de composants d'interface ainsi que des composants autonomes. Retrouvez-les dans la [section design systems de la page composants](https://sveltesociety.dev/components#design-systems) du site de Svelte Society.
 
-## How do I test Svelte apps?
+## Comment tester mes applications Svelte ?
 
-How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
+La façon dont votre application est structurée et l'endroit où la logique est définie vont déterminer la meilleure façon de s'assurer qu'elle est correctement testée. Il est important de comprendre que certaines logiques ne devraient pas être définies dans un composant — notamment les sujets de transformation de données, de gestion d'état inter-composants, et l'affichage de <span class="vo">[logs](/docs/development#log)</span>, entre autres. Ayez en tête que la librairie Svelte a sa propre suite de tests, vous n'avez donc pas besoin d'écrire des tests pour vérifier les détails d'implémentation fournis par Svelte.
 
-A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).
+Une application Svelte aura généralement trois types différents de tests : Unitaires, Composants et <span class="vo">[end to end](/docs/development#end-to-end)<span> (E2E)
 
-_Unit Tests_: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup [Vitest](https://vitest.dev/) for unit testing. There are a number of other test runners that could be used as well.
+_Tests Unitaires_ : Servent à tester la logique métier en isolation. Souvent il s'agit de valider des fonction individuelles et des cas particuliers. Minimiser la surface de ces tests permet de les garder légers et rapides, et extraire un maximum de logique de vos composants Svelte vous permet d'augmenter le nombre de ce type de tests pour couvrir votre application. Lorsque vous créez un nouveau projet SvelteKit, vous avez la possibilité de choisir d'installer [Vitest](https://vitest.dev/) pour les tests unitaires. D'autres moteurs de tests pourraient être également utilisés.
 
-_Component Tests_: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like [Vitest](https://vitest.dev/) to solutions that leverage an actual browser to provide a visual testing capability such as [Playwright](https://playwright.dev/docs/test-components) or [Cypress](https://www.cypress.io/).
+_Tests de composant_ : Vérifier qu'un composant Svelte s'instancie et réagit comme prévu aux interactions au cours de sa vie nécessite un outil qui fournit un <span class="vo">[DOM](/docs/web#dom)</span>. Les composants peuvent être compilés (puisque Svelte est un compilateur et non une simple librairie) et montés pour permettre de vérifier la structure de l'élément, les gestionnaires d'évènements, l'état, et les autres fonctionnalités offertes par un composant Svelte. Les outils de test de composant vont d'une implémentation en mémoire type [jsdom](https://www.npmjs.com/package/jsdom) couplée à un moteur de test type [Vitest](https://vitest.dev/), à des solutions qui utilisent de vrais navigateurs pour fournir des fonctionnalités de tests visuels comme [Playwright](https://playwright.dev/docs/test-components) ou [Cypress](https://www.cypress.io/).
 
-_End-to-End Tests_: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup [Playwright](https://playwright.dev/) for end-to-end testing. There are many other E2E test libraries available for use as well.
+_Tests <span class="vo">[end to end](/docs/development#end-to-end)</span>_ : Pour vous assurer que votre application fonctionne comme prévu dans des cas réels d'utilisation, il est nécessaire de la tester d'une manière la plus proche possible de la production. Cela se fait avec des tests dits <span class="vo">[end to end](/docs/development#end-to-end)</span> (E2E) qui chargent et interagissent avec une version déployée de votre application afin de simuler les interactions utilisateur. Lorsque vous créez un nouveau projet SvelteKit, vous avez la possibilité de choisir d'installer [Playwright](https://playwright.dev/) pour les tests <span class="vo">[end to end](/docs/development#end-to-end)</span>. Il existe également d'autres librairies de tests E2E.
 
-Some resources for getting started with testing:
+Quelques ressources pour démarrer avec les tests unitaires :
 
 - [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
-- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
-- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte)
-- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
-- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
-- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
+- [Tests de composants Svelte avec Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
+- [Exemple utilisant vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte)
+- [Exemple utilisant uvu avec JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
+- [Tests de composants Svelte Vitest et Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
+- [Tests de composants avec WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
 
-## Is there a router?
+## Un routeur est-il intégré ?
 
-The official routing library is [SvelteKit](https://kit.svelte.dev/). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
+La bibliothèque officielle de <span class="vo">[routing](/docs/web#routing)</span> est [SvelteKit](PUBLIC_KIT_SITE_URL/). Sveltekit fournit un routeur basé sur le système de fichier, un <span class="vo">[rendu coté serveur (SSR)](/docs/web#server-side-rendering)</span> et un <span class="vo">[rechargement automatique de module (HMR)](/docs/web#hot-module-reloading)</span> en une seule librairie facile à utiliser. Il est similaire à Next.js pour React.
 
-However, you can use any router library. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
+Toutefois, vous pouvez utiliser n'importe quelle bibliothèque de <span class='vo'>[routing](/docs/web#routing)</span> de votre choix. Beaucoup de gens utilisent [page.js](https://github.com/visionmedia/page.js). Il y a aussi [navaid](https://github.com/lukeed/navaid), qui est très similaire. Et [universal-router](https://github.com/kriasoft/universal-router), qui est isomorphe avec les routes enfants, mais sans prise en charge intégrée de l'historique.
 
-If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
+Si vous préférez une approche HTML déclarative, il existe la bibliothèque isomorphe [svelte-routing](https://github.com/EmilTholin/svelte-routing) et un fork appelé [svelte-navigator](https://github. com/mefechoel/svelte-navigator) contenant des fonctionnalités supplémentaires.
 
-If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
+Si vous avez besoin d'un <span class='vo'>[routing](/docs/web#routing)</span> basé sur le <span class="vo">[hashing](/docs/development#hash)</span> côté client, consultez [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) ou [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
 
-[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
+[Routify](https://routify.dev) est un autre routeur basé sur l'arborescence de fichiers, similaire au routeur de SvelteKit. La version 3 supporte le rendu côté serveur natif de Svelte.
 
-You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers).
+Vous pouvez trouver une [liste de routeurs maintenus par la communauté sur sveltesociety.dev](https://sveltesociety.dev/components#routers).
 
-## Can I tell Svelte not to remove my unused styles?
+## Puis-je demander à Svelte de pne pas supprimer mes styles inutilisés ?
 
-No. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.
+Non. Svelte supprime les styles inutilisés des composants et vous prévient pour éviter certaines problématiques qui surviendraient sinon.
 
-Svelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it:
+Le <span class="vo">[scoping](/docs/development#scope)</span> des styles d'un composant Svelte fonctionne en générant une classe unique pour le composant en question, en l'ajoutant aux éléments pertinents du composant sous le contrôle de Svelte, puis en ajoutant cette classe à chacun des sélecteurs dans le style de ce composant. Si le compilateur ne peut pas savoir sur quels éléments un sélecteur de style s'applique, deux mauvaises options s'offrent à lui pour le garder :
 
-- If it keeps the selector and adds the scoping class to it, the selector will likely not match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`.
-- If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page.
+- S'il garde le sélecteur et lui ajoute la classe, le sélecteur ne s'appliquera probablement plus aux éléments du composant auxquels il est censé s'appliquer, et certainement pas si ces éléments ont été créés par un composant enfant ou par `{@html ...}`.
+- S'il garde le sélecteur sans lui ajouter la classe, le style en question devient un style global, affectant toute votre page.
 
-If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want.
+Si vous ave besoin de styliser quelque chose que Svelte ne peut pas identifier au moment de la compilation, vous aurez besoin d'utiliser explicitement les styles globaux en utilisant `:global (...)`. Mais gardez également en tête que vous pouvez entourer seulement une partie d'un sélecteur avec `:global (...)`. `.foo :global(.bar) { ... }` s'appliquera à tout élément `.bar` présent dans les éléments `.foo` du composant. Tant qu'il y a un élément parent au sein du composant courant, les sélecteur globaux partiels comme `.foo :global(.bar) { ... }` vous permettront presque systématiquement d'obtenir ce que vous recherchez.
 
-## Is Svelte v2 still available?
+## La version 2 de Svelte est-elle toujours disponible ?
 
-New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.
+Nous n'y ajoutons pas de nouvelles fonctionnalités, et les bugs ne seront probablement corrigés que s'ils sont extrêmement dangereux ou présentent une sorte de vulnérabilité de sécurité.
 
-The documentation is still available [here](https://v2.svelte.dev/guide).
+La documentation est toujours disponible [ici](https://v2.svelte.dev/guide).
 
-## How do I do hot module reloading?
+## Comment puis-je recharger un module automatiquement ?
 
-We recommend using [SvelteKit](https://kit.svelte.dev/), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader).
+Nous vous recommandons d'utiliser [SvelteKit](PUBLIC_KIT_SITE_URL/), qui prend en charge le <span class="vo">[HMR](/docs/web#hot-module-reloading)</span> prêt à l'emploi et est construit avec [Vite](https://vitejs.dev/) et [svelte-hmr](https://github.com/sveltejs/svelte-hmr). Il existe également des <span class="vo">[plugins](/docs/development#plugin)</span> communautaires pour [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) et [webpack](https://github.com/sveltejs/svelte-loader).
diff --git a/documentation/docs/05-misc/02-accessibility-warnings.md b/documentation/docs/05-misc/02-accessibility-warnings.md
index 45c9d2fbc4..0422f80c97 100644
--- a/documentation/docs/05-misc/02-accessibility-warnings.md
+++ b/documentation/docs/05-misc/02-accessibility-warnings.md
@@ -1,21 +1,21 @@
 ---
-title: 'Accessibility warnings'
+title: Avertissements d'accessibilité
 ---
 
-Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you at compile time if you write inaccessible markup. However, keep in mind that many accessibility issues can only be identified at runtime using other automated tools and by manually testing your application.
+L'accessibilité (souvent raccourcie en "a11y") est un sujet complexe, qu'il est courant de mal implémenter. Pour vous aider, Svelte vous avertit au moment de la compilation si vous écrivez du markup non accessible. Toutefois, gardez à l'esprit que de nombreux problèmes d'accessibilité ne peuvent être identifiés qu'au moment de l'exécution, à l'aide d'autres outils automatisés et en testant manuellement votre application.
 
-Some warnings may be incorrect in your concrete use case. You can disable such false positives by placing a `<!-- svelte-ignore a11y-<code> -->` comment above the line that causes the warning. Example:
+Certains avertissements seront incorrects dans votre cas. Vous pouvez désactivez ces faux positifs en ajoutant le commentaire `<!-- svelte-ignore a11y-<code> -->` juste au dessus de la ligne causant l'avertissement. Exemple :
 
 ```svelte
 <!-- svelte-ignore a11y-autofocus -->
 <input autofocus />
 ```
 
-Here is a list of accessibility checks Svelte will do for you.
+Voici la liste des vérifications d'accessibilité que Svelte fera pour vous.
 
 ## `a11y-accesskey`
 
-Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
+Assure de ne pas utiliser l'attribut `accesskey` sur des éléments. L'attribut HTML `accesskey` permet aux développeurs web d'attribuer des raccourcis clavier aux éléments. Les incohérences entre les raccourcis clavier et les commandes clavier utilisées par le lecteur d'écran et les utilisateurs du clavier créent des complications d'accessibilité. Pour éviter les complications, les touches d'accès ne doivent pas être utilisées.
 
 <!-- prettier-ignore -->
 ```svelte
@@ -25,7 +25,7 @@ Enforce no `accesskey` on element. Access keys are HTML attributes that allow we
 
 ## `a11y-aria-activedescendant-has-tabindex`
 
-An element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.
+Un élément avec `aria-activedescendant`  doit pouvoir être navigable en utilisant la touche "Tab", il doit donc avoir un `tabindex` intrinsèque, ou déclarer `tabindex` comme attribut.
 
 ```svelte
 <!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
@@ -34,7 +34,7 @@ An element with `aria-activedescendant` must be tabbable, so it must either have
 
 ## `a11y-aria-attributes`
 
-Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
+Certains éléments <span class="vo">[DOM](/docs/web#dom)</span> spéciaux ne prennent pas en charge les rôles, états et propriétés <span class="vo">[ARIA](/docs/web#aria)</span>. C'est souvent parce qu'ils ne sont pas visibles, comme `meta`, `html`, `script`, `style`. Cette règle garantit que ces éléments DOM ne contiennent pas des `aria-*` accessoires.
 
 ```svelte
 <!-- A11y: <meta> should not have aria-* attributes -->
@@ -43,7 +43,7 @@ Certain reserved DOM elements do not support ARIA roles, states and properties.
 
 ## `a11y-autofocus`
 
-Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
+Interdit l’usage d'`autofocus` sur les éléments. Le focus automatique d'éléments peut entraîner des problèmes d'usage pour les utilisateurs, qu'ils soient malvoyants, non voyants ou avec une vue parfaite.
 
 ```svelte
 <!-- A11y: Avoid using autofocus -->
@@ -52,24 +52,25 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 
 ## `a11y-click-events-have-key-events`
 
-Enforce that visible, non-interactive elements with an `on:click` event are accompanied by a keyboard event handler.
+Assure que les éléments visibles et non interactifs possédent un évènement `on:click` possèdent également un gestionnaire d'évènement de clavier.
 
-Users should first consider whether an interactive element might be more appropriate such as a `<button type="button">` element for actions or `<a>` element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. `Space` and `Enter` will trigger a `<button>` and `Enter` will trigger an `<a>` element.
+Il est important de se poser la question si un élément interactif serait plus approprié sous la forme d'un élément `<button type="button">` pour des actions ou d'un élément `<a>` pour des navigations. Ces éléments ont du sens sémantiquement et ont une gestion native des touches du clavier. Par exemple, `Space` et `Enter` déclenchent l'action d'un `<button>` et `Enter` déclenche la navigation d'un élément `<a>`.
 
-If a non-interactive element is required then `on:click` should be accompanied by an `on:keyup` or `on:keydown` handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). While an `on:keypress` handler will also silence this warning, it should be noted that the `keypress` event is deprecated.
+Si un élément non interactif est requis, alors `on:click` doit être accompagné d'un gestionnaire `on:keyup` ou `on:keydown` permettant à l'utilisateur ou l'utilisatrice de faire des actions équivalentes au clavier. Afin qu'ils ou elles puissent déclencher une touche de clavier, l'élément doit aussi pouvoir récupérer le focus en ajoutant un [`tabindex`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex). Même si l'ajout d'un gestionnaire `on:keypress` va désactiver cet avertissement, il est important de noter que l'évènement `keypress` est déprécié.
 
 ```svelte
 <!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. -->
 <div on:click={() => {}} />
 ```
 
-Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
+Développer avec l'usage au clavier en tête est important pour les personnes ne pouvant pas physiquement utiliser une souris, pour les personnes utilisant la compatibilité AT, ainsi que pour les personnes utilisant des lecteurs d'écran.
+
 
 ## `a11y-distracting-elements`
 
-Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
+Assure qu'aucun élément distrayant ne soit utilisé. Les éléments distrayants visuellement peuvent causer des problèmes d'accessibilité avec les utilisateurs malvoyants. Ces éléments sont généralement dépréciés et doivent être évités.
 
-The following elements are visually distracting: `<marquee>` and `<blink>`.
+Les éléments suivants sont visuellement distrayants: `<marquee>` et `<blink>`.
 
 ```svelte
 <!-- A11y: Avoid <marquee> elements -->
@@ -78,7 +79,7 @@ The following elements are visually distracting: `<marquee>` and `<blink>`.
 
 ## `a11y-hidden`
 
-Certain DOM elements are useful for screen reader navigation and should not be hidden.
+Certains éléments <span class="vo">[DOM](/docs/web#dom)</span> sont utiles pour la navigation avec lecteur d'écran et ne doivent pas être cachés.
 
 <!-- prettier-ignore -->
 ```svelte
@@ -88,28 +89,28 @@ Certain DOM elements are useful for screen reader navigation and should not be h
 
 ## `a11y-img-redundant-alt`
 
-Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.
+Assure que l'attribut `alt` des balises `img` ne contienne pas le mot "image" ou "photo". Les lecteurs d'écran décrivent déjà les éléments `img` comme étant des images. Il n'est pas nécessaire d'utiliser des mots tels que *photo* et / ou *image*.
 
 ```svelte
-<img src="foo" alt="Foo eating a sandwich." />
+<img src="foo" alt="Foo mange un sandwich." />
 
-<!-- aria-hidden, won't be announced by screen reader -->
-<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />
+<!-- A11y: aria-hidden, won't be announced by screen reader -->
+<img src="bar" aria-hidden="true" alt="Photo de moi prenant une photo d'une image" />
 
 <!-- A11y: Screen readers already announce <img> elements as an image. -->
-<img src="foo" alt="Photo of foo being weird." />
+<img src="foo" alt="Image de foo bizarre." />
 
 <!-- A11y: Screen readers already announce <img> elements as an image. -->
-<img src="bar" alt="Image of me at a bar!" />
+<img src="bar" alt="Image de moi dans un bar !" />
 
 <!-- A11y: Screen readers already announce <img> elements as an image. -->
-<img src="foo" alt="Picture of baz fixing a bug." />
+<img src="foo" alt="Image de baz corrigeant un bug." />
 ```
 
 ## `a11y-incorrect-aria-attribute-type`
 
-Enforce that only the correct type of value is used for aria attributes. For example, `aria-hidden`
-should only receive a boolean.
+Assure que le bon type de valeur soit utilisé pour les attributs `aria`. Par exemple, `aria-hidden` ne devrait recevoir qu'un booléen.
+
 
 ```svelte
 <!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
@@ -118,16 +119,16 @@ should only receive a boolean.
 
 ## `a11y-invalid-attribute`
 
-Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.
+Assure que les attributs importants pour l'accessibilité aient une valeur valide. Par exemple, `href` ne devrait pas être vide, `'#'` ou `javascript:`.
 
 ```svelte
 <!-- A11y: '' is not a valid href attribute -->
-<a href="">invalid</a>
+<a href="">invalide</a>
 ```
 
 ## `a11y-interactive-supports-focus`
 
-Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.
+Assure que les éléments avec un rôle interactif et des gestionnaires d'évènements interactifs (de souris ou de clavier) soient focalisables ou accessibles avec la touche Tab.
 
 ```svelte
 <!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
@@ -136,12 +137,12 @@ Enforce that elements with an interactive role and interactive handlers (mouse o
 
 ## `a11y-label-has-associated-control`
 
-Enforce that a label tag has a text label and an associated control.
+Assure qu'un élément `label` ait une étiquette de texte et un contrôle associé.
 
-There are two supported ways to associate a label with a control:
+Il existe deux méthodes prises en charge pour associer une étiquette à un contrôle :
 
-- Wrapping a control in a label tag.
-- Adding `for` to a label and assigning it the ID of an input on the page.
+- Envelopper un contrôle dans un élément `label`.
+- Ajouter `for` à une étiquette et lui attribuer l'ID d'un champ d'entrée sur la page.
 
 ```svelte
 <label for="id">B</label>
@@ -154,9 +155,9 @@ There are two supported ways to associate a label with a control:
 
 ## `a11y-media-has-caption`
 
-Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
+Fournir des sous-titres pour les médias est essentiel afin que les utilisateurs sourds puissent suivre. Les sous-titres devraient être une transcription ou une traduction du dialogue, des effets sonores, des indications musicales pertinentes et d'autres informations audio pertinentes. Ce n'est pas seulement important pour l'accessibilité, mais peut également être utile pour tous les utilisateurs dans le cas où les médias ne sont pas disponibles (similaire au texte `alt` sur une image lorsqu'une image ne peut pas être chargée).
 
-The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.
+Les sous-titres doivent contenir toutes les informations importantes et pertinentes pour comprendre les médias correspondants. Cela peut signifier que les sous-titres ne sont pas une correspondance 1:1 du dialogue dans le contenu média. Cependant, les sous-titres ne sont pas nécessaires pour les composants vidéo avec l'attribut `muted`.
 
 ```svelte
 <video><track kind="captions" /></video>
@@ -172,7 +173,7 @@ The captions should contain all important and relevant information to understand
 
 ## `a11y-misplaced-role`
 
-Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.
+Certains éléments <span class="vo">[DOM](/docs/web#dom)</span> réservés ne prennent pas en charge les rôles, états et propriétés <span class="vo">[ARIA](/docs/web#aria)</span>. Cela est souvent dû à leur invisibilité, par exemple `meta`, `html`, `script`, `style`. Cette règle impose que ces éléments DOM ne contiennent pas l'attribut `role`.
 
 ```svelte
 <!-- A11y: <meta> should not have role attribute -->
@@ -181,7 +182,7 @@ Certain reserved DOM elements do not support ARIA roles, states and properties.
 
 ## `a11y-misplaced-scope`
 
-The scope attribute should only be used on `<th>` elements.
+L'attribut `scope` ne devrait être utilisé que sur les éléments `<th>`.
 
 <!-- prettier-ignore -->
 ```svelte
@@ -191,15 +192,15 @@ The scope attribute should only be used on `<th>` elements.
 
 ## `a11y-missing-attribute`
 
-Enforce that attributes required for accessibility are present on an element. This includes the following checks:
+Assure que les attributs requis pour l'accessibilité soient présents sur un élément. Cela inclut les vérifications suivantes:
 
-- `<a>` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))
-- `<area>` should have alt, aria-label, or aria-labelledby
-- `<html>` should have lang
-- `<iframe>` should have title
-- `<img>` should have alt
-- `<object>` should have title, aria-label, or aria-labelledby
-- `<input type="image">` should have alt, aria-label, or aria-labelledby
+- `<a>` devrait avoir un `href` (sauf s'il s'agit d'une [balise définissant un fragment](https://github.com/sveltejs/svelte/issues/4697))
+- `<area>` devrait avoir `alt`, `aria-label` ou `aria-labelledby`
+- `<html>` devrait avoir `lang`
+- `<iframe>` devrait avoir `title`
+- `<img>` devrait avoir `alt`
+- `<object>` devrait avoir `title`, `aria-label` ou `aria-labelledby`
+- `<input type="image">` devrait avoir `alt`, `aria-label` ou `aria-labelledby`
 
 ```svelte
 <!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
@@ -209,12 +210,12 @@ Enforce that attributes required for accessibility are present on an element. Th
 <html />
 
 <!-- A11y: <a> element should have an href attribute -->
-<a>text</a>
+<a>texte</a>
 ```
 
 ## `a11y-missing-content`
 
-Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers
+Assure que les éléments d'en-tête (`h1`, `h2`, etc.) et les ancres aient un contenu, et que ce contenu soit accessible aux lecteurs d'écran.
 
 ```svelte
 <!-- A11y: <a> element should have child content -->
@@ -226,7 +227,7 @@ Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and th
 
 ## `a11y-mouse-events-have-key-events`
 
-Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and `on:blur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
+Assure que `on:mouseover` and `on:mouseout` soient accompagnés de `on:focus` et `on:blur`, respectivement. Cela aide à garantir que toutes les fonctionnalités déclenchées par ces événements de souris soient également accessibles aux utilisateurs du clavier.
 
 ```svelte
 <!-- A11y: on:mouseover must be accompanied by on:focus -->
@@ -238,7 +239,7 @@ Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and
 
 ## `a11y-no-redundant-roles`
 
-Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.
+Certains éléments HTML ont des rôles <span class="vo">[ARIA](/docs/web#aria)</span> par défaut. Donner à ces éléments un rôle ARIA déjà défini par le navigateur [n'a aucun effet](https://www.w3.org/TR/using-aria/#aria-does-nothing) et est redondant.
 
 ```svelte
 <!-- A11y: Redundant role 'button' -->
@@ -250,37 +251,25 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
 
 ## `a11y-no-interactive-element-to-noninteractive-role`
 
-[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
+Les rôles [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) ne devraient pas être utilisés pour convertir un élément interactif en un élément non interactif. Les rôles <span class="vo">[ARIA](/docs/web#aria)</span> non interactifs incluent `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` et `tooltip`.
 
 ```svelte
 <!-- A11y: <textarea> cannot have role 'listitem' -->
 <textarea role="listitem" />
 ```
 
-### `a11y-no-noninteractive-element-interactions`
-
-A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Non-interactive [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
-
-```sv
-<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->
-<li on:click={() => {}} />
-
-<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->
-<div role="listitem" on:click={() => {}} />
-```
-
 ### `a11y-no-noninteractive-element-to-interactive-role`
 
-[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.
+Un élément non interactif ne supporte pas les gestionnaires d'événements (souris et clavier). Les éléments non interactifs incluent : `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Les [rôles WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) interactifs incluent `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` et `textbox`.
 
 ```svelte
 <!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
-<h3 role="searchbox">Button</h3>
+<h3 role="searchbox">Bouton</h3>
 ```
 
 ## `a11y-no-noninteractive-tabindex`
 
-Tab key navigation should be limited to elements on the page that can be interacted with.
+La navigation à l'aide de la touche Tab doit être limitée aux éléments de la page avec lesquels il est possible d'interagir.
 
 <!-- prettier-ignore -->
 ```svelte
@@ -288,9 +277,9 @@ Tab key navigation should be limited to elements on the page that can be interac
 <div tabindex="0" />
 ```
 
-## a11y-no-static-element-interactions
+## `a11y-no-static-element-interactions`
 
-Elements like `<div>` with interactive handlers like `click` must have an ARIA role.
+Les éléments comme un `<div>` avec des gestionnaires d'événements comme `click` doivent avoir un rôle <span class="vo">[ARIA](/docs/web#aria)</span>.
 
 <!-- prettier-ignore -->
 ```svelte
@@ -300,7 +289,7 @@ Elements like `<div>` with interactive handlers like `click` must have an ARIA r
 
 ## `a11y-positive-tabindex`
 
-Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
+Évitez les valeurs positives pour la propriété `tabindex`. Cela positionnera des éléments en dehors de l'ordre de tabulation attendu, ce qui créera une expérience confuse pour les utilisateurs du clavier.
 
 <!-- prettier-ignore -->
 ```svelte
@@ -310,7 +299,7 @@ Avoid positive `tabindex` property values. This will move elements out of the ex
 
 ## `a11y-role-has-required-aria-props`
 
-Elements with ARIA roles must have all required attributes for that role.
+Les éléments avec des rôles <span class="vo">[ARIA](/docs/web#aria)</span> doivent avoir tous les attributs requis pour ce rôle.
 
 ```svelte
 <!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
@@ -319,7 +308,7 @@ Elements with ARIA roles must have all required attributes for that role.
 
 ## `a11y-role-supports-aria-props`
 
-Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
+Les éléments avec un rôle explicite ou implicite doivent contenir uniquement des propriétés `aria-*` prévues pour ce rôles.
 
 ```svelte
 <!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
@@ -331,18 +320,18 @@ Elements with explicit or implicit roles defined contain only `aria-*` propertie
 
 ## `a11y-structure`
 
-Enforce that certain DOM elements have the correct structure.
+Assure que certains éléments <span class="vo">[DOM](/docs/web#dom)</span> aient la bonne structure.
 
 ```svelte
 <!-- A11y: <figcaption> must be an immediate child of <figure> -->
 <div>
-	<figcaption>Image caption</figcaption>
+	<figcaption>Légende de l'image</figcaption>
 </div>
 ```
 
 ## `a11y-unknown-aria-attribute`
 
-Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
+Assure que seuls les attributs <span class="vo">[ARIA](/docs/web#aria)</span> connus soient utilisés. Cela est basé sur la spécification [WAI-ARIA States and Properties](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
 
 ```svelte
 <!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
@@ -351,7 +340,7 @@ Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA
 
 ## `a11y-unknown-role`
 
-Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
+Les éléments avec des rôles <span class="vo">[ARIA](/docs/web#aria)</span> doivent utiliser un rôle ARIA valide et non abstrait. Une référence aux définitions de rôle peut être trouvée sur le site [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions).
 
 <!-- prettier-ignore -->
 ```svelte
diff --git a/documentation/docs/05-misc/03-typescript.md b/documentation/docs/05-misc/03-typescript.md
index 3fe3580f7e..28035ee8f7 100644
--- a/documentation/docs/05-misc/03-typescript.md
+++ b/documentation/docs/05-misc/03-typescript.md
@@ -2,15 +2,15 @@
 title: TypeScript
 ---
 
-You can use TypeScript within Svelte components. IDE extensions like the [Svelte VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
+Vous pouvez utiliser TypeScript dans vos composants. Des extensions d'<span class="vo">[IDE](/docs/development#ide)</span> comme l'[extension Svelte VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) vous aideront à voir et corriger les erreurs directement dans votre éditeur, et [`svelte-check`](https://www.npmjs.com/package/svelte-check) fera la même chose en ligne de commande, que vous pouvez ajouter à votre chaîne d'intégration continue.
 
-## Setup
+## Mise en place
 
-To use TypeScript within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
+Pour utiliser TypeScript dans vos composants Svelte, vous devez ajouter un préprocesseur qui compilera le code TypeScript en JavaScript.
 
-### Using SvelteKit or Vite
+### Utiliser SvelteKit ou Vite
 
-The easiest way to get started is scaffolding a new SvelteKit project by typing `npm create svelte@latest`, following the prompts and choosing the TypeScript option.
+La façon la plus simple de démarrer avec Typescript est de créer un nouveau projet en tapant : `npm create svelte@latest`, en suivant les propositions et en choisissant l'option TypeScript.
 
 ```ts
 /// file: svelte.config.js
@@ -24,7 +24,7 @@ const config = {
 export default config;
 ```
 
-If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
+Si vous n'avez pas besoin ou ne souhaitez pas de toutes les fonctionnalités de SvelteKit, vous pouvez démarrer un projet Svelte avec Vite en tapant : `npm create vite@latest` et en choisissant l'option `svelte-ts`.
 
 ```ts
 /// file: svelte.config.js
@@ -37,17 +37,17 @@ const config = {
 export default config;
 ```
 
-In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
+Dans les deux cas, un fichier `svelte.config.js` avec `vitePreprocess` sera ajouté. Vite et SvelteKit liront ce fichier de configuration.
 
-### Other build tools
+### Autres outils de compilation
 
-If you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). If you're starting a new project, you can also use the [rollup](https://github.com/sveltejs/template) or [webpack](https://github.com/sveltejs/template-webpack) template to scaffold the setup from a script.
+Si vous utilisez d'autres outils comme Rollup ou Webpack, installez leurs <span class="vo">[plugins](/docs/development#plugin)</span> Svelte respectifs. Pour Rollup, il s'agit de [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) et pour Webpack, c'est [svelte-loader](https://github.com/sveltejs/svelte-loader). Dans les deux cas, vous devez installer `typescript` et `svelte-preprocess` et ajouter le préprocesseur à la configuration du plugin (voir les documentations respectives). Si vous démarrez un nouveau projet, vous pouvez utiliser le [template rollup](https://github.com/sveltejs/template) ou le [template webpack](https://github.com/sveltejs/template-webpack) pour configurer votre projet.
 
-> If you're starting a new project, we recommend using SvelteKit or Vite instead
+> Si vous démarrez un nouveau projet, nous vous recommandons plutôt d'utiliser SvelteKit ou Vite.
 
 ## `<script lang="ts">`
 
-To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
+Pour utiliser TypeScript dans vos composants Svelte, ajoutez `lang="ts"` au tag `script` :
 
 ```svelte
 <script lang="ts">
@@ -61,7 +61,7 @@ To use TypeScript inside your Svelte components, add `lang="ts"` to your `script
 
 ### Props
 
-Props can be typed directly on the `export let` statement:
+Les <span class="vo">[props](/docs/sveltejs#props)</span> peuvent directement être typées sur l'instruction `export let` :
 
 ```svelte
 <script lang="ts">
@@ -71,7 +71,7 @@ Props can be typed directly on the `export let` statement:
 
 ### Slots
 
-Slot and slot prop types are inferred from the types of the slot props passed to them:
+Les <span class="vo">[slots](/docs/sveltejs#slot)</span> et les types de leurs <span class="vo">[props](/docs/sveltejs#props)</span> sont déduits des types des props qui leurs sont passées :
 
 ```svelte
 <script lang="ts">
@@ -80,67 +80,67 @@ Slot and slot prop types are inferred from the types of the slot props passed to
 
 <slot {name} />
 
-<!-- Later -->
+<!-- Ailleurs -->
 <Comp let:name>
-	<!--    ^ Inferred as string -->
+	<!--    ^ Déduit comme string -->
 	{name}
 </Comp>
 ```
 
 ### Events
 
-Events can be typed with `createEventDispatcher`:
+Les événements peuvent être typés avec `createEventDispatcher` :
 
 ```svelte
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher<{
-		event: null; // does not accept a payload
-		click: string; // has a required string payload
-		type: string | null; // has an optional string payload
+		event: null; // n'accepte pas d'argument
+		click: string; // contient obligatoirement une string
+		type: string | null; // peut contenir une string ou être non défini
 	}>();
 
 	function handleClick() {
 		dispatch('event');
-		dispatch('click', 'hello');
+		dispatch('click', 'Salut');
 	}
 
 	function handleType() {
 		dispatch('event');
-		dispatch('type', Math.random() > 0.5 ? 'world' : null);
+		dispatch('type', Math.random() > 0.5 ? 'tout le monde' : null);
 	}
 </script>
 
-<button on:click={handleClick} on:keydown={handleType}>Click</button>
+<button on:click={handleClick} on:keydown={handleType}>Clic</button>
 ```
 
-## Enhancing built-in DOM types
+## Surcharge des types de DOM natifs
 
-Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
+Svelte fournit des types aussi proche que possible pour chaque élément HTML du <span class="vo">[DOM](/docs/web#dom)</span> qui existe. Parfois, vous voudrez utiliser des attributs expérimentaux ou des événements personnalisés. Dans ces cas, TypeScript lèvera une erreur de type, en indiquant qu'il ne connaît pas ces types. S'il s'agit d'un attribut ou événement standard et non expérimental, il se peut tout à fait que ce soit un type manquant dans [le typage HTML de Svelte](https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts). Dans ce cas, vous êtes invité•e à ouvrir une <span class="vo">[issue](/docs/development#issue)</span> ou une <span class="vo">[PR](/docs/development#pull-request)</span> pour le corriger.
 
-In case this is a custom or experimental attribute/event, you can enhance the typings like this:
+S'il s'agit d'un attribut ou d'un événement expérimental ou personnalisé, vous pouvez étendre le typage comme suit :
 
 ```ts
-/// file: additional-svelte-typings.d.ts
+/// fichier: additional-svelte-typings.d.ts
 declare namespace svelteHTML {
-	// enhance elements
+	// extension de type pour un élément
 	interface IntrinsicElements {
 		'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
 	}
-	// enhance attributes
+	// extension de type pour un attribut
 	interface HTMLAttributes<T> {
-		// If you want to use on:beforeinstallprompt
+		// Si vous voulez utiliser on:beforeinstallprompt
 		'on:beforeinstallprompt'?: (event: any) => any;
-		// If you want to use myCustomAttribute={..} (note: all lowercase)
-		mycustomattribute?: any; // You can replace any with something more specific if you like
+		// Si vous voulez utiliser myCustomAttribute={..} (note: tout en minuscule)
+		mycustomattribute?: any; // Vous pouvez remplacer any par quelque chose de plus précis si vous le souhaitez
 	}
 }
 ```
 
-Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
+Ensuite, assurez vous que les fichiers `d.ts` soient référencés dans `tsconfig.json`. Si vous lisez quelque chose comme : `"include": ["src/**/*"]` et vos fichiers `d.ts` sont dans votre dossier `src`, ça devrait marcher. Vous devrez peut-être relancer votre serveur pour que le changement prenne effet.
 
-Since Svelte version 4.2 / `svelte-check` version 3.5 / VS Code extension version 107.10.0 you can also declare the typings by augmenting the `svelte/elements` module like this:
+Depuis Svelte version 4.2 / `svelte-check` version 3.5 / l'extension VSCode version 107.10.0, vous pouvez aussi déclarer les types en étendant le module `svelte/elements` comme ceci :
 
 ```ts
 /// file: additional-svelte-typings.d.ts
@@ -151,52 +151,52 @@ declare module 'svelte/elements' {
 		'custom-button': HTMLButtonAttributes;
 	}
 
-	// allows for more granular control over what element to add the typings to
+	// permet un contrôle plus fin sur l'élément auquel vous ajoutez les types
 	export interface HTMLButtonAttributes {
-		veryexperimentalattribute?: string;
+			veryexperimentalattribute?: string;
 	}
 }
 
-export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented
+export {}; // assure que ceci n'est pas un module "ambiant", sinon les types seront écrasés au lieu d'être augmentés
 ```
 
-## Experimental advanced typings
+## Typings avancés expérimentaux
 
-A few features are missing from taking full advantage of TypeScript in more advanced use cases like typing that a component implements a certain interface, explicitly typing slots, or using generics. These things are possible using experimental advanced type capabilities. See [this RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) for more information on how to make use of them.
+Quelques fonctionnalités sont manquantes pour bénéficier de tous les avantages de TypeScript dans des cas plus avancés, comme pour typer qu'un composant étend une interface, pour typer les <span class="vo">[slots](/docs/sveltejs#slot)</span> ou pour utiliser des génériques. Tout ceci est rendu possible en utilisant des fonctionnalités expérimentales avancées. Voir [la RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) pour savoir comment définir de tels typages.
 
-> The API is experimental and may change at any point
+> Cette <span class="vo">[API](/docs/development#api)</span> est expérimentale et peut changer à tout moment.
 
 ## Limitations
 
-### No TS in markup
+### Pas de TypeScript dans le code HTML
 
-You cannot use TypeScript in your template's markup. For example, the following does not work:
+Vous ne pouvez pas utiliser explicitement TypeScript dans les templates HTML. Par exemple, l'exemple suivant n'est pas possible :
 
 ```svelte
 <script lang="ts">
 	let count = 10;
 </script>
 
-<h1>Count as string: {count as string}!</h1> <!-- ❌ Does not work -->
+<h1>Count as string: {count as string}!</h1> <!-- ❌ Ne fonctionne pas -->
 {#if count > 4}
-	{@const countString: string = count} <!-- ❌ Does not work -->
+	{@const countString: string = count} <!-- ❌ Ne fonctionne pas -->
 	{countString}
 {/if}
 ```
 
-### Reactive Declarations
+### Déclarations réactives
 
-You cannot type your reactive declarations with TypeScript in the way you type a variable. For example, the following does not work:
+Vous ne pouvez pas typer les déclarations réactives avec TypeScript de la manière dont vous typeriez une variable. Par exemple, le code suivant ne fonctionne pas :
 
 ```svelte
 <script lang="ts">
 	let count = 0;
 
-	$: doubled: number = count * 2; // ❌ Does not work
+	$: doubled: number = count * 2; // ❌ Ne fonctionne pas
 </script>
 ```
 
-You cannot add a `: TYPE` because it's invalid syntax in this position. Instead, you can move the definition to a `let` statement just above:
+Vous ne pouvez pas utiliser `: TYPE` car cela résulte en une syntaxe invalide. À la place, vous pouvez déplacer le typage sur une instruction `let` juste au dessus :
 
 ```svelte
 <script lang="ts">
diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/05-misc/04-v4-migration-guide.md
index 640feb1f82..180c2d7c7d 100644
--- a/documentation/docs/05-misc/04-v4-migration-guide.md
+++ b/documentation/docs/05-misc/04-v4-migration-guide.md
@@ -1,37 +1,38 @@
 ---
-title: Svelte 4 migration guide
+title: Guide de migration Svelte 4
 ---
 
-This migration guide provides an overview of how to migrate from Svelte version 3 to 4. See the linked PRs for more details about each change. Use the migration script to migrate some of these automatically: `npx svelte-migrate@latest svelte-4`
+Ce guide de migration fournit un aperçu de la manière dont vous devez migrer une application en Svelte 3 vers Svelte 4. Allez voir les <span class="vo">[PRs](/docs/development#pull-request)</span> associées pour plus de détails au sujet de chaque changement. Utilisez le script de migration pour migrer certains de ces changements automatiquement : `npx svelte-migrate@latest svelte-4`.
 
-If you're a library author, consider whether to only support Svelte 4 or if it's possible to support Svelte 3 too. Since most of the breaking changes don't affect many people, this may be easily possible. Also remember to update the version range in your `peerDependencies`.
+Si vous êtes l'auteur d'une librairie, considérez bien le choix de ne supporter que Svelte 4 ou, si cela est possible, de continuer à supporter Svelte 3 également. Comme la plupart des changements non réversibles n'affectent que peu de personnes, cela est facilement faisable la plupart du temps. Enfin, n'oubliez pas de mettre à jour la plage de versions des `peerDependencies`.
 
-## Minimum version requirements
+## Exigences minimales pour Svelte 4
 
-- Upgrade to Node 16 or higher. Earlier versions are no longer supported. ([#8566](https://github.com/sveltejs/svelte/issues/8566))
-- If you are using SvelteKit, upgrade to 1.20.4 or newer ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172))
-- If you are using Vite without SvelteKit, upgrade to `vite-plugin-svelte` 2.4.1 or newer ([#8516](https://github.com/sveltejs/svelte/issues/8516))
-- If you are using webpack, upgrade to webpack 5 or higher and `svelte-loader` 3.1.8 or higher. Earlier versions are no longer supported. ([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
-- If you are using Rollup, upgrade to `rollup-plugin-svelte` 7.1.5 or higher ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
-- If you are using TypeScript, upgrade to TypeScript 5 or higher. Lower versions might still work, but no guarantees are made about that. ([#8488](https://github.com/sveltejs/svelte/issues/8488))
+- Mettez à jour vers Node 16 ou plus. Les versions précédentes ne sont plus supportées. ([#8566](https://github.com/sveltejs/svelte/issues/8566))
+- Si vous utilisez SvelteKit, mettez à jour sa version à 1.20.4 ou plus ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172))
+- Si vous utilisez Vite sans SvelteKit, mettez à jour la version de `vite-plugin-svelte` à 2.4.1 ou plus ([#8516](https://github.com/sveltejs/svelte/issues/8516))
+- Si vous utilisez webpack, mettez à jour sa version à 5 ou plus et `svelte-loader` à 3.1.8 ou plus. Les versions précédentes ne sont plus supportées. ([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
+- Si vous utilisez Rollup, mettez à jour la version de `rollup-plugin-svelte` à 7.1.5 ou plus ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
+- Si vous utilisez TypeScript, mettez à jour sa version à 5.0.0 ou plus. Les versions précédentes pourront probablement toujours fonctionner, mais nous ne pouvons pas le garantir. ([#8488](https://github.com/sveltejs/svelte/issues/8488))
 
-## Browser conditions for bundlers
+## Conditions de navigateurs pour les bundlers
 
-Bundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration.
-- For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details
-- For wepback this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details
+Les <span class="vo">[bundlers](/docs/web#bundler-packager)</span> doivent maintenant spécifier la condition `browser` lorsque vous créez un bundler frontend pour le navigateur. SvelteKit et Vite se chargeront de le préciser pour vous automatiquement. Si vous utilisez un autre bundler, il se peut que les <span class="vo">[callbacks](/docs/development#callback)</span> de cycle de vie comme `onMount` ne s'exécutent pas correctement, et vous devrez mettre à jour la configuration de la résolution de module.
+
+- Pour Rollup, vous pouvez faire cela dans le <span class="vo">[plugin](/docs/development#plugin)</span> `@rollup/plugin-node-resolve` en choisissant `browser: true` dans ses options. Voir la documentation de [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) pour plus de détail
+- Pour Webpack, vous pouvez faire cela en ajoutant `"browser"` au tableau `conditionNames`. Vous pourriez aussi avoir à mettre à jour votre configuration d'`alias`, si vous vous en servez. Voir la documentation de [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) pour plus de détail
 
 ([#8516](https://github.com/sveltejs/svelte/issues/8516))
 
-## Removal of CJS related output
+## Suppression des sorties de build en CJS
 
-Svelte no longer supports the CommonJS (CJS) format for compiler output and has also removed the `svelte/register` hook and the CJS runtime version. If you need to stay on the CJS output format, consider using a bundler to convert Svelte's ESM output to CJS in a post-build step. ([#8613](https://github.com/sveltejs/svelte/issues/8613))
+Svelte ne supporte plus le format CommonJS (CJS) comme format de sortie de la compilation. L'<span class="vo">[API](/docs/development#api)</span> `svelte/register` a été retirée ainsi que la version de runtime CJS. Si vous avez besoin de garder le format de sortie CJS, utilisez un <span class="vo">[bundler](/docs/web#bundler-packager)</span> pour convertir la sortie ESM en CJS avec une étape de post-build. ([#8613](https://github.com/sveltejs/svelte/issues/8613))
 
-## Stricter types for Svelte functions
+## Typage plus strict pour les fonctions Svelte
 
-There are now stricter types for `createEventDispatcher`, `Action`, `ActionReturn`, and `onMount`:
+Il y a maintenant des types plus stricts pour `createEventDispatcher`, `Action`, `ActionReturn` et `onMount` :
 
-- `createEventDispatcher` now supports specifying that a payload is optional, required, or non-existent, and the call sites are checked accordingly ([#7224](https://github.com/sveltejs/svelte/issues/7224))
+- `createEventDispatcher` supporte maintenant de pouvoir spécifier que son argument soit optionnel, obligatoire, ou simplement non défini ; les appels seront vérifiés en conséquence ([#7224](https://github.com/sveltejs/svelte/issues/7224)) :
 
 ```ts
 // @errors: 2554 2345
@@ -45,31 +46,31 @@ const dispatch = createEventDispatcher<{
 
 // Svelte version 3:
 dispatch('optional');
-dispatch('required'); // I can still omit the detail argument
-dispatch('noArgument', 'surprise'); // I can still add a detail argument
+dispatch('required'); // Il est possible de ne pas spécifier l'argument de détail
+dispatch('noArgument', 'surprise'); // Il est possible de spécifier un argument de détail
 
-// Svelte version 4 using TypeScript strict mode:
+// Svelte version 4 en utilisant le TypeScript avec le mode strict:
 dispatch('optional');
-dispatch('required'); // error, missing argument
-dispatch('noArgument', 'surprise'); // error, cannot pass an argument
+dispatch('required'); // erreur, argument manquant (error, missing argument)
+dispatch('noArgument', 'surprise'); // erreur, il n'est pas possible de passer un argument (error, cannot pass an argument)
 ```
 
-- `Action` and `ActionReturn` have a default parameter type of `undefined` now, which means you need to type the generic if you want to specify that this action receives a parameter. The migration script will migrate this automatically ([#7442](https://github.com/sveltejs/svelte/pull/7442))
+- `Action` et `ActionReturn` ont maintenant un type d'argument par défaut à `undefined`, ce qui signifie que vous devez typer le <span class="vo">[generic](/docs/javascript#generic)</span> si vous voulez spécifier que cette action reçoit un paramètre. Le script de migration prendra cette règle en compte automatiquement ([#7442](https://github.com/sveltejs/svelte/pull/7442))
 
 ```diff
--const action: Action = (node, params) => { .. } // this is now an error if you use params in any way
-+const action: Action<HTMLElement, string> = (node, params) => { .. } // params is of type string
+-const action: Action = (node, params) => { .. } // ceci lèvera maintenant une erreur si vous utilisez un paramètre
++const action: Action<HTMLElement, string> = (node, params) => { .. } // params est maintenant de type string
 ```
 
-- `onMount` now shows a type error if you return a function asynchronously from it, because this is likely a bug in your code where you expect the callback to be called on destroy, which it will only do for synchronously returned functions ([#8136](https://github.com/sveltejs/svelte/issues/8136))
+- `onMount` affichera maintenant une erreur de typage si vous retournez une fonction asynchrone. En effet, cela est probablement un bug dans votre code pour lequel vous vous attendez à ce que le <span class="vo">[callback](/docs/development#callback)</span> soit appelé à la destruction du composant, ce qui n'est le cas que pour des fonctions synchrones ([#8136](https://github.com/sveltejs/svelte/issues/8136))
 
 ```diff
-// Example where this change reveals an actual bug
+// Exemple pour lequel ce changement révèle un vrai bug
 onMount(
-- // someCleanup() not called because function handed to onMount is async
+- // someCleanup() n'est pas appelé car la fonction passée à onMount est asynchrone
 - async () => {
 -   const something = await foo();
-+ // someCleanup() is called because function handed to onMount is sync
++ // someCleanup() est appelé car la fonction passée à onMount est synchrone
 + () => {
 +  foo().then(something =>  ..
    // ..
@@ -78,20 +79,20 @@ onMount(
 );
 ```
 
-## Custom Elements with Svelte
+## Les Custom Elements avec Svelte
 
-The creation of custom elements with Svelte has been overhauled and significantly improved. The `tag` option is deprecated in favor of the new `customElement` option:
+La création des <span class="vo">[Custom Elements (ou Web Components)](/docs/web#web-component)</span> avec Svelte a complètement été repensée et significativement améliorée. L'option `tag` a été dépréciée en faveur de la nouvelle option `customElement` :
 
 ```diff
 -<svelte:options tag="my-component" />
 +<svelte:options customElement="my-component" />
 ```
 
-This change was made to allow [more configurability](custom-elements-api#component-options) for advanced use cases. The migration script will adjust your code automatically. The update timing of properties has changed slightly as well. ([#8457](https://github.com/sveltejs/svelte/issues/8457))
+Ce changement est intervenu pour permettre [une meilleure configuration](custom-elements-api#options-de-composant) pour des cas d'usages avancés. Le code de migration ajustera votre code automatiquement. La temporalité des changements des propriétés a également légèrement changée. ([#8457](https://github.com/sveltejs/svelte/issues/8457))
 
-## SvelteComponentTyped is deprecated
+## SvelteComponentTyped est déprécié
 
-`SvelteComponentTyped` is deprecated, as `SvelteComponent` now has all its typing capabilities. Replace all instances of `SvelteComponentTyped` with `SvelteComponent`.
+`SvelteComponentTyped` est déprécié, car `SvelteComponent` contient tout le typage nécessaire. Remplacez toutes les instances de `SvelteComponentTyped` par `SvelteComponent`.
 
 ```diff
 - import { SvelteComponentTyped } from 'svelte';
@@ -101,7 +102,7 @@ This change was made to allow [more configurability](custom-elements-api#compone
 + export class Foo extends SvelteComponent<{ aProp: string }> {}
 ```
 
-If you have used `SvelteComponent` as the component instance type previously, you may see a somewhat opaque type error now, which is solved by changing `: typeof SvelteComponent` to `: typeof SvelteComponent<any>`.
+Si par le passé vous utilisiez `SvelteComponent` comme type d'instance de composant, vous pourriez maintenant voir une erreur de type obscure, qui est résolue en changeant ` : typeof SvelteComponent` par ` : typeof SvelteComponent<any>`.
 
 ```diff
 <script>
@@ -117,30 +118,30 @@ If you have used `SvelteComponent` as the component instance type previously, yo
   }
 </script>
 
-<button on:click={choseRandomly}>random</button>
+<button on:click={choseRandomly}>aléatoire</button>
 <svelte:element this={component} />
 ```
 
-The migration script will do both automatically for you. ([#8512](https://github.com/sveltejs/svelte/issues/8512))
+Le script de migration changera les deux cas automatiquement pour vous. ([#8512](https://github.com/sveltejs/svelte/issues/8512))
 
-## Transitions are local by default
+## Les transitions sont locales par défaut
 
-Transitions are now local by default to prevent confusion around page navigations. "local" means that a transition will not play if it's within a nested control flow block (`each/if/await/key`) and not the direct parent block but a block above it is created/destroyed. In the following example, the `slide` intro animation will only play when `success` goes from `false` to `true`, but it will _not_ play when `show` goes from `false` to `true`:
+Les transitions sont désormais locales par défaut afin d'éviter toute confusion lors de la navigation dans les pages. "Local" signifie qu'une transition ne sera pas jouée si elle se trouve dans un bloc de contrôle imbriqué (`each/if/await/key`) et non dans le bloc parent direct, mais qu'un bloc au-dessus soit créé ou détruit. Dans l'exemple suivant, l'animation d'introduction `slide` ne sera jouée que lorsque `success` passera de `false` à `true`, mais elle ne sera _pas_ jouée lorsque `show` passera de `false` à `true` :
 
 ```svelte
 {#if show}
 	...
 	{#if success}
-		<p in:slide>Success</p>
+		<p in:slide>Succès</p>
 	{/each}
 {/if}
 ```
 
-To make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
+Pour rendre les transitions globales, ajoutez le modificateur `|global` - elles seront alors jouées lorsque _n'importe quel_ bloc de flux de contrôle ci-dessus est créé ou détruit. Le script de migration le fera automatiquement pour vous. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
 
-## Default slot bindings
+## Les binding de slot par défaut
 
-Default slot bindings are no longer exposed to named slots and vice versa:
+Les liaisons de <span class="vo">[slots](/docs/sveltejs#slot)</span> par défaut ne sont plus exposées aux slots nommés et vice versa :
 
 ```svelte
 <script>
@@ -149,19 +150,19 @@ Default slot bindings are no longer exposed to named slots and vice versa:
 
 <Nested let:count>
 	<p>
-		count in default slot - is available: {count}
+		count dans un slot par défaut - est accessible : {count}
 	</p>
 	<p slot="bar">
-		count in bar slot - is not available: {count}
+		count dans un slot nommé (bar) - n'est pas accessible: {count}
 	</p>
 </Nested>
 ```
 
-This makes slot bindings more consistent as the behavior is undefined when for example the default slot is from a list and the named slot is not. ([#6049](https://github.com/sveltejs/svelte/issues/6049))
+Cela rend les liaisons de <span class="vo">[slots](/docs/sveltejs#slot)</span> plus cohérentes car le comportement est indéfini lorsque, par exemple, le slot par défaut provient d'une liste et que le slot nommé n'en fait pas partie. ([#6049](https://github.com/sveltejs/svelte/issues/6049))
 
-## Preprocessors
+## Préprocesseurs
 
-The order in which preprocessors are applied has changed. Now, preprocessors are executed in order, and within one group, the order is markup, script, style.
+L'ordre dans lequel les préprocesseurs sont appliqués a changé. Désormais, les préprocesseurs sont exécutés dans l'ordre et, au sein d'un même groupe, l'ordre est le suivant : balisage, script, style.
 
 ```js
 // @errors: 2304
@@ -215,7 +216,7 @@ const { code } = await preprocess(
 // style-2
 ```
 
-This could affect you for example if you are using `MDsveX` - in which case you should make sure it comes before any script or style preprocessor.
+Ceci peut vous affecter si vous utilisez par exemple `MDsveX` - pour lequel vous devez vous assurer qu'il vient avant n'importe quel préprocesseur de script ou de style :
 
 ```diff
 preprocess: [
@@ -226,19 +227,19 @@ preprocess: [
 ]
 ```
 
-Each preprocessor must also have a name. ([#8618](https://github.com/sveltejs/svelte/issues/8618))
+Chaque préprocesseur doit également avoir un nom. ([#8618](https://github.com/sveltejs/svelte/issues/8618))
 
-## New eslint package
+## Nouvelle librairie eslint
 
-`eslint-plugin-svelte3` is deprecated. It may still work with Svelte 4 but we make no guarantees about that. We recommend switching to our new package [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte). See [this Github post](https://github.com/sveltejs/kit/issues/10242#issuecomment-1610798405) for an instruction how to migrate. Alternatively, you can create a new project using `npm create svelte@latest`, select the eslint (and possibly TypeScript) option and then copy over the related files into your existing project.
+`eslint-plugin-svelte3` est déprécié. Il est possible qu'il fonctionne encore avec Svelte 4, mais nous ne le garantissons pas. Nous recommandons de passer à notre nouvelle librairie [eslint-plugin-svelte] (https://github.com/sveltejs/eslint-plugin-svelte). Voir [ce ticket Github](https://github.com/sveltejs/kit/issues/10242#issuecomment-1610798405) pour des instructions sur la façon de migrer. Alternativement, vous pouvez créer un nouveau projet en utilisant `npm create svelte@latest`, sélectionner l'option eslint (et éventuellement TypeScript) et ensuite copier les fichiers associés dans votre projet existant.
 
-## Other breaking changes
+## Autres changements majeurs
 
-- the `inert` attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628))
-- the runtime now uses `classList.toggle(name, boolean)` which may not work in very old browsers. Consider using a [polyfill](https://github.com/eligrey/classList.js) if you need to support these browsers. ([#8629](https://github.com/sveltejs/svelte/issues/8629))
-- the runtime now uses the `CustomEvent` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775))
-- people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750))
-- `derived` will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947))
-- type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5
-- Removal of DOM nodes is now batched which slightly changes its order, which might affect the order of events fired if you're using a `MutationObserver` on these elements ([#8763](https://github.com/sveltejs/svelte/pull/8763))
-- if you enhanced the global typings through the `svelte.JSX` namespace before, you need to migrate this to use the `svelteHTML` namespace. Similarly if you used the `svelte.JSX` namespace to use type definitions from it, you need to migrate those to use the types from `svelte/elements` instead. You can find more information about what to do [here](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings)
+- l'attribut `inert` est maintenant appliqué aux éléments sortants pour les rendre invisibles aux technologies d'assistance et empêcher l'interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628))
+- le <span class="vo">[runtime](/docs/development#runtime)</span> utilise maintenant `classList.toggle(name, boolean)` qui peut ne pas fonctionner dans les très vieux navigateurs. Envisagez d'utiliser un [polyfill](https://github.com/eligrey/classList.js) si vous avez besoin de supporter ces navigateurs. ([#8629](https://github.com/sveltejs/svelte/issues/8629))
+- le <span class="vo">[runtime](/docs/development#runtime)</span> utilise maintenant le constructeur `CustomEvent` qui peut ne pas fonctionner dans les très vieux navigateurs. Envisagez d'utiliser un [polyfill] (https://github.com/theftprevention/event-constructor-polyfill/tree/master) si vous avez besoin de supporter ces navigateurs. ([#8775](https://github.com/sveltejs/svelte/pull/8775))
+- Les personnes qui implémentent leurs propres <span class="vo">[stores](/docs/sveltejs#store)</span> en utilisant l'interface `StartStopNotifier` (qui est passée à la fonction create de `writable` etc) de `svelte/store` doivent maintenant passer une fonction de mise à jour en plus de la fonction set. Cela n'a aucun effet sur les personnes qui utilisent des stores ou qui créent des stores en utilisant les stores Svelte existants. ([#6750](https://github.com/sveltejs/svelte/issues/6750))
+- `derived` lancera maintenant une erreur sur les valeurs <span class="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span> au lieu des <span class="vo">[stores](/docs/sveltejs#store)</span> qui lui sont passés. ([#7947](https://github.com/sveltejs/svelte/issues/7947))
+- les définitions de type pour `svelte/internal` ont été supprimées pour décourager encore plus l'utilisation de ces méthodes internes qui ne sont pas des <span class="vo">[API](/docs/development#api)</span> publiques. La plupart de ces éléments seront probablement modifiés pour Svelte 5.
+- La suppression des noeuds du <span class="vo">[DOM](/docs/web#dom)</span> se fait maintenant par lots, ce qui modifie légèrement l'ordre, ce qui peut affecter l'ordre des événements déclenchés si vous utilisez un `MutationObserver` sur ces éléments ([#8763](https://github.com/sveltejs/svelte/pull/8763))
+- si vous avez étendu les typages globaux à travers le <span class="vo">[namespace](/docs/development#namespace)</span> `svelte.JSX` auparavant, vous devez les migrer pour utiliser le namespace `svelteHTML`. De même, si vous avez utilisé le namespace `svelte.JSX` pour utiliser des définitions de types, vous devez les migrer pour utiliser les types de `svelte/elements` à la place. Vous pouvez trouver plus d'informations sur ce qu'il faut faire [ici](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings)
diff --git a/documentation/docs/05-misc/meta.json b/documentation/docs/05-misc/meta.json
index c4f984c9ac..e6a035829a 100644
--- a/documentation/docs/05-misc/meta.json
+++ b/documentation/docs/05-misc/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Misc"
+	"title": "Divers"
 }
diff --git a/documentation/docs/06-legacy/01-svelte-register.md b/documentation/docs/06-legacy/01-svelte-register.md
index 38a0c01983..6d1a46fb5f 100644
--- a/documentation/docs/06-legacy/01-svelte-register.md
+++ b/documentation/docs/06-legacy/01-svelte-register.md
@@ -2,9 +2,9 @@
 title: 'svelte/register'
 ---
 
-> This API is removed in Svelte 4. `require` hooks are deprecated and current Node versions understand ESM. Use a bundler like Vite or our full-stack framework [SvelteKit](https://kit.svelte.dev) instead to create JavaScript modules from Svelte components.
+> Cette <span class="vo">[API](/docs/development#api)</span> a été retirée de Svelte 4. La fonction `require` est maintenant dépréciée puisque les versions actuelles de Node comprennent le format ESM. Utilisez plutôt un <span class="vo">[bundler](/docs/web#bundler-packager)</span> comme Vite ou le <span class="vo">[framework](/docs/web#framework)</span> [SvelteKit](PUBLIC_KIT_SITE_URL) pour créer des modules JavaScript à partir de composants Svelte.
 
-To render Svelte components in Node.js without bundling, use `require('svelte/register')`. After that, you can use `require` to include any `.svelte` file.
+Pour rendre des composants Svelte en Node.js sans compilation, utilisez `require('svelte/register')`. Vous pourrez alors utiliser la fonction `require` pour inclure n'importe quel fichier `.svelte`.
 
 ```js
 // @noErrors
@@ -17,14 +17,14 @@ const App = require('./App.svelte').default;
 const { html, css, head } = App.render({ answer: 42 });
 ```
 
-> The `.default` is necessary because we're converting from native JavaScript modules to the CommonJS modules recognised by Node. Note that if your component imports JavaScript modules, they will fail to load in Node and you will need to use a bundler instead.
+> Le `.default` est nécessaire parce que nous convertissons des modules JavaScript natifs en modules CommonJS interprétés par Node. Notez cependant que si vos composent importent des modules JavaScript, ils ne réussirons pas à les charger avec Node et vous devrez utiliser un <span class="vo">[bundler](/docs/web#bundler-packager)</span>.
 
-To set compile options, or to use a custom file extension, call the `register` hook as a function:
+Pour définir des options de compilations ou utiliser une extension de fichier personnalisée, appelez le retour de la fonction `register()` comme une fonction :
 
 ```js
 // @noErrors
 require('svelte/register')({
-	extensions: ['.customextension'], // defaults to ['.html', '.svelte']
+	extensions: ['.customextension'], // par défaut ['.html', '.svelte']
 	preserveComments: true
 });
 ```
diff --git a/documentation/docs/06-legacy/meta.json b/documentation/docs/06-legacy/meta.json
index ed35adfd64..4206c793d8 100644
--- a/documentation/docs/06-legacy/meta.json
+++ b/documentation/docs/06-legacy/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Legacy"
+	"title": "Ancienne version"
 }
diff --git a/documentation/docs/07-glossary/01-development.md b/documentation/docs/07-glossary/01-development.md
new file mode 100644
index 0000000000..4ee33402c9
--- /dev/null
+++ b/documentation/docs/07-glossary/01-development.md
@@ -0,0 +1,296 @@
+---
+title: 'Développement'
+---
+
+Voici quelques informations sur les anglicismes usuels utilisés dans un contexte de développement informatique.
+
+Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
+
+> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
+
+## API
+
+Une API est une interface de programmation d'application. Il s'agit d'un ensemble de **points d'accès** publics ou privés basés sur le protocol HTTP et qui répondent des données, généralement exprimé en JSON.
+
+Une API peut suivre une architecture logicielle particulière. Les plus connues sont le REST (_Representational State Transfer_) ou le GraphQL (_Graph Query Language_).
+
+Dans le cadre de SvelteKit, il est possible de [définir une API publique](PUBLIC_KIT_SITE_URL/docs/routing#server) en définissant un fichier `+server.js` dans le dossier `routes`.
+
+## AST
+
+Un arbre de la syntaxe abstraite (_Abstract Syntax Tree_ ou _AST_) est un format de représentation de certains données sous forme d'arbre dont les nœuds internes et les feuilles (ou nœuds externes) possèdent des caractéristiques particulières.
+
+Svelte utilise le format _AST_ comme intermédiaire entre un composant Svelte et le code JavaScript natif interprété par le navigateur web.
+
+## Bug
+
+Vous le savez très certainement, un _bug_ (["insecte"](https://fr.wikipedia.org/wiki/Bug_(informatique)#/media/Fichier:First_Computer_Bug,_1945.jpg) en anglais) est une erreur ou un problème qui empêche le bon fonctionnement d'un logiciel.
+
+Il est courant d'utiliser un _debugger_ ou "débuggueur" pour aider à la résolution de ces _bugs_.
+
+Le mot francisé est "bogue", mais il semble que personne ne s'en serve.
+
+## Build
+
+Un _build_ est l'ensemble de fichiers produits par le <span class="vo">[bundler](/docs/web#bundler-packager)</span>. C'est le plus souvent ce qui sera utilisé pour déployer l'application en production.
+
+## Buffer
+
+> Bientôt...
+
+## Callback
+
+Un _callback_ (ou fonction de rappel) est une fonction qui sera appelée lorsqu'un certain travail est terminé.
+
+C'est en général une fonction passée en argument à une autre fonction pour que cette dernière s'en serve lorsque nécessaire.
+
+Par exemple on peut utiliser un _callback_ pour afficher un message lorsqu'un téléchargement est terminé.
+```ts
+function afficheCoucou() {
+	console.log('Coucou');
+}
+
+function chargeLaDonnée(callback: () => void) {
+	// je charge la donnée, peu importe comment, puis...
+	callback();
+}
+
+// ici, afficheCoucou est utilisée en tant que callback
+chargeLaDonnée(afficheCoucou);
+```
+
+## CI
+
+> Bientôt...
+
+## CLI
+
+_CLI_ est l'acronyme de "Command Line Interface" ("Interface en ligne de commande"), et désigne l'<span class="vo">[API](#api)</span> d'un programme que l'on lance en ligne de commande.
+
+Il s'agit donc de toutes les interactions possibles avec un programme que vous allez lancer en entrant des instructions dans votre terminal.
+
+Par exemple, [npm](https://www.npmjs.com/) est un programme en ligne de commande, et possède donc un CLI. [Git](https://git-scm.com/book/fr/v2/D%C3%A9marrage-rapide-La-ligne-de-commande) est un autre exemple de programme pouvant s'exécuter via un CLI.
+
+```bash
+npm install
+npm publish
+
+git init
+git clone
+git branch
+...
+```
+
+## Commit
+
+> Bientôt...
+
+## Debugger
+
+Un _debugger_ est un outil logiciel aidant à la résolution de <span class="vo">[bugs](#bug)</span>.
+
+## End to end
+
+L'adjectif bout en bout (_end to end_) s'applique à un processus qui soit complet (en opposition avec un processus unitaire).
+
+Il s'applique généralement aux tests _end to end_ qui permettent de tester l'ensemble de l'application (IHM et serveur) sans simuler tout ou partie du système.
+
+Dans le cadre de SvelteKit, il fait également référence au typage _end to end_, permettant de récupérer les types des données retournées par les méthodes `load()` des `layout` et des `routes` dans la variable `data` de la route correspondante.
+
+## Flag
+
+> Bientôt...
+
+## Getter / Setter
+
+Un _getter_ est une fonction qui permet de lire une valeur.
+Un _setter_ est une fonction qui permet d'écrire une valeur.
+
+Ils vont souvent de pair, mais peuvent exister indépendamment de l'autre.
+Ils sont en général utilisés pour éviter d'exposer les propriétés internes d'un objet et permet à l'objet de faire des vérifications ou des  supplémentaires sur les valeurs.
+
+Un _setter_ pourrait être utilisé pour la propriété `nom` pour forcer la mise en majuscule
+```ts
+class Personne {
+	#nom = 'Marie';
+
+	// setter
+	set nom(n: string) {
+		this.#nom = n.toUpperCase()
+	}
+
+	// getter
+	get nom() {
+		return this.nom
+	}
+}
+```
+
+Vous trouverez plus de détails sur les [getters](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/get) et [setters](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/set) en JavaScript dans la documentation de MDN.
+
+## Hash
+
+Un _hash_ est le résultat d'une fonction de hachage (ou _hashing_). Une fonction de hachage est une fonction qui associe des valeurs de taille fixe à des données de taille arbitraire. Les _hash_ ont la particularité d'être statistiquement uniques, leur permettant d'être utilisés dans des applications d'indexation (pour une donnée, un hash unique est calculé et est stockée dans une table d'indexation).
+
+Dans le cadre de Svelte, les _hash_ sont utilisés pour générer les noms de classes CSS.
+
+## IDE
+
+Un environnement de développement intégré (_Integrated Development Environment) est un logiciel intégrant plusieurs outils facilitant le développement informatique. Parmi les plus célèbres dans le monde web: VSCode et WebStorm.
+
+## Intellisense
+
+Le terme _intelliSense_ fait référence à des aides à la saisie semi-automatique de code qui comprend un certain nombre de fonctionnalités : autocomplétion, liste des propriétés, etc. Ces outils peuvent être intégré aux <span class="vo">[IDE](/docs/development#ide)</span> ou ajouté via des <span class="vo">[plugins](/docs/development#plugin)</span>. Il sont dépendants du langage de programmation et peuvent souvent être fortement configurés.
+
+## Issue
+
+Une _issue_ (qui signifie "problème" en anglais) est une note sur un dépôt à propos de quelque chose qui nécessite une attention particulière. Il peut s'agir d'un bogue, d'une demande de fonctionnalité, d'une question ou de bien d'autres choses. Cette terminologie est très utilisée entre autres sur les sites [Github](https://github.com), [Gitlab](https://gitlab.com) et [Bitbucket](https://bitbucket.org).
+
+On parle parfois en français de "ticket".
+
+## Log
+
+Un _log_ est l'affichage d'une information lors de l'exécution d'un programme. Ils peuvent être affichées en direct, ou bien stockées dans un fichier de logs.
+
+## Monorepo
+
+> Bientôt...
+
+## Namespace
+
+Un `_namespace_` ou "espace de noms" est un espace abstrait dans lequel on peut regrouper des définitions. Cela permet de définir par exemple deux définitions ayant le même nom dans deux espaces différents, sans pour autant les confondre.
+
+Par exemple, on peut définir `sinus` dans un namespace `Math`, ainsi que dans un namespace `Corps`. Ainsi `Math.sinus` renvoie à la fonction mathématique sinus, tandis que `Corps.sinus` renvoie aux cavités nasales du corps humain.
+
+Dans le développement web, les `_namespaces_` sont souvent utilisés en TypeScript pour organiser les types.
+## Number
+
+_Number_ est le mot anglais pour "nombre". En développement informatique, il s'agit la plupart du temps d'un type de variable représentant des nombres.
+
+## Package
+
+> Bientôt...
+
+## Parser
+
+_Parser_ est un verbe représentant l'action de transformer une donnée reçue dans un format adapté à son traitement. Un cas classique dans une application web est de _parser_ une chaîne de caractères représentant un <span class="vo">[JSON](/docs/web#json)</span>, reçu en réponse d'un appel HTTP, en un objet JavaScript, plus simple à manipuler. Dans d'autres contextes, il est est également possible de _parser_ du binaire en chaîne de caractères.
+
+## Payload
+
+Une _payload_ représente la donnée utile transportée dans une communication.
+
+## Placeholder
+
+> Bientôt...
+
+## Plugin
+
+Un _plugin_ est une librairie utilitaire que l'on peut ajouter à un programme (navigateur web, <span class="vo">[IDE](/docs/development#ide)</span>, etc.) pour l'améliorer.
+
+## Pull Request
+
+Une _Pull Request_ est une demande d'intégration de nouveau code dans le code existant d'un logiciel. Ce terme est en général utilisé lorsque le logiciel est versionné avec Git.
+
+Comme <span class="vo">[issue](#issue)</span>, cette terminologie est très utilisée entre autres sur les sites [Github](https://github.com) et [Bitbucket](https://bitbucket.org). Sur [Gitlab](https://gitlab.com), on parle de _Merge Request_, qui est synonyme.
+
+## Race condition
+
+Une _race condition_, ou ["situation de compétition"](https://fr.wikipedia.org/wiki/Situation_de_comp%C3%A9tition) décrit une situation où un enchaînement d'opérations effectuées par plusieurs acteurs d'un système donne des résultats différents selon l'ordre dans lequel les acteurs effectuent leurs opérations.
+
+Il est en général préférable d'éviter d'avoir de telles situations.
+
+## Readonly
+
+On dit d'une entité qu'elle est _readonly_ lorsqu'on ne peut pas changer sa valeur une fois que celle-ci a été définie. On parle aussi de "lecture seule" en français.
+
+Ce terme est à mettre en opposition avec <span class="vo">[writable](#writable)</span>.
+
+## Runtime
+
+Un _runtime_ est un environnement d'exécution permettant d'effectuer les opérations d'un programme informatique dans un langage donné.
+
+Dans le contexte du langage JavaScript, on désigne par _runtime_ les programmes permettant l'exécution de programmes écrits en JavaScript sur un serveur. Les trois _runtime_ JavaScript les plus connus sont [NodeJS](https://nodejs.org/en), [Deno](https://deno.com), et [Bun](https://bun.sh).
+
+## Scope
+
+Un _scope_ définit la [portée](https://fr.wikipedia.org/wiki/Port%C3%A9e_(informatique)) ou les limites dans lesquelles une certaine chose est définie ou a de l'influence.
+
+On parle de la portée d'une variable en JavaScript pour désigner les limites dans lesquelles celle-ci est définie. De même, on parle de la portée d'une règle CSS pour désigner les limites dans lesquelles cette règle s'applique.
+
+## Slash
+
+Un _slash_ est simplement le caractère `/`, à ne pas confondre avec son frère jumeau _antislash_ `\`.
+
+## Stack trace
+
+Une _stack trace_, ou "trace de pile", est une liste détaillant dans l'ordre chronologique les appels de fonctions utilisés lorsqu'un programme informatique produit une erreur. Cela permet de suivre le chemin d'exécution du programme, et facilite ainsi la résolution de <span class="vo">[bugs](#bug)</span>.
+
+## String
+
+_String_ est le mot anglais pour "chaîne de caractères". En développement informatique, il s'agit la plupart du temps d'un type de variable représentant du texte.
+
+## Timestamp
+
+> Bientôt...
+
+## Thread
+
+Un _thread_, ou ["fil d'exécution"](https://fr.wikipedia.org/wiki/Thread_(informatique)) est similaire dans une certaine mesure à un processus permettant l'exécution de tâches sur un microprocesseur.
+
+JavaScript est un langage ne pouvant historiquement s'exécuter que sur un seul _thread_, mais l'arrivée récente des [Web Workers](https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API/Using_web_workers) permet d'exécuter JavaScript sur plusieurs _threads_.
+
+## Template
+
+Un _template_ désigne un modèle qui simplifie la création d'un site web, d'un logiciel, d'une application ou d'un design. Il intègre des éléments déjà préconçus et faciles à modifier pour rendre la création web plus facile et rapide.
+
+## Tooltip
+
+Un _tooltip_ est une info-bulle, c'est-à-dire un message qui peut s'afficher à l'écran dans certaines circonstances (souvent au survol du curseur) pour fournir des informations contextuelles.
+
+## Tree-shaking
+
+> Bientôt...
+
+## Warning
+
+Un _warning_ est un avertissement, moins grave qu'une erreur, mais suffisamment important pour qu'il soit porté à l'attention des personnes concernées.
+
+## Worker
+
+> Bientôt...
+
+## Workflow
+
+> Bientôt...
+
+## Wrapper
+
+Un _wrapper_ est une fonction qui "enveloppe" une autre fonction afin de lui apporter des fonctionnalités supplémentaires.
+
+On peut également le voir comme une fonction qui crée et renvoie une fonction qui se sert de la fonction d'origine.
+
+Un _wrapper_ pourrait être utilisé pour aggrémenter un message d'accueil :
+```ts
+// Fonction d'origine
+const bonjour = function (name: string): string {
+	return `Bonjour ${name}!`
+}
+bonjour("Jean") // "Bonjour Jean!"
+
+// Wrapper de la fonction
+function bonjourWrapper(original: (name: string) => string): (name: string) => string {
+	return function (name: string) {
+		return original(name) + " Comment vas-tu ?"
+	}
+}
+const nouveauBonjour = bonjourWrapper(bonjour)
+nouveauBonjour("Jean") // "Bonjour Jean! Comment vas-tu?"
+```
+
+> Par extension, un _wrapper_ désigne également un composant qui "enveloppe" une autre composant afin de lui apporter des fonctionnalités supplémentaires (style, comportement, etc.).
+
+## Writable
+
+On dit d'une entité qu'elle est _writable_ lorsqu'on peut pas changer sa valeur une fois que celle-ci a été définie. Le terme _writable_ est à mettre en opposition avec <span class="vo">[readonly](#readonly)</span>.
+
+Dans le cadre de Svelte, _writable_ fait souvent référence à un <span class="vo">[store](/docs/sveltejs#store)</span> _writable_, dont la valeur peut être mise à jour.
diff --git a/documentation/docs/07-glossary/02-web.md b/documentation/docs/07-glossary/02-web.md
new file mode 100644
index 0000000000..064fa04f7a
--- /dev/null
+++ b/documentation/docs/07-glossary/02-web.md
@@ -0,0 +1,295 @@
+---
+title: 'Web'
+---
+
+Voici quelques informations sur les angliscismes usuels utilisés dans le contexte web.
+
+Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
+
+> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
+
+## ARIA
+
+[_ARIA_](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA) est l'acronyme de "Accessible Rich Internet Applications", et a pour objectif la popularisation d'applications internet riches d'un point de vue de l'accessibilité. Il s'agit plus concrètement d'un ensemble d'attributs et de rôles HTML permettant de rendre le contenu d'une page web plus accessible.
+
+## Backend
+
+> Bientôt...
+
+## Body
+
+> Bientôt...
+
+## Bundler / Packager
+
+Un _bundler_ (ou _packager_) est un outil de développement qui permet à une application web répartie sur plusieurs fichiers sources d'être ramenée à un nombre réduit de fichiers (voir en un unique fichier).
+
+L'étape de _bundling_ est donc une sorte de compilation spécifique au contexte du web. C'est souvent lors de cette étape que l'on transforme notre code source pour l'optimiser pour le navigateur.
+
+Les transformations classiques effectuées lors d'un _bundling_ sont :
+- Typescript => Javascript
+- JSX => Javascript
+- Svelte => Javascript, HTML et CSS
+- Minification
+- ES20XX => ES6
+- Réorganisation des dossiers et fichiers
+
+> Vite et Rollup sont des exemples de _bundler_.
+
+## CDN
+
+> Bientôt...
+
+## Checkbox
+
+Une [_checkbox_](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/checkbox) est une boîte à cocher permettant à un utilisateur ou utilisatrice de faire des choix dans des formulaires.
+
+## Client-side rendering
+
+Le rendu côté client, ou _client-side rendering_ (CSR) est l'action de générer une page web avec tout ou partie des données métier dans le navigateur. Il est à mettre en opposition avec le <span class='vo'>[rendu côté serveur](#server-side-rendering)</span>, ou _server-side rendering_, où les pages viennent charger leurs données métier d'abord sur le serveur.
+
+Le CSR permet notamment de naviguer au sein d'une application sans jamais reconstruire intégralement la page, puisque les différents éléments de la page sont ajoutés au fur et à mesure de la navigation. Le CSR est la stratégie de rendu naturelle des <span class="vo">[SPAs](#spa)</span>.
+
+Une stratégie CSR nécessite néanmoins d'avoir JavaScript disponible dans son navigateur.
+
+## CMS
+
+> Bientôt...
+
+## Cross-site
+
+> Bientôt...
+
+## Desktop
+
+_Desktop_ signifie "bureau" en anglais et désigne un ordinateur dans un contexte de développement. Dans le milieu du web, on distingue parfois une navigation _desktop_ d'une navigation mobile pour des questions de design ou de comportements différents.
+
+## DOM
+
+Le _Document Object Model_ (DOM) est la représentation objet d'un document HTML chargé dans le navigateur web. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. On parle souvent d'"arbre DOM".
+
+Le DOM relie les pages web aux scripts, fichiers de styles, ressources externes ou langages de programmation. Il peut être manipulé à l'aide du JavaScript.
+
+## DNS
+
+> Bientôt...
+
+## Edge
+
+> Bientôt...
+
+## Endpoint
+
+Un _endpoint_ (ou "point de terminaison") est un point d'accès d'une <span class="vo">[API](/docs/development#api)</span> permettant d'interagir avec cette API.
+
+Dans un contexte web, on parle souvent d'un _endpoint_ d'API REST, permettant de requêter les données d'un serveur.
+
+## Framework
+
+Un _framework_ est une libraire complète proposant des outils ainsi qu'une philosophie de travail permettant de réaliser une tâche particulière du début à la fin.
+
+Il existe toutes sortes de frameworks, notamment serveur (Express, ...), de composants client (React, Vue, Svelte, ...) ou d'application (SvelteKit, Next, ...).
+
+## Frontend
+
+> Bientôt...
+
+## Header
+
+Un _header_ ou "en-tête" est un information que l'on fournit à une requête ou réponse HTTP pour préciser des informations sur la requête ou la réponse.
+
+## Hot Module Reloading
+
+Le _Hot Module Reloading_ (ou HMR) est un outil de développement permettant de rafraîchir instantanément l'état d'une page web lorsque le code source est modifié, afin de fluidifier le travail de développement. Cet outil est aujourd'hui proposé par la plupart des <span class="vo">[bundlers](#bundler-packager)</span> modernes.
+
+## Iframe
+
+Une [_iframe_](https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe) est un élément HTML (`<iframe>`) permettant d'intégrer une page web au sein d'une autre page web, affichant ainsi le contenu d'un site dans un autre site. Les communications entre l'_iframe_ et la page principale sont volontairement limitées pour des raisons de sécurité.
+
+## ISR
+
+> Bientôt...
+
+## JSON
+
+Le [_JSON_](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation) ("JavaScript Object Notation") est un format de données représentant un objet JavaScript sous forme de chaîne de caractères. C'est un format très populaire pour transmettre des données sur le web.
+
+```json
+{
+    "name": "Lucie",
+		"age": 43,
+		"pets": [{
+			"name": "Cookie",
+			"age": 3,
+			"type": "dog"
+		}, {
+			"name": "Chouquette",
+			"age": 7,
+			"type": "cat"
+		}]
+}
+```
+
+## Keyframe
+
+Une _keyframe_ représente une étape lors d'une animation CSS. L'usage de _keyframes_ permet de contrôler précisément le déroulé d'une animation CSS.
+
+## Language Server
+
+Un _language server_ est un algorithme exécuté par un <span class="vo">[IDE](/docs/development#ide)</span>. Il permet d’exécuter les aides au développement (autocomplétion, accès rapide, liste des utilisations, etc.) adaptées à un langage de programmation. L'interface entre l'IDE et le _language server_ est défini par un protocole, le _Language Server Protocol_ (LSP).
+
+Plus d'infos sur le [site de la documentation du LSP](https://microsoft.github.io/language-server-protocol/).
+
+## Layout
+
+Dans le web, un _layout_ désigne un composant particulier qui a pour but de formaliser une mise en page donnée. Elle peut alors être utilisée pour tout ou partie de l'application voire être composée avec d'autres _layouts_.
+
+## Lazy loading
+
+Le _lazy loading_ (ou "chargement différé" ou "chargement paresseux") est l'action de charger de l'information au moment où elle nécessaire. Par exemple, il est courant d'utiliser cette technique pour charger les images d'une page de site web uniquement lorsqu'elles sont censées être visibles, mais pas avant. Cela permet de rendre le chargement initial de la page plus léger, car la plupart des images ne seront alors pas chargées.
+
+## Load balancer
+
+> Bientôt...
+
+## Lockfile
+
+> Bientôt...
+
+## Markup
+
+Un langage de _markup_ est un [langage de balisage](https://fr.wikipedia.org/wiki/Langage_de_balisage), c'est-à-dire décrivant l'information au sein de balises telles que `<image>` ou `<article>`. Les langages HTML et XML sont deux exemples de langages de _markup_.
+
+Lorsqu'on parle de _markup_, on désigne l'ensemble des balises présentes dans un document ou une page.
+
+## Metadata
+
+Les _metadata_, ou "meta-données", sont des données non essentielles mais permettant d'enrichir le contexte des données auxquelles elles se réfèrent. Par exemple, la langue d'une page n'est pas la donnée principale de la page — le texte de la page est la donnée principale —, mais est une meta-donnée permettant de mieux interpréter le contenu de la page.
+
+## Middleware
+
+> Bientôt...
+
+## MIME
+
+> Bientôt...
+
+## MPA
+
+Une _Multi Page Application_, ou "Application Multi-Page", est un type d'application web se déployant sur plusieurs pages distinctes que l'on charge au fur et à mesure de la navigation. C'est le type d'application historique du web.
+
+Les _MPAs_ sont à mettre en opposition avec les <span class="vo">[SPAs](#spa)</span>, applications sur une seule page, permettant de ne pas recharger intégralement la page à chaque navigation.
+
+Les _MPAs_ sont souvent utilisées conjointement à une stratégie de [rendu côté serveur](#server-side-rendering).
+
+## Preprocessing
+
+Le _preprocessing_ désigne le fait de préparer préalablement du code ou de la donnée afin de l'optimiser ou l'adapter à son futur traitement.
+
+Le développement JavaScript moderne implique souvent plusieurs étapes de _preprocessing_, comme par exemple :
+- transformer du code JavaScript moderne en code JavaScript plus ancien, mais compatible avec plus de navigateurs
+- transformer du code TypeScript en code JavaScript
+- transformer du code SASS en code CSS
+- minifier le code JavaScript pour le rendre plus léger à transporter
+
+Svelte utilise également des préprocesseurs pour convertir les composants Svelte en code JavaScript natif, compréhensible par le navigateur.
+
+## Prerendering
+
+Le _prerendering_, ou "rendu préalable", est une stratégie de rendu d'une page web construisant les pages à l'avance. À la différences des stratégies <span class="vo">[CSR](#client-side-rendering)</span> ou <span class="vo">[SSR](#server-side-rendering)</span>, les pages prérendues sont construites une seule fois, au moment de la compilation (dans le cas où l'application nécessite une étape de compilation).
+
+Toutes les pages d'une application ne sont pas compatibles avec cette stratégie, car il est nécessaire que les pages soient statiques, c'est-à-dire que leur contenu soit le même quel que soit la personne visitant la page ou quel que soit le moment de la visite.
+
+Le <span class="vo">[SSG](#ssg)</span> permet d'avoir une application construite entièrement avec des pages prérendues.
+
+## Proxy
+
+> Bientôt...
+
+## REPL
+
+Un _REPL_ (de l'anglais "Read-Eval-Print-Loop") est un outil permettant de modifier et d'exécuter du code sur une page web et dans un environnement restreint, afin de tester certaines fonctionnalités. Svelte propose son propre [_REPL_](/repl).
+
+## Routing
+
+Le _routing_, ou "routage", est le fait d'aiguiller un utilisateur ou une utilisatrice sur les différentes pages d'un site web, éventuellement via des redirections. Normalement géré par le serveur recevant les requêtes — on parlera alors de _routing_ serveur —, il est également possible de gérer cet aiguillage directement sur le client dans une stratégie <span class="vo">[CSR](#client-side-rendering)</span> — on parlera alors de _routing_ client.
+
+## Sourcemap
+
+Une _sourcemap_ est un fichier ou une structure de données associée à un code source, généralement utilisée dans le développement web et la programmation front-end. Elle sert à établir une correspondance entre le code source original, tel qu'il est écrit dans un langage de programmation comme JavaScript, et le code résultant après compilation, minification ou transpilation, qui lui sera réellement exécuté par le navigateur. Cela permet de facilement retrouver dans le code source l'origine d'un <span class="vo">[bug](/docs/development#bug)</span> qui aura été généré par le code compilé.
+
+## SEO
+
+Le _SEO_ ("Search Engine Optimization") désigne l'ensemble des stratégies appliquées à un site web pour optimiser le référencement de ses pages au sein des moteurs de recherche, permettant une meilleure visibilité du site sur internet.
+
+## Serverless
+
+> Bientôt...
+
+## Service worker
+
+> Bientôt...
+
+## Server-side rendering
+
+Le rendu côté serveur, ou _server-side rendering_ (SSR) est l'action de générer une page web avec tout ou partie des données métier directement sur le serveur. Il est à mettre en opposition avec le <span class='vo'>[rendu côté client](#client-side-rendering)</span>, ou _client-side rendering_, où les pages viennent charger la logique dans un premier temps et les données métiers avec des requêtes supplémentaires, ce qui implique de construire une grande partie de la page dans le navigateur. Le SSR est une stratégie de rendu s'intégrant naturellement dans des [MPAs](#mpa).
+
+Le SSR a pour avantages :
+
+- une exécution plus rapide car nécessitant moins de requêtes
+- le fait de pouvoir générer l'entièreté d'une page à la première requête, ce qui permet d'afficher une page même si JavaScript n'est pas disponible côté client
+- bénéficie d'un meilleur référencement SEO, car les balises de référencement sont générées côté serveur et disponibles pour les outils d'indexation
+
+SvelteKit propose le SSR par défaut, qui peut être désactivé au cas par cas.
+
+## Sitemap
+
+> Bientôt...
+
+## Socket
+
+> Bientôt...
+
+## SPA
+
+Une _Single Page Application_, ou "Application sur une seule page" est un genre d'application web popularisée par le <span class="vo">[frameworks](#framework)</span> [React](https://react.dev/) et [AngularJS](https://fr.wikipedia.org/wiki/AngularJS). Le principe est de construire tout le HTML de son application côté client (donc dans le navigateur), et de naviguer dans les différentes sections de l'application sans recharger la page.
+
+Le fait de ne pas avoir besoin de recharger la page permet des fonctionnalités comme ne pas interrompre la lecture d'un flux audio ou vidéo lors de la navigation. Mais ce type d'application a également de gros inconvénients parmi lesquels un temps de chargement potentiellement allongé ainsi qu'une forte dégradation du référencement.
+
+Les _SPAs_ sont à mettre en opposition avec les <span class="vo">[MPAs](#mpa)</span>, applications multi-pages, nécessitant un rechargement complet entre chaque page.
+
+Les _SPAs_ nécessitent une stratégie de [rendu côté client](#client-side-rendering), et à ce titre sont plutôt considérées comme des mauvaises pratiques, sauf dans quelques cas très particuliers.
+
+On leur préfère des stratégies comme le <span class="vo">[SSR](#server-side-rendering)</span>, le <span class="vo">[SSG](#ssg)</span>, ou encore des stratégies hybrides.
+
+## SSG
+
+_SSG_ est l'acronyme de "Static Site Generation", ou "Génération de Site Statique". Il s'agit d'une stratégie de rendu d'une application web où l'intégralité des pages est généré automatiquement au moment de la compilation, utilisant des méthodes de <span class="vo">[prerendering](#prerendering)</span>.
+
+Cette stratégie requiert que toutes les pages de l'application soient statiques, c'est-à-dire que leur contenu soit le même quel que soit la personne visitant la page ou quel que soit le moment de la visite.
+
+## Stream
+
+> Bientôt...
+
+## TLS
+
+> Bientôt...
+
+## Trailing slash
+
+Un _trailing slash_ est le <span class="vo">[slash](/docs/development#slash)</span> que l'on retrouve parfois à la fin d'une url, par exemple `https://www.mon-super-site.com/bonjour/`.
+
+La présence ou l'absence de ce _trailing slash_ a des répercussions sur les navigations relatives au sein du site ainsi que sur le référencement des pages concernées
+
+## Viewport
+
+Le _viewport_ désigne la surface visible d'une page web au sein d'un navigateur.
+
+## Web component
+
+Les [_web components_](https://developer.mozilla.org/fr/docs/Web/API/Web_components) sont des éléments HTML personnalisés réutilisables, créés via une <span class="vo">[API](/docs/development#api)</span> standardisée.
+
+## XSS
+
+_XSS_ est l'acronyme de ["Cross-Site-Scripting"](https://fr.wikipedia.org/wiki/Cross-site_scripting). Il s'agit d'un type d'attaque informatique ciblant les pages d'un site web dans l'objectif de subtiliser les informations de connexion d'un utilisateur ou d'une utilisatrice via l'exécution d'un script malveillant au sein même de la page.
diff --git a/documentation/docs/07-glossary/03-javascript.md b/documentation/docs/07-glossary/03-javascript.md
new file mode 100644
index 0000000000..5172385c52
--- /dev/null
+++ b/documentation/docs/07-glossary/03-javascript.md
@@ -0,0 +1,160 @@
+---
+title: 'JavaScript'
+---
+
+Voici quelques informations sur les angliscismes usuels utilisés dans le contexte de JavaScript.
+
+Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
+
+> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
+
+## Bubble / Capture
+
+Lorsqu'un événement JavaScript est déclenché, celui-ci parcours le <span class="vo">[DOM](/docs/web#dom)</span> en 3 phases distinctes, dans cet ordre :
+
+- la phase _capture_ : de l'élément window jusqu'à l'élément qui a déclenché l'événement
+- la phase _target_ : lorsque l'événement atteint l'élément qui a déclenché l'événement
+- la phase _bubble_ de l'élément qui a déclenché l'événement jusqu'à l'élément `window`
+
+Un _event listener_ écoutera par défaut les événements dans leurs phases de _bubbling_. Il est néanmoins possible d'initialiser un _listener_ pour qu'il écoute dans la phase _capture_ avec l'option `{capture: true}` (en svelte, avec le [modificateur de directive](/docs/element-directives) `|capture`).
+
+## Event dispatcher
+
+Un _event dispatcher_ (ou générateur d'évènements) est une fonction qui peut être utilisée pour distribuer des évènements au sein d'une application, notamment pour communiquer entre composants. 
+
+Plus d'infos sur [les _event dispatchers_ dans la documentation](/docs/svelte#createeventdispatcher).
+
+## Event listener
+
+Un _event listener_ est une fonction conçue pour être exécutée lorsqu'un événement est déclenché.
+
+Par exemple, on peut utiliser un _event listener_ pour **changer la couleur d'un bouton** (fonction) lorsqu'on **clique** dessus.
+
+```html
+<!-- HTML -->
+<button onclick="() => console.log('Click !')">
+	Clic
+</button>
+```
+
+```ts
+// JavaScript
+const element = document.createElement('button');
+
+element.onclick = () => console.log('Click !')
+// ou
+element.addEventListener('click', () => console.log('Click !'))
+```
+
+```svelte
+ <!-- Svelte -->
+<button on:click={() => console.log('Click !')}>
+	Clic
+</button>
+```
+
+Plus d'infos sur les _event listeners_ sur [le site de MDN](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener).
+
+## Falsy / Truthy
+
+### Falsy
+
+Une valeur est dite _falsy_ si celle-ci peut être interprétée comme équivalente (et non pas égale) à `false`.
+
+Les valeurs _falsy_ sont:
+- `false`
+- `0`
+- `-0`
+- `0n` (`0` en BigInt)
+- `""` (chaîne de caractère vide)
+- `null`
+- `undefined`
+- `NaN`
+- `document.all`
+
+Si une valeur est _falsy_, alors sa double négation renvoie la valeur `false`.
+
+```ts
+!!0 // false
+!!null // false
+!!undefined // false
+// ...
+```
+
+Plus d'infos sur les valeurs _falsy_ sur [le site de MDN](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) (en anglais).
+
+### Truthy
+
+Une valeur est dite _truthy_ si celle-ci n'est pas <span class="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>. Toutes les valeurs qui ne sont pas celles listées juste au-dessus sont donc _truthy_.
+
+Si une valeur est _truthy_, alors sa double négation renvoie la valeur `true`.
+
+```ts
+!!1 // true
+!!{} // true
+!!'dsds' // true
+// ...
+```
+
+Plus d'infos sur les valeurs _truthy_ sur [le site de MDN](https://developer.mozilla.org/fr/docs/Glossary/Truthy).
+
+## Generic
+
+Un _generic_ est une notion en TypeScript qui permet de définir une variable au sein d'un type. Il a pour fonctionnalité première de permettre de propager un type au sein d'une méthode lorsque le type est variable. L'exemple le plus simple est la fonction identité :
+
+```typescript
+function identity<Type>(arg: Type): Type {
+	return arg;
+}
+```
+
+Dans ce cas précis, le paramètre `arg` pourra être de n'importe quel type, représenté par le _generic_ `Type`. Le retour de la méthode aura le même type que le paramètre.
+
+Plus d'infos sur les [generics sur le site TypeScript](https://www.typescriptlang.org/docs/handbook/2/generics.html).
+
+## Inline
+
+L'adjectif _inline_ désigne le fait de définir du style, une condition, une fonction ou un composant sur une seule ligne. Toutes ces fonctionnalités ne sont pas permises nativement en Javascript. Certaines sont apportées par les frameworks de développement, comme Svelte.
+
+Exemples :
+
+```ts
+// @noErrors
+// fonction inline
+const saluer = (nom: string) => console.log(`Salut ${nom} !`)
+
+function saluer(nom: string) {
+	// condition inline
+	if (!nom) return;
+
+	// traitement
+}
+```
+
+```svelte
+<!-- style inline en HTML ou en Svelte -->
+<div style="margin: 8px;"/>
+
+<!-- autre manière d'écrire du style inline en Svelte -->
+<div style:margin="8px"/>
+```
+
+## Nullish
+
+Une valeur _nullish_ est une valeur qui est `null` ou `undefined`.
+
+`null` et `undefined` sont deux valeurs qui représentent toutes les deux l'absence de valeur. Ce sont des valeurs différentes (`null !== undefined`), mais équivalentes (`null == undefined`). Pour pouvoir faire référence aux deux, on utilise le terme _nullish_.
+
+Pour en savoir plus sur la différence entre `null` et `undefined`, vous pouvez par exemple lire [ceci](https://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript) (en anglais).
+
+## Polyfill
+
+Un _polyfill_ est un bout de code (généralement en JavaScript sur le web) utilisé pour fournir des fonctionnalités récentes sur d'anciens navigateurs qui ne les supportent pas nativement.
+
+Plus d'infos sur les [polyfills sur le site MDN](https://developer.mozilla.org/fr/docs/Glossary/Polyfill).
+
+## Shadow DOM
+
+Un _shadow DOM_ (ou DOM fantôme) est un <span class='vo'>[DOM](/docs/web#dom)</span> dans le DOM. Il est monté via la méthode `element.attachShadow()` et a pour particularité d'être encapsulé, c'est-à-dire que sa structure de balisage est isolée, que son style est isolé et que son comportement est caché et séparé du reste de code de la page.
+
+Plus d'infos sur le [shadow DOM sur le site MDN](https://developer.mozilla.org/fr/docs/Web/API/Web_components/Using_shadow_DOM).
diff --git a/documentation/docs/07-glossary/04-sveltejs.md b/documentation/docs/07-glossary/04-sveltejs.md
new file mode 100644
index 0000000000..67ea791ac3
--- /dev/null
+++ b/documentation/docs/07-glossary/04-sveltejs.md
@@ -0,0 +1,90 @@
+---
+title: 'Svelte'
+---
+
+Voici quelques informations sur les angliscismes classiques utilisés dans le contexte de Svelte.
+
+Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
+
+> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
+
+## Binding
+
+Le _binding_ est le mécanisme par lequel une valeur d'un input est automatiquement copiée dans une variable :
+
+```svelte
+<!-- ici, la valeur est initialisée avec la variable name
+mais la variable ne sera pas mise à jour automatiquement avec la saisie de l'utilisateur -->
+<input value={name}>
+
+<!-- dans ce cas, la valeur est initialisée avec la variable name
+et la variable sera automatiquement mise à jour avec la saisie de l'utilisateur -->
+<input bind:value={name}>
+
+<!-- écriture plus concise du binding dans le cas ou la variable porte le même nom que la propriété bindée -->
+<input bind:value>
+```
+
+De la même manière, il est possible de _binder_ des propriétés d'un composant :
+
+```svelte
+<script>
+    import { Commande } from './Commande.svelte';
+
+    let articles;
+</script>
+
+<Commande bind:articles={articles}>
+```
+
+Il est également possible de _binder_ des propriétés de certains éléments du <span class='vo'>[DOM](/docs/web#dom)</span> (les éléments de type bloc, les images, les vidéo, window via `svelte:window` et document via `svelte:document`).
+
+## Hook
+
+Un _hook_ est un type de méthode proposé par SvelteKit pour traiter toutes les requêtes arrivant sur le serveur. Vous trouverez [plus de détails sur le site de référence de SvelteKit](PUBLIC_KIT_SITE_URL/docs/hooks).
+
+> Ne pas confondre avec les [hooks de React](https://react.dev/reference/react) (en anglais), qui sont un concept totalement différent.
+
+## Props
+
+Les _props_ ou propriétés sont les valeurs passées aux composants. Les props sont définies avec le mot clé `export` au sein du `script` des composants :
+
+```sv
+<script>
+    export let value;
+</script>
+```
+
+Elles sont passées au composant de la même manière qu'un attribut HTML :
+
+```svelte
+<Widget value="salut" />
+```
+
+Plus d'infos sur les [props dans la documentation](/docs/basic-markup#attributs-et-props).
+
+> Le concept de props est exactement le même en Svelte qu'en React, Vue ou Solid.
+
+## Slot
+
+Un _slot_ correspond au contenu enfant d'un composant. Il est possible d'y accéder dans le markup via `<slot>` ou dans le bloc `script` via la variable globale `$$slots`.
+
+Plus d'infos sur [les slots dans la documentation](/docs/special-elements#slot).
+
+## Snapshot
+
+> Bientôt...
+
+## Store
+
+Un _store_ est un concept au sein de Svelte qui permet de stocker une valeur, et de notifier n'importe quel module au sein de l'application de ses changements de valeur.
+
+Plus d'infos sur [les stores Svelte dans la documentation](/docs/svelte-store).
+
+## Tick
+
+De manière générale, un _tick_ peut faire référence à une période de temps unitaire.
+
+Dans le cadre de Svelte, la méthode _tick_ définit est une promesse qui se résout une fois que tous les changements d'état en attente ont été appliqués, ou dans la micro-tâche suivante s'il n'y en a pas.
+
+Plus d'infos sur [les ticks Svelte dans la documentation](/docs/svelte#tick).
diff --git a/documentation/docs/07-glossary/meta.json b/documentation/docs/07-glossary/meta.json
new file mode 100644
index 0000000000..7ab58ea79c
--- /dev/null
+++ b/documentation/docs/07-glossary/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Glossaire"
+}
diff --git a/documentation/examples/00-introduction/00-hello-world/App.svelte b/documentation/examples/00-introduction/00-hello-world/App.svelte
index aa19c0abc4..6ac97ed51a 100644
--- a/documentation/examples/00-introduction/00-hello-world/App.svelte
+++ b/documentation/examples/00-introduction/00-hello-world/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let name = 'world';
+	let name = "tout le monde";
 </script>
 
-<h1>Hello {name}!</h1>
+<h1>Bonjour {name} !</h1>
diff --git a/documentation/examples/00-introduction/00-hello-world/meta.json b/documentation/examples/00-introduction/00-hello-world/meta.json
index 86590ebcc6..ca7db382e0 100644
--- a/documentation/examples/00-introduction/00-hello-world/meta.json
+++ b/documentation/examples/00-introduction/00-hello-world/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Hello world"
-}
+	"title": "Bonjour tout le monde"
+}
\ No newline at end of file
diff --git a/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte b/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte
index 18259f27b0..6e150cdd6e 100644
--- a/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte
+++ b/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte
@@ -1,7 +1,7 @@
 <script>
-	let src = '/tutorial/image.gif';
-	let name = 'Rick Astley';
+	let src = "/tutorial/image.gif";
+	let name = "Rick Astley";
 </script>
 
-<!-- {src} is short for src={src} -->
-<img {src} alt="{name} dancing" />
+<!-- {src} est le raccourci de src={src} -->
+<img {src} alt="{name} danse" />
diff --git a/documentation/examples/00-introduction/01-dynamic-attributes/meta.json b/documentation/examples/00-introduction/01-dynamic-attributes/meta.json
index 735b441544..e7a5ef0db3 100644
--- a/documentation/examples/00-introduction/01-dynamic-attributes/meta.json
+++ b/documentation/examples/00-introduction/01-dynamic-attributes/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Dynamic attributes"
-}
+	"title": "Attributs dynamiques"
+}
\ No newline at end of file
diff --git a/documentation/examples/00-introduction/02-styling/App.svelte b/documentation/examples/00-introduction/02-styling/App.svelte
index 5266147df3..5f34ece1e6 100644
--- a/documentation/examples/00-introduction/02-styling/App.svelte
+++ b/documentation/examples/00-introduction/02-styling/App.svelte
@@ -1,9 +1,9 @@
-<p>Styled!</p>
+<p>Stylisé !</p>
 
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS', cursive;
+		font-family: "Comic Sans MS", cursive;
 		font-size: 2em;
 	}
 </style>
diff --git a/documentation/examples/00-introduction/02-styling/meta.json b/documentation/examples/00-introduction/02-styling/meta.json
index ab28e2c52f..9f2eee3dad 100644
--- a/documentation/examples/00-introduction/02-styling/meta.json
+++ b/documentation/examples/00-introduction/02-styling/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Styling"
-}
+	"title": "Style"
+}
\ No newline at end of file
diff --git a/documentation/examples/00-introduction/03-nested-components/App.svelte b/documentation/examples/00-introduction/03-nested-components/App.svelte
index 86f7f3a773..086420dc18 100644
--- a/documentation/examples/00-introduction/03-nested-components/App.svelte
+++ b/documentation/examples/00-introduction/03-nested-components/App.svelte
@@ -1,14 +1,14 @@
 <script>
-	import Nested from './Nested.svelte';
+	import Nested from "./Nested.svelte";
 </script>
 
-<p>These styles...</p>
+<p>Ce style...</p>
 <Nested />
 
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS', cursive;
+		font-family: "Comic Sans MS", cursive;
 		font-size: 2em;
 	}
 </style>
diff --git a/documentation/examples/00-introduction/03-nested-components/Nested.svelte b/documentation/examples/00-introduction/03-nested-components/Nested.svelte
index de5d97fa86..349eb35e3d 100644
--- a/documentation/examples/00-introduction/03-nested-components/Nested.svelte
+++ b/documentation/examples/00-introduction/03-nested-components/Nested.svelte
@@ -1 +1 @@
-<p>...don't affect this element</p>
+<p>...n'affecte pas cet élément</p>
diff --git a/documentation/examples/00-introduction/03-nested-components/meta.json b/documentation/examples/00-introduction/03-nested-components/meta.json
index 5e383a49bd..c17e4ca350 100644
--- a/documentation/examples/00-introduction/03-nested-components/meta.json
+++ b/documentation/examples/00-introduction/03-nested-components/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Nested components"
-}
+	"title": "Composants imbriqués"
+}
\ No newline at end of file
diff --git a/documentation/examples/00-introduction/04-html-tags/App.svelte b/documentation/examples/00-introduction/04-html-tags/App.svelte
index ebc5ade2bb..e297999d9c 100644
--- a/documentation/examples/00-introduction/04-html-tags/App.svelte
+++ b/documentation/examples/00-introduction/04-html-tags/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let string = `here's some <strong>HTML!!!</strong>`;
+	let string = `voici du <strong>HTML !!!</strong>`;
 </script>
 
 <p>{@html string}</p>
diff --git a/documentation/examples/00-introduction/04-html-tags/meta.json b/documentation/examples/00-introduction/04-html-tags/meta.json
index 04968c43aa..93ceae672f 100644
--- a/documentation/examples/00-introduction/04-html-tags/meta.json
+++ b/documentation/examples/00-introduction/04-html-tags/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "HTML tags"
+	"title": "Balises HTML"
 }
diff --git a/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte b/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte
index 6d78f949e1..08516b6727 100644
--- a/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte
+++ b/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte
@@ -7,6 +7,5 @@
 </script>
 
 <button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
+	{count} {count === 1 ? "clic" : "clics"}
 </button>
diff --git a/documentation/examples/01-reactivity/00-reactive-assignments/meta.json b/documentation/examples/01-reactivity/00-reactive-assignments/meta.json
index b863d19abd..139abdeb62 100644
--- a/documentation/examples/01-reactivity/00-reactive-assignments/meta.json
+++ b/documentation/examples/01-reactivity/00-reactive-assignments/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Reactive assignments"
-}
+	"title": "Assignations réactives"
+}
\ No newline at end of file
diff --git a/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte b/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte
index 7d2eafba9f..1502188227 100644
--- a/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte
+++ b/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	let count = 1;
 
-	// the `$:` means 're-run whenever these values change'
+	// Le symbole `$:` signifie "ré-exécute dès qu'une valeur change"
 	$: doubled = count * 2;
 	$: quadrupled = doubled * 2;
 
@@ -11,8 +11,8 @@
 </script>
 
 <button on:click={handleClick}>
-	Count: {count}
+	Nombre de clics: {count}
 </button>
 
 <p>{count} * 2 = {doubled}</p>
-<p>{doubled} * 2 = {quadrupled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>
\ No newline at end of file
diff --git a/documentation/examples/01-reactivity/01-reactive-declarations/meta.json b/documentation/examples/01-reactivity/01-reactive-declarations/meta.json
index cddf2d9562..d3f26a2065 100644
--- a/documentation/examples/01-reactivity/01-reactive-declarations/meta.json
+++ b/documentation/examples/01-reactivity/01-reactive-declarations/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Reactive declarations"
-}
+	"title": "Déclarations réactives"
+}
\ No newline at end of file
diff --git a/documentation/examples/01-reactivity/02-reactive-statements/App.svelte b/documentation/examples/01-reactivity/02-reactive-statements/App.svelte
index 99590c87d7..eed92c2734 100644
--- a/documentation/examples/01-reactivity/02-reactive-statements/App.svelte
+++ b/documentation/examples/01-reactivity/02-reactive-statements/App.svelte
@@ -2,7 +2,7 @@
 	let count = 0;
 
 	$: if (count >= 10) {
-		alert(`count is dangerously high!`);
+		alert(`Le nombre est dangereusement élevé !`);
 		count = 9;
 	}
 
@@ -12,6 +12,5 @@
 </script>
 
 <button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
+	Cliqué {count} fois
+</button>
\ No newline at end of file
diff --git a/documentation/examples/01-reactivity/02-reactive-statements/meta.json b/documentation/examples/01-reactivity/02-reactive-statements/meta.json
index e74b0b575a..15111fd7e8 100644
--- a/documentation/examples/01-reactivity/02-reactive-statements/meta.json
+++ b/documentation/examples/01-reactivity/02-reactive-statements/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Reactive statements"
-}
+	"title": "Expressions réactives"
+}
\ No newline at end of file
diff --git a/documentation/examples/01-reactivity/meta.json b/documentation/examples/01-reactivity/meta.json
index fe8d63b26d..78195f5f4c 100644
--- a/documentation/examples/01-reactivity/meta.json
+++ b/documentation/examples/01-reactivity/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Reactivity"
+	"title": "Réactivité"
 }
diff --git a/documentation/examples/02-props/00-declaring-props/App.svelte b/documentation/examples/02-props/00-declaring-props/App.svelte
index f64b69a87c..79d7e6b789 100644
--- a/documentation/examples/02-props/00-declaring-props/App.svelte
+++ b/documentation/examples/02-props/00-declaring-props/App.svelte
@@ -2,4 +2,4 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<Nested answer={42} />
+<Nested answer={42}/>
\ No newline at end of file
diff --git a/documentation/examples/02-props/00-declaring-props/Nested.svelte b/documentation/examples/02-props/00-declaring-props/Nested.svelte
index 7267c0edea..fb3863d371 100644
--- a/documentation/examples/02-props/00-declaring-props/Nested.svelte
+++ b/documentation/examples/02-props/00-declaring-props/Nested.svelte
@@ -2,4 +2,4 @@
 	export let answer;
 </script>
 
-<p>The answer is {answer}</p>
+<p>La réponse est {answer}</p>
diff --git a/documentation/examples/02-props/00-declaring-props/meta.json b/documentation/examples/02-props/00-declaring-props/meta.json
index 420af805c4..9309fba140 100644
--- a/documentation/examples/02-props/00-declaring-props/meta.json
+++ b/documentation/examples/02-props/00-declaring-props/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Declaring props"
+	"title": "Déclarer des props"
 }
diff --git a/documentation/examples/02-props/01-default-values/App.svelte b/documentation/examples/02-props/01-default-values/App.svelte
index 27e880eb5c..f9d63b30d6 100644
--- a/documentation/examples/02-props/01-default-values/App.svelte
+++ b/documentation/examples/02-props/01-default-values/App.svelte
@@ -2,5 +2,5 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<Nested answer={42} />
-<Nested />
+<Nested answer={42}/>
+<Nested/>
\ No newline at end of file
diff --git a/documentation/examples/02-props/01-default-values/Nested.svelte b/documentation/examples/02-props/01-default-values/Nested.svelte
index 3efe9ccb75..c52a612800 100644
--- a/documentation/examples/02-props/01-default-values/Nested.svelte
+++ b/documentation/examples/02-props/01-default-values/Nested.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let answer = 'a mystery';
+	export let answer = 'un mystère';
 </script>
 
-<p>The answer is {answer}</p>
+<p>La réponse est {answer}</p>
diff --git a/documentation/examples/02-props/01-default-values/meta.json b/documentation/examples/02-props/01-default-values/meta.json
index 319a7fdbea..c67026ce9c 100644
--- a/documentation/examples/02-props/01-default-values/meta.json
+++ b/documentation/examples/02-props/01-default-values/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Default values"
+	"title": "Valeurs par défaut"
 }
diff --git a/documentation/examples/02-props/02-spread-props/App.svelte b/documentation/examples/02-props/02-spread-props/App.svelte
index d2f97713d1..d41af7853c 100644
--- a/documentation/examples/02-props/02-spread-props/App.svelte
+++ b/documentation/examples/02-props/02-spread-props/App.svelte
@@ -4,9 +4,9 @@
 	const pkg = {
 		name: 'svelte',
 		version: 3,
-		speed: 'blazing',
+		speed: 'incroyablement',
 		website: 'https://svelte.dev'
 	};
 </script>
 
-<Info {...pkg} />
+<Info {...pkg}/>
diff --git a/documentation/examples/02-props/02-spread-props/Info.svelte b/documentation/examples/02-props/02-spread-props/Info.svelte
index 241b84a9af..18d9e296f6 100644
--- a/documentation/examples/02-props/02-spread-props/Info.svelte
+++ b/documentation/examples/02-props/02-spread-props/Info.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <p>
-	The <code>{name}</code> package is {speed} fast. Download version {version} from
-	<a href="https://www.npmjs.com/package/{name}">npm</a>
-	and <a href={website}>learn more here</a>
+	Le composant <code>{name}</code> est {speed} rapide.
+	Télécharger la version {version} depuis <a href="https://www.npmjs.com/package/{name}">npm</a>
+	et <a href={website}>apprenez-en plus ici</a>
 </p>
diff --git a/documentation/examples/02-props/02-spread-props/meta.json b/documentation/examples/02-props/02-spread-props/meta.json
index d2185f97c1..697e5fe6cf 100644
--- a/documentation/examples/02-props/02-spread-props/meta.json
+++ b/documentation/examples/02-props/02-spread-props/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Spread props"
+	"title": "Décomposition des props"
 }
diff --git a/documentation/examples/02-props/meta.json b/documentation/examples/02-props/meta.json
index d03965c7cb..7b9e0a2783 100644
--- a/documentation/examples/02-props/meta.json
+++ b/documentation/examples/02-props/meta.json
@@ -1,3 +1,3 @@
 {
 	"title": "Props"
-}
+}
\ No newline at end of file
diff --git a/documentation/examples/03-logic/00-if-blocks/App.svelte b/documentation/examples/03-logic/00-if-blocks/App.svelte
index d986710847..5e7e519de7 100644
--- a/documentation/examples/03-logic/00-if-blocks/App.svelte
+++ b/documentation/examples/03-logic/00-if-blocks/App.svelte
@@ -7,9 +7,9 @@
 </script>
 
 {#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
+	<button on:click={toggle}> Déconnexion </button>
 {/if}
 
 {#if !user.loggedIn}
-	<button on:click={toggle}> Log in </button>
+	<button on:click={toggle}> Connexion </button>
 {/if}
diff --git a/documentation/examples/03-logic/00-if-blocks/meta.json b/documentation/examples/03-logic/00-if-blocks/meta.json
index 9ea2f5724d..934bab9af9 100644
--- a/documentation/examples/03-logic/00-if-blocks/meta.json
+++ b/documentation/examples/03-logic/00-if-blocks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "If blocks"
+	"title": "Blocs if"
 }
diff --git a/documentation/examples/03-logic/01-else-blocks/App.svelte b/documentation/examples/03-logic/01-else-blocks/App.svelte
index 146e54bcc0..582a2257f8 100644
--- a/documentation/examples/03-logic/01-else-blocks/App.svelte
+++ b/documentation/examples/03-logic/01-else-blocks/App.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
+	<button on:click={toggle}> Déconnexion </button>
 {:else}
-	<button on:click={toggle}> Log in </button>
+	<button on:click={toggle}> Connexion </button>
 {/if}
diff --git a/documentation/examples/03-logic/01-else-blocks/meta.json b/documentation/examples/03-logic/01-else-blocks/meta.json
index 46f18e058c..f253a0dcd1 100644
--- a/documentation/examples/03-logic/01-else-blocks/meta.json
+++ b/documentation/examples/03-logic/01-else-blocks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Else blocks"
+	"title": "Blocs else"
 }
diff --git a/documentation/examples/03-logic/02-else-if-blocks/App.svelte b/documentation/examples/03-logic/02-else-if-blocks/App.svelte
index 2b740dbf9b..de300d2702 100644
--- a/documentation/examples/03-logic/02-else-if-blocks/App.svelte
+++ b/documentation/examples/03-logic/02-else-if-blocks/App.svelte
@@ -3,9 +3,9 @@
 </script>
 
 {#if x > 10}
-	<p>{x} is greater than 10</p>
+  <p>{x} est plus grand que 10</p>
 {:else if 5 > x}
-	<p>{x} is less than 5</p>
+  <p>{x} est plus petit que 5</p>
 {:else}
-	<p>{x} is between 5 and 10</p>
+  <p>{x} est entre 5 et 10</p>
 {/if}
diff --git a/documentation/examples/03-logic/02-else-if-blocks/meta.json b/documentation/examples/03-logic/02-else-if-blocks/meta.json
index aa22db3f01..033787de6a 100644
--- a/documentation/examples/03-logic/02-else-if-blocks/meta.json
+++ b/documentation/examples/03-logic/02-else-if-blocks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Else-if blocks"
+	"title": "Blocs else-if"
 }
diff --git a/documentation/examples/03-logic/03-each-blocks/App.svelte b/documentation/examples/03-logic/03-each-blocks/App.svelte
index 7d08b79ab8..83619c298c 100644
--- a/documentation/examples/03-logic/03-each-blocks/App.svelte
+++ b/documentation/examples/03-logic/03-each-blocks/App.svelte
@@ -1,19 +1,19 @@
 <script>
-	let cats = [
-		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
-		{ id: 'z_AbfPXTKms', name: 'Maru' },
-		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
-	];
+  let cats = [
+    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+    { id: 'z_AbfPXTKms', name: 'Maru' },
+    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' },
+  ];
 </script>
 
-<h1>The Famous Cats of YouTube</h1>
+<h1>Les chats célèbres de Youtube</h1>
 
 <ul>
-	{#each cats as { id, name }, i}
-		<li>
-			<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v={id}">
-				{i + 1}: {name}
-			</a>
-		</li>
-	{/each}
+  {#each cats as { id, name }, i}
+    <li>
+      <a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
+        {i + 1}: {name}
+      </a>
+    </li>
+  {/each}
 </ul>
diff --git a/documentation/examples/03-logic/03-each-blocks/meta.json b/documentation/examples/03-logic/03-each-blocks/meta.json
index d92f84ef89..96e00b09d7 100644
--- a/documentation/examples/03-logic/03-each-blocks/meta.json
+++ b/documentation/examples/03-logic/03-each-blocks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Each blocks"
+	"title": "Blocs each"
 }
diff --git a/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte b/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte
index 4f26f709e2..04821b6087 100644
--- a/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte
+++ b/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte
@@ -14,20 +14,22 @@
 	}
 </script>
 
-<button on:click={handleClick}> Remove first thing </button>
+<button on:click={handleClick}>
+	Supprimer le premier élément
+</button>
 
 <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
 	<div>
-		<h2>Keyed</h2>
+		<h2>Avec clé</h2>
 		{#each things as thing (thing.id)}
-			<Thing current={thing.color} />
+			<Thing current={thing.color}/>
 		{/each}
 	</div>
 
 	<div>
-		<h2>Unkeyed</h2>
+		<h2>Sans clé</h2>
 		{#each things as thing}
-			<Thing current={thing.color} />
+			<Thing current={thing.color}/>
 		{/each}
 	</div>
 </div>
diff --git a/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte
index 7d069ea7e4..d4414929fd 100644
--- a/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte
+++ b/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte
@@ -1,14 +1,14 @@
 <script>
-	// `current` is updated whenever the prop value changes...
+	// `current` est mis à jour à chaque fois que la valeur de la prop change...
 	export let current;
 
-	// ...but `initial` is fixed upon initialisation
+	// ...mais la variable "initial" est fixée au moment de l'instantiation du composant
 	const initial = current;
 </script>
 
 <p>
 	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span style="background-color: {current}">actuel</span>
 </p>
 
 <style>
diff --git a/documentation/examples/03-logic/04-keyed-each-blocks/meta.json b/documentation/examples/03-logic/04-keyed-each-blocks/meta.json
index fa182ae360..656700a42e 100644
--- a/documentation/examples/03-logic/04-keyed-each-blocks/meta.json
+++ b/documentation/examples/03-logic/04-keyed-each-blocks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Keyed each blocks"
+	"title": "Blocs each à clé"
 }
diff --git a/documentation/examples/03-logic/05-await-blocks/App.svelte b/documentation/examples/03-logic/05-await-blocks/App.svelte
index fa1e4fe9cb..b82a431c7d 100644
--- a/documentation/examples/03-logic/05-await-blocks/App.svelte
+++ b/documentation/examples/03-logic/05-await-blocks/App.svelte
@@ -1,6 +1,4 @@
 <script>
-	let promise = getRandomNumber();
-
 	async function getRandomNumber() {
 		const res = await fetch(`/tutorial/random-number`);
 		const text = await res.text();
@@ -12,17 +10,19 @@
 		}
 	}
 
+	let promise = getRandomNumber();
+
 	function handleClick() {
 		promise = getRandomNumber();
 	}
 </script>
 
-<button on:click={handleClick}> generate random number </button>
+<button on:click={handleClick}> générer un nombre aléatoire </button>
 
 {#await promise}
-	<p>...waiting</p>
+	<p>...en attente</p>
 {:then number}
-	<p>The number is {number}</p>
+	<p>Le nombre est {number}</p>
 {:catch error}
 	<p style="color: red">{error.message}</p>
 {/await}
diff --git a/documentation/examples/03-logic/05-await-blocks/meta.json b/documentation/examples/03-logic/05-await-blocks/meta.json
index 6ed00514ed..fdc4c419e7 100644
--- a/documentation/examples/03-logic/05-await-blocks/meta.json
+++ b/documentation/examples/03-logic/05-await-blocks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Await blocks"
+	"title": "Blocs await"
 }
diff --git a/documentation/examples/03-logic/meta.json b/documentation/examples/03-logic/meta.json
index 22e69b0c83..eac8a3e76b 100644
--- a/documentation/examples/03-logic/meta.json
+++ b/documentation/examples/03-logic/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Logic"
+	"title": "Logique"
 }
diff --git a/documentation/examples/04-events/00-dom-events/App.svelte b/documentation/examples/04-events/00-dom-events/App.svelte
index 2f6eac115c..06408182f4 100644
--- a/documentation/examples/04-events/00-dom-events/App.svelte
+++ b/documentation/examples/04-events/00-dom-events/App.svelte
@@ -9,7 +9,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mousemove={handleMousemove}>
-	The mouse position is {m.x} x {m.y}
+	Le curseur se trouve à la position ({m.x} ; {m.y})
 </div>
 
 <style>
diff --git a/documentation/examples/04-events/00-dom-events/meta.json b/documentation/examples/04-events/00-dom-events/meta.json
index f23a9c21d5..7d5501dee9 100644
--- a/documentation/examples/04-events/00-dom-events/meta.json
+++ b/documentation/examples/04-events/00-dom-events/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "DOM events"
+	"title": "Évènements DOM"
 }
diff --git a/documentation/examples/04-events/01-inline-handlers/App.svelte b/documentation/examples/04-events/01-inline-handlers/App.svelte
index 4827241f30..03fa5346e5 100644
--- a/documentation/examples/04-events/01-inline-handlers/App.svelte
+++ b/documentation/examples/04-events/01-inline-handlers/App.svelte
@@ -3,8 +3,8 @@
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })}>
-	The mouse position is {m.x} x {m.y}
+<div on:mousemove={e => (m = { x: e.clientX, y: e.clientY })}>
+	Le curseur se trouve à la position ({m.x} ; {m.y})
 </div>
 
 <style>
diff --git a/documentation/examples/04-events/01-inline-handlers/meta.json b/documentation/examples/04-events/01-inline-handlers/meta.json
index 5cbdbf4cb4..385f6f8592 100644
--- a/documentation/examples/04-events/01-inline-handlers/meta.json
+++ b/documentation/examples/04-events/01-inline-handlers/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Inline handlers"
+	"title": "Gestionnaires d'évènements"
 }
diff --git a/documentation/examples/04-events/02-event-modifiers/App.svelte b/documentation/examples/04-events/02-event-modifiers/App.svelte
index c22168901f..1d8635ba3e 100644
--- a/documentation/examples/04-events/02-event-modifiers/App.svelte
+++ b/documentation/examples/04-events/02-event-modifiers/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	function handleClick() {
-		alert('no more alerts');
+		alert("plus d'alertes");
 	}
 </script>
 
-<button on:click|once={handleClick}> Click me </button>
+<button on:click|once={handleClick}> Cliquez moi </button>
diff --git a/documentation/examples/04-events/02-event-modifiers/meta.json b/documentation/examples/04-events/02-event-modifiers/meta.json
index ae16092f1f..f2b784bce1 100644
--- a/documentation/examples/04-events/02-event-modifiers/meta.json
+++ b/documentation/examples/04-events/02-event-modifiers/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Event modifiers"
+	"title": "Modificateurs d'évènements"
 }
diff --git a/documentation/examples/04-events/03-component-events/App.svelte b/documentation/examples/04-events/03-component-events/App.svelte
index 3600b45efd..a8d14a368a 100644
--- a/documentation/examples/04-events/03-component-events/App.svelte
+++ b/documentation/examples/04-events/03-component-events/App.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<Inner on:message={handleMessage} />
+<Inner on:message={handleMessage}/>
\ No newline at end of file
diff --git a/documentation/examples/04-events/03-component-events/Inner.svelte b/documentation/examples/04-events/03-component-events/Inner.svelte
index c2e85b4c97..eace4d6ee4 100644
--- a/documentation/examples/04-events/03-component-events/Inner.svelte
+++ b/documentation/examples/04-events/03-component-events/Inner.svelte
@@ -5,9 +5,9 @@
 
 	function sayHello() {
 		dispatch('message', {
-			text: 'Hello!'
+			text: 'Bonjour !',
 		});
 	}
 </script>
 
-<button on:click={sayHello}> Click to say hello </button>
+<button on:click={sayHello}> Cliquez pour dire bonjour </button>
diff --git a/documentation/examples/04-events/03-component-events/meta.json b/documentation/examples/04-events/03-component-events/meta.json
index 0565d335e8..5df8cfac1d 100644
--- a/documentation/examples/04-events/03-component-events/meta.json
+++ b/documentation/examples/04-events/03-component-events/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Component events"
+	"title": "Évènements de composant"
 }
diff --git a/documentation/examples/04-events/04-event-forwarding/App.svelte b/documentation/examples/04-events/04-event-forwarding/App.svelte
index 2e8e743f4e..973df50f0a 100644
--- a/documentation/examples/04-events/04-event-forwarding/App.svelte
+++ b/documentation/examples/04-events/04-event-forwarding/App.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<Outer on:message={handleMessage} />
+<Outer on:message={handleMessage}/>
\ No newline at end of file
diff --git a/documentation/examples/04-events/04-event-forwarding/Inner.svelte b/documentation/examples/04-events/04-event-forwarding/Inner.svelte
index c2e85b4c97..bb1f5719ca 100644
--- a/documentation/examples/04-events/04-event-forwarding/Inner.svelte
+++ b/documentation/examples/04-events/04-event-forwarding/Inner.svelte
@@ -5,9 +5,9 @@
 
 	function sayHello() {
 		dispatch('message', {
-			text: 'Hello!'
+			text: 'Bonjour !',
 		});
 	}
 </script>
 
-<button on:click={sayHello}> Click to say hello </button>
+<button on:click={sayHello}> Cliquez pour dire bonjour ! </button>
diff --git a/documentation/examples/04-events/04-event-forwarding/Outer.svelte b/documentation/examples/04-events/04-event-forwarding/Outer.svelte
index 62a5d1d852..10c28f298a 100644
--- a/documentation/examples/04-events/04-event-forwarding/Outer.svelte
+++ b/documentation/examples/04-events/04-event-forwarding/Outer.svelte
@@ -2,4 +2,4 @@
 	import Inner from './Inner.svelte';
 </script>
 
-<Inner on:message />
+<Inner on:message/>
\ No newline at end of file
diff --git a/documentation/examples/04-events/04-event-forwarding/meta.json b/documentation/examples/04-events/04-event-forwarding/meta.json
index 5506471c94..cf03576b87 100644
--- a/documentation/examples/04-events/04-event-forwarding/meta.json
+++ b/documentation/examples/04-events/04-event-forwarding/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Event forwarding"
+	"title": "Relais d'évènements"
 }
diff --git a/documentation/examples/04-events/05-dom-event-forwarding/App.svelte b/documentation/examples/04-events/05-dom-event-forwarding/App.svelte
index 4e5764a310..1aefca0a60 100644
--- a/documentation/examples/04-events/05-dom-event-forwarding/App.svelte
+++ b/documentation/examples/04-events/05-dom-event-forwarding/App.svelte
@@ -2,7 +2,7 @@
 	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
-		alert('clicked');
+		alert('Le bouton a été cliqué');
 	}
 </script>
 
diff --git a/documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
index 1f90fac103..22f76a570f 100644
--- a/documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
+++ b/documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
@@ -1,4 +1,4 @@
-<button on:click> Click me </button>
+<button on:click> Cliquez moi </button>
 
 <style>
 	button {
diff --git a/documentation/examples/04-events/05-dom-event-forwarding/meta.json b/documentation/examples/04-events/05-dom-event-forwarding/meta.json
index c2fdf2ddcf..997235199f 100644
--- a/documentation/examples/04-events/05-dom-event-forwarding/meta.json
+++ b/documentation/examples/04-events/05-dom-event-forwarding/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "DOM event forwarding"
+	"title": "Relais d'évènements DOM"
 }
diff --git a/documentation/examples/04-events/meta.json b/documentation/examples/04-events/meta.json
index 42460e989b..b1b64acc33 100644
--- a/documentation/examples/04-events/meta.json
+++ b/documentation/examples/04-events/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Events"
+	"title": "Évènements"
 }
diff --git a/documentation/examples/05-bindings/00-text-inputs/App.svelte b/documentation/examples/05-bindings/00-text-inputs/App.svelte
index 9ec139df21..3777a717bc 100644
--- a/documentation/examples/05-bindings/00-text-inputs/App.svelte
+++ b/documentation/examples/05-bindings/00-text-inputs/App.svelte
@@ -2,5 +2,5 @@
 	let name = '';
 </script>
 
-<input bind:value={name} placeholder="enter your name" />
-<p>Hello {name || 'stranger'}!</p>
+<input bind:value={name} placeholder="tapez votre nom" />
+<p>Bonjour {name || 'étranger'} !</p>
diff --git a/documentation/examples/05-bindings/00-text-inputs/meta.json b/documentation/examples/05-bindings/00-text-inputs/meta.json
index ac90cb18c0..814a30d4cc 100644
--- a/documentation/examples/05-bindings/00-text-inputs/meta.json
+++ b/documentation/examples/05-bindings/00-text-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Text inputs"
+	"title": "Inputs texte"
 }
diff --git a/documentation/examples/05-bindings/01-numeric-inputs/meta.json b/documentation/examples/05-bindings/01-numeric-inputs/meta.json
index a7218c38cd..5f21cdd43b 100644
--- a/documentation/examples/05-bindings/01-numeric-inputs/meta.json
+++ b/documentation/examples/05-bindings/01-numeric-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Numeric inputs"
+	"title": "Inputs numériques"
 }
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
index b337359317..695b3d7a38 100644
--- a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -4,13 +4,13 @@
 
 <label>
 	<input type="checkbox" bind:checked={yes} />
-	Yes! Send me regular email spam
+	Oui ! Envoyez-moi du courrier indésirable
 </label>
 
 {#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+	<p>Merci. Nous allons bombarder votre boite mail et vendre vos données personnelles.</p>
 {:else}
-	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
+	<p>Vous devez accepter pour continuer. Si vous ne payez pas, vous êtes le produit.</p>
 {/if}
 
-<button disabled={!yes}> Subscribe </button>
+<button disabled={!yes}> S'abonner </button>
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/meta.json b/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
index 262b0f00e5..9ebc180085 100644
--- a/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
+++ b/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Checkbox inputs"
+	"title": "Inputs checkbox"
 }
diff --git a/documentation/examples/05-bindings/03-group-inputs/App.svelte b/documentation/examples/05-bindings/03-group-inputs/App.svelte
index 0ab215d519..20ae84bfbe 100644
--- a/documentation/examples/05-bindings/03-group-inputs/App.svelte
+++ b/documentation/examples/05-bindings/03-group-inputs/App.svelte
@@ -1,49 +1,49 @@
 <script>
 	let scoops = 1;
-	let flavours = ['Mint choc chip'];
+	let flavours = ['Éclats de menthe'];
 
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
+	let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+		return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
 	}
 </script>
 
-<h2>Size</h2>
+<h2>Nombre de boules</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
+	<input type="radio" bind:group={scoops} name="scoops" value={1} />
+	Une boule
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
+	<input type="radio" bind:group={scoops} name="scoops" value={2} />
+	Deux boules
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
+	<input type="radio" bind:group={scoops} name="scoops" value={3} />
+	Trois boules
 </label>
 
-<h2>Flavours</h2>
+<h2>Parfums</h2>
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
+		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Veuillez choisir au moins un parfum</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
 {:else}
 	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
+		Vous avez commandé {scoops}
+		{scoops === 1 ? 'boule' : 'boules'}
+		de {join(flavours)}
 	</p>
 {/if}
diff --git a/documentation/examples/05-bindings/03-group-inputs/meta.json b/documentation/examples/05-bindings/03-group-inputs/meta.json
index 9c7517686d..93a53aa918 100644
--- a/documentation/examples/05-bindings/03-group-inputs/meta.json
+++ b/documentation/examples/05-bindings/03-group-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Group inputs"
+	"title": "Inputs groupés"
 }
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
index ecb809095d..e595d15a0f 100644
--- a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
+++ b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -1,11 +1,11 @@
 <script>
 	import { marked } from 'marked';
-	let text = `Some words are *italic*, some are **bold**`;
+	let value = `Certains mots sont en *italique*, d'autres sont en **gras**`;
 </script>
 
-<textarea bind:value={text} />
+{@html marked(value)}
 
-{@html marked(text)}
+<textarea bind:value />
 
 <style>
 	textarea {
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/meta.json b/documentation/examples/05-bindings/04-textarea-inputs/meta.json
index 3e7963efcd..e15dbd5a81 100644
--- a/documentation/examples/05-bindings/04-textarea-inputs/meta.json
+++ b/documentation/examples/05-bindings/04-textarea-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Textarea inputs"
+	"title": "Inputs de zone de texte"
 }
diff --git a/documentation/examples/05-bindings/05-file-inputs/App.svelte b/documentation/examples/05-bindings/05-file-inputs/App.svelte
index fdf478e1bb..cc3037e217 100644
--- a/documentation/examples/05-bindings/05-file-inputs/App.svelte
+++ b/documentation/examples/05-bindings/05-file-inputs/App.svelte
@@ -2,25 +2,25 @@
 	let files;
 
 	$: if (files) {
-		// Note that `files` is of type `FileList`, not an Array:
-		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
+		// Notez que `files` est de type `FileList`, ce n'est pas un tableau :
+		// https://developer.mozilla.org/fr/docs/Web/API/FileList
 		console.log(files);
 
 		for (const file of files) {
-			console.log(`${file.name}: ${file.size} bytes`);
+			console.log(`${file.name}: ${file.size} octets`);
 		}
 	}
 </script>
 
-<label for="avatar">Upload a picture:</label>
+<label for="avatar">Sélectionnez une image :</label>
 <input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
 
-<label for="many">Upload multiple files of any type:</label>
+<label for="many">Sélectionnez plusieurs images de n'importe quel type :</label>
 <input bind:files id="many" multiple type="file" />
 
 {#if files}
-	<h2>Selected files:</h2>
+	<h2>Images sélectionnées :</h2>
 	{#each Array.from(files) as file}
-		<p>{file.name} ({file.size} bytes)</p>
+		<p>{file.name} ({file.size} octets)</p>
 	{/each}
 {/if}
diff --git a/documentation/examples/05-bindings/05-file-inputs/meta.json b/documentation/examples/05-bindings/05-file-inputs/meta.json
index 92d0587e87..0f071c30c1 100644
--- a/documentation/examples/05-bindings/05-file-inputs/meta.json
+++ b/documentation/examples/05-bindings/05-file-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "File inputs"
+	"title": "Inputs de fichiers"
 }
diff --git a/documentation/examples/05-bindings/06-select-bindings/App.svelte b/documentation/examples/05-bindings/06-select-bindings/App.svelte
index 7785258fe2..0cfefd23f9 100644
--- a/documentation/examples/05-bindings/06-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/06-select-bindings/App.svelte
@@ -1,8 +1,11 @@
 <script>
 	let questions = [
-		{ id: 1, text: `Where did you go to school?` },
-		{ id: 2, text: `What is your mother's name?` },
-		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+		{ id: 1, text: `Où alliez-vous à l'école ?` },
+		{ id: 2, text: `Quel est le nom de jeune de fille de votre mère ?` },
+		{
+			id: 3,
+			text: `Donnez-nous un autre élément personnel qu'une personne mal intentionnée pourrait facilement trouver sur Google`
+		}
 	];
 
 	let selected;
@@ -10,11 +13,11 @@
 	let answer = '';
 
 	function handleSubmit() {
-		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+		alert(`la réponse à la question ${selected.id} (${selected.text}) est "${answer}"`);
 	}
 </script>
 
-<h2>Insecurity questions</h2>
+<h2>Questions de non-sécurité</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
 	<select bind:value={selected} on:change={() => (answer = '')}>
@@ -27,10 +30,10 @@
 
 	<input bind:value={answer} />
 
-	<button disabled={!answer} type="submit"> Submit </button>
+	<button disabled={!answer} type="submit"> Envoyer </button>
 </form>
 
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+<p>question choisie {selected ? selected.id : '[en attente...]'}</p>
 
 <style>
 	input {
diff --git a/documentation/examples/05-bindings/06-select-bindings/meta.json b/documentation/examples/05-bindings/06-select-bindings/meta.json
index 0e5fdbafd3..bb363b4d52 100644
--- a/documentation/examples/05-bindings/06-select-bindings/meta.json
+++ b/documentation/examples/05-bindings/06-select-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Select bindings"
+	"title": "Liaisons de sélection"
 }
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
index 2fd19c28ad..6d6db30933 100644
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	let scoops = 1;
-	let flavours = ['Mint choc chip'];
+	let flavours = ['Éclats de menthe'];
 
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
+	let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+		return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
 	}
 </script>
 
@@ -14,20 +14,20 @@
 
 <label>
 	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
+	Une boule
 </label>
 
 <label>
 	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
+	Deux boules
 </label>
 
 <label>
 	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
+	Trois boules
 </label>
 
-<h2>Flavours</h2>
+<h2>Parfums</h2>
 
 <select multiple bind:value={flavours}>
 	{#each menu as flavour}
@@ -38,13 +38,13 @@
 </select>
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Veuillez choisir au moins un parfum</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
 {:else}
 	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
+		Vous avez commandé {scoops}
+		{scoops === 1 ? 'boule' : 'boules'}
+		de {join(flavours)}
 	</p>
 {/if}
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json b/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
index 11b6cafd83..28143b219e 100644
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
+++ b/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Select multiple"
+	"title": "Sélection multiple"
 }
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
index a8118093d3..93e5046171 100644
--- a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
+++ b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
@@ -1,8 +1,8 @@
 <script>
 	let todos = [
-		{ done: false, text: 'finish Svelte tutorial' },
-		{ done: false, text: 'build an app' },
-		{ done: false, text: 'world domination' }
+		{ done: false, text: 'finir le tutoriel Svelte' },
+		{ done: false, text: 'construire une app' },
+		{ done: false, text: 'dominer le monde' }
 	];
 
 	function add() {
@@ -22,12 +22,16 @@
 	<div>
 		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
+		<input
+			placeholder="Qu'avez-vous besoin de faire ?"
+			bind:value={todo.text}
+			disabled={todo.done}
+		/>
 	</div>
 {/each}
 
-<p>{remaining} remaining</p>
+<p>Encore {remaining}</p>
 
-<button on:click={add}> Add new </button>
+<button on:click={add}> Ajouter </button>
 
-<button on:click={clear}> Clear completed </button>
+<button on:click={clear}> Effacer les tâches complétées </button>
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/meta.json b/documentation/examples/05-bindings/08-each-block-bindings/meta.json
index bb4e1e1e88..060ce66a84 100644
--- a/documentation/examples/05-bindings/08-each-block-bindings/meta.json
+++ b/documentation/examples/05-bindings/08-each-block-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Each block bindings"
+	"title": "Liaisons de bloc each"
 }
diff --git a/documentation/examples/05-bindings/09-media-elements/App.svelte b/documentation/examples/05-bindings/09-media-elements/App.svelte
index 836804f8bc..d12774ada0 100644
--- a/documentation/examples/05-bindings/09-media-elements/App.svelte
+++ b/documentation/examples/05-bindings/09-media-elements/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	// These values are bound to properties of the video
+	// Ces valeurs sont liées aux propriétés de la vidéo
 	let time = 0;
 	let duration;
 	let paused = true;
@@ -7,26 +7,27 @@
 	let showControls = true;
 	let showControlsTimeout;
 
-	// Used to track time of last mouse down event
+	// Utilisée pour suivre le timing du dernier évènement mousedown
 	let lastMouseDown;
 
 	function handleMove(e) {
-		// Make the controls visible, but fade out after
-		// 2.5 seconds of inactivity
+		// Rend les contrôles visibles, mais les estompe après
+		// 2.5 secondes d'inactivité
 		clearTimeout(showControlsTimeout);
 		showControlsTimeout = setTimeout(() => (showControls = false), 2500);
 		showControls = true;
 
-		if (!duration) return; // video not loaded yet
-		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
+		if (!duration) return; // la vidéo n'est pas encore chargée
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // la souris n'est pas encore enfoncée
 
 		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
 		const { left, right } = this.getBoundingClientRect();
 		time = (duration * (clientX - left)) / (right - left);
 	}
 
-	// we can't rely on the built-in click event, because it fires
-	// after a drag — we have to listen for clicks ourselves
+	// nous ne pouvons pas nous fier à l'évènement clic natif,
+	// parce qu'il est déclenché après avoir fait glisser (drag) la souris
+	// — nous devons écouter les clics nous-mêmes
 	function handleMousedown(e) {
 		lastMouseDown = new Date();
 	}
@@ -50,7 +51,7 @@
 </script>
 
 <h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
+<p>Par <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
 
 <div>
 	<video
@@ -72,7 +73,9 @@
 
 		<div class="info">
 			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span
+				>cliquez n'importe où pour {paused ? 'lire' : 'mettre en pause'} / glissez pour chercher</span
+			>
 			<span class="time">{format(duration)}</span>
 		</div>
 	</div>
diff --git a/documentation/examples/05-bindings/09-media-elements/meta.json b/documentation/examples/05-bindings/09-media-elements/meta.json
index 66dfeb7047..b7ebbace6f 100644
--- a/documentation/examples/05-bindings/09-media-elements/meta.json
+++ b/documentation/examples/05-bindings/09-media-elements/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Media elements"
+	"title": "Éléments media"
 }
diff --git a/documentation/examples/05-bindings/10-dimensions/App.svelte b/documentation/examples/05-bindings/10-dimensions/App.svelte
index 4d4a8b2cf2..312f88b928 100644
--- a/documentation/examples/05-bindings/10-dimensions/App.svelte
+++ b/documentation/examples/05-bindings/10-dimensions/App.svelte
@@ -2,13 +2,13 @@
 	let w;
 	let h;
 	let size = 42;
-	let text = 'edit me';
+	let text = 'éditez-moi';
 </script>
 
 <input type="range" bind:value={size} />
 <input bind:value={text} />
 
-<p>size: {w}px x {h}px</p>
+<p>taille: {w}px x {h}px</p>
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
diff --git a/documentation/examples/05-bindings/12-component-bindings/App.svelte b/documentation/examples/05-bindings/12-component-bindings/App.svelte
index 254ced9464..e019c74e62 100644
--- a/documentation/examples/05-bindings/12-component-bindings/App.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/App.svelte
@@ -2,10 +2,10 @@
 	import Keypad from './Keypad.svelte';
 
 	let pin;
-	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'entrez votre code';
 
 	function handleSubmit() {
-		alert(`submitted ${pin}`);
+		alert(`votre code ${pin}`);
 	}
 </script>
 
diff --git a/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte b/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
index c814a2238f..0a7a8d696a 100644
--- a/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
@@ -21,9 +21,9 @@
 	<button on:click={select(8)}>8</button>
 	<button on:click={select(9)}>9</button>
 
-	<button disabled={!value} on:click={clear}>clear</button>
+	<button disabled={!value} on:click={clear}>effacer</button>
 	<button on:click={select(0)}>0</button>
-	<button disabled={!value} on:click={submit}>submit</button>
+	<button disabled={!value} on:click={submit}>valider</button>
 </div>
 
 <style>
diff --git a/documentation/examples/05-bindings/12-component-bindings/meta.json b/documentation/examples/05-bindings/12-component-bindings/meta.json
index 5ed7f96ac2..0aad351a29 100644
--- a/documentation/examples/05-bindings/12-component-bindings/meta.json
+++ b/documentation/examples/05-bindings/12-component-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Component bindings"
+	"title": "Liaisons de composant"
 }
diff --git a/documentation/examples/05-bindings/meta.json b/documentation/examples/05-bindings/meta.json
index b6b01225e3..0da0e180fd 100644
--- a/documentation/examples/05-bindings/meta.json
+++ b/documentation/examples/05-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Bindings"
+	"title": "Liaisons"
 }
diff --git a/documentation/examples/06-lifecycle/00-onmount/App.svelte b/documentation/examples/06-lifecycle/00-onmount/App.svelte
index c8d1f6092f..cfe4eae7cd 100644
--- a/documentation/examples/06-lifecycle/00-onmount/App.svelte
+++ b/documentation/examples/06-lifecycle/00-onmount/App.svelte
@@ -9,7 +9,7 @@
 	});
 </script>
 
-<h1>Photo album</h1>
+<h1>Album photo</h1>
 
 <div class="photos">
 	{#each photos as photo}
@@ -18,8 +18,8 @@
 			<figcaption>{photo.title}</figcaption>
 		</figure>
 	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
+		<!-- ce bloc est affiché lorque photos.length === 0 -->
+		<p>chargement...</p>
 	{/each}
 </div>
 
diff --git a/documentation/examples/06-lifecycle/01-ondestroy/App.svelte b/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
index ededcc4f9e..d3c46903b2 100644
--- a/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
+++ b/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <p>
-	The page has been open for
+	La page est ouverte depuis
 	{seconds}
-	{seconds === 1 ? 'second' : 'seconds'}
+	{seconds > 1 ? 'secondes' : 'seconde'}
 </p>
diff --git a/documentation/examples/06-lifecycle/02-update/meta.json b/documentation/examples/06-lifecycle/02-update/meta.json
index 7f4db08030..3d12a5b62a 100644
--- a/documentation/examples/06-lifecycle/02-update/meta.json
+++ b/documentation/examples/06-lifecycle/02-update/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "beforeUpdate and afterUpdate"
+	"title": "beforeUpdate et afterUpdate"
 }
diff --git a/documentation/examples/06-lifecycle/03-tick/App.svelte b/documentation/examples/06-lifecycle/03-tick/App.svelte
index 2f076946b3..698b250658 100644
--- a/documentation/examples/06-lifecycle/03-tick/App.svelte
+++ b/documentation/examples/06-lifecycle/03-tick/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { tick } from 'svelte';
 
-	let text = `Select some text and hit the tab key to toggle uppercase`;
+	let text = `Sélectionnez du texte et appuyez sur Tab pour mettre en majuscules`;
 
 	async function handleKeydown(event) {
 		if (event.key !== 'Tab') return;
diff --git a/documentation/examples/06-lifecycle/meta.json b/documentation/examples/06-lifecycle/meta.json
index 5ed3972e7a..88d04845cc 100644
--- a/documentation/examples/06-lifecycle/meta.json
+++ b/documentation/examples/06-lifecycle/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Lifecycle"
+	"title": "Cycle de vie"
 }
diff --git a/documentation/examples/07-stores/00-writable-stores/App.svelte b/documentation/examples/07-stores/00-writable-stores/App.svelte
index 3d301a760f..176386ace1 100644
--- a/documentation/examples/07-stores/00-writable-stores/App.svelte
+++ b/documentation/examples/07-stores/00-writable-stores/App.svelte
@@ -11,7 +11,7 @@
 	});
 </script>
 
-<h1>The count is {countValue}</h1>
+<h1>Le compteur vaut {countValue}</h1>
 
 <Incrementer />
 <Decrementer />
diff --git a/documentation/examples/07-stores/00-writable-stores/Resetter.svelte b/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
index 9c8809961f..2931cf52bc 100644
--- a/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
+++ b/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<button on:click={reset}> reset </button>
+<button on:click={reset}> réinitialiser </button>
diff --git a/documentation/examples/07-stores/00-writable-stores/meta.json b/documentation/examples/07-stores/00-writable-stores/meta.json
index 9e899622e3..8a0dd645ba 100644
--- a/documentation/examples/07-stores/00-writable-stores/meta.json
+++ b/documentation/examples/07-stores/00-writable-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Writable stores"
+	"title": "Stores d'écriture"
 }
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/App.svelte b/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
index 9923689329..f0ee0271f2 100644
--- a/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
+++ b/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
@@ -5,7 +5,7 @@
 	import Resetter from './Resetter.svelte';
 </script>
 
-<h1>The count is {$count}</h1>
+<h1>Le compteur vaut {$count}</h1>
 
 <Incrementer />
 <Decrementer />
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
index 9c8809961f..2931cf52bc 100644
--- a/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
+++ b/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<button on:click={reset}> reset </button>
+<button on:click={reset}> réinitialiser </button>
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/meta.json b/documentation/examples/07-stores/01-auto-subscriptions/meta.json
index 7a4e2e7167..1823ae02aa 100644
--- a/documentation/examples/07-stores/01-auto-subscriptions/meta.json
+++ b/documentation/examples/07-stores/01-auto-subscriptions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Auto-subscriptions"
+	"title": "Abonnements automatiques"
 }
diff --git a/documentation/examples/07-stores/02-readable-stores/App.svelte b/documentation/examples/07-stores/02-readable-stores/App.svelte
index 6d1d80b455..9b495ae214 100644
--- a/documentation/examples/07-stores/02-readable-stores/App.svelte
+++ b/documentation/examples/07-stores/02-readable-stores/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { time } from './stores.js';
 
-	const formatter = new Intl.DateTimeFormat('en', {
+	const formatter = new Intl.DateTimeFormat('fr', {
 		hour12: true,
 		hour: 'numeric',
 		minute: '2-digit',
@@ -9,4 +9,4 @@
 	});
 </script>
 
-<h1>The time is {formatter.format($time)}</h1>
+<h1>Il est {formatter.format($time)}</h1>
diff --git a/documentation/examples/07-stores/02-readable-stores/meta.json b/documentation/examples/07-stores/02-readable-stores/meta.json
index 1ba22f9367..2db7cb7f61 100644
--- a/documentation/examples/07-stores/02-readable-stores/meta.json
+++ b/documentation/examples/07-stores/02-readable-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Readable stores"
+	"title": "Stores de lecture"
 }
diff --git a/documentation/examples/07-stores/03-derived-stores/App.svelte b/documentation/examples/07-stores/03-derived-stores/App.svelte
index d1013c1a26..119e761ca1 100644
--- a/documentation/examples/07-stores/03-derived-stores/App.svelte
+++ b/documentation/examples/07-stores/03-derived-stores/App.svelte
@@ -9,10 +9,10 @@
 	});
 </script>
 
-<h1>The time is {formatter.format($time)}</h1>
+<h1>Il est {formatter.format($time)}</h1>
 
 <p>
-	This page has been open for
+	Cette page est ouverte depuis
 	{$elapsed}
-	{$elapsed === 1 ? 'second' : 'seconds'}
+	{$elapsed > 1 ? 'secondes' : 'seconde'}
 </p>
diff --git a/documentation/examples/07-stores/03-derived-stores/meta.json b/documentation/examples/07-stores/03-derived-stores/meta.json
index 5574475370..a584655c81 100644
--- a/documentation/examples/07-stores/03-derived-stores/meta.json
+++ b/documentation/examples/07-stores/03-derived-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Derived stores"
+	"title": "Stores dérivés"
 }
diff --git a/documentation/examples/07-stores/04-custom-stores/App.svelte b/documentation/examples/07-stores/04-custom-stores/App.svelte
index dbdd299d69..ef4881ba51 100644
--- a/documentation/examples/07-stores/04-custom-stores/App.svelte
+++ b/documentation/examples/07-stores/04-custom-stores/App.svelte
@@ -2,8 +2,8 @@
 	import { count } from './stores.js';
 </script>
 
-<h1>The count is {$count}</h1>
+<h1>Le compteur vaut {$count}</h1>
 
 <button on:click={count.increment}>+</button>
 <button on:click={count.decrement}>-</button>
-<button on:click={count.reset}>reset</button>
+<button on:click={count.reset}>réinitialiser</button>
diff --git a/documentation/examples/07-stores/04-custom-stores/meta.json b/documentation/examples/07-stores/04-custom-stores/meta.json
index 7f1b426835..b15f6fca75 100644
--- a/documentation/examples/07-stores/04-custom-stores/meta.json
+++ b/documentation/examples/07-stores/04-custom-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Custom stores"
+	"title": "Stores personnalisés"
 }
diff --git a/documentation/examples/08-motion/00-tweened/meta.json b/documentation/examples/08-motion/00-tweened/meta.json
index 97d369cd1b..4a1e8e477d 100644
--- a/documentation/examples/08-motion/00-tweened/meta.json
+++ b/documentation/examples/08-motion/00-tweened/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Tweened"
+	"title": "Interpolation"
 }
diff --git a/documentation/examples/08-motion/01-spring/App.svelte b/documentation/examples/08-motion/01-spring/App.svelte
index e5b59901aa..b2420cbfb0 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -14,17 +14,16 @@
 
 <div style="position: absolute; right: 1em;">
 	<label>
-		<h3>stiffness ({coords.stiffness})</h3>
+		<h3>raideur ({coords.stiffness})</h3>
 		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
-		<h3>damping ({coords.damping})</h3>
+		<h3>amortissement ({coords.damping})</h3>
 		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <svg
 	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
 	on:mousedown={() => size.set(30)}
diff --git a/documentation/examples/08-motion/01-spring/meta.json b/documentation/examples/08-motion/01-spring/meta.json
index 7c926445a6..1e3a478635 100644
--- a/documentation/examples/08-motion/01-spring/meta.json
+++ b/documentation/examples/08-motion/01-spring/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Spring"
+	"title": "Ressorts"
 }
diff --git a/documentation/examples/08-motion/meta.json b/documentation/examples/08-motion/meta.json
index 14919954a9..565f826023 100644
--- a/documentation/examples/08-motion/meta.json
+++ b/documentation/examples/08-motion/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Motion"
+	"title": "Mouvement"
 }
diff --git a/documentation/examples/09-transitions/00-transition/App.svelte b/documentation/examples/09-transitions/00-transition/App.svelte
index 29e9254d14..d59dd5ba95 100644
--- a/documentation/examples/09-transitions/00-transition/App.svelte
+++ b/documentation/examples/09-transitions/00-transition/App.svelte
@@ -9,5 +9,5 @@
 </label>
 
 {#if visible}
-	<p transition:fade>Fades in and out</p>
+	<p transition:fade>Entre et sort en s'estompant</p>
 {/if}
diff --git a/documentation/examples/09-transitions/00-transition/meta.json b/documentation/examples/09-transitions/00-transition/meta.json
index 8d466a6219..96c42bf9bf 100644
--- a/documentation/examples/09-transitions/00-transition/meta.json
+++ b/documentation/examples/09-transitions/00-transition/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The transition directive"
+	"title": "La directive de transition"
 }
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
index 318739f1d0..4adcbbf183 100644
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
+++ b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -9,5 +9,5 @@
 </label>
 
 {#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
+	<p transition:fly={{ y: 200, duration: 2000 }}>Entre et sort en volant</p>
 {/if}
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
index 8a857ebcbb..0af800f0fe 100644
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
+++ b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Adding parameters"
+	"title": "Ajout de paramètres"
 }
diff --git a/documentation/examples/09-transitions/02-in-and-out/App.svelte b/documentation/examples/09-transitions/02-in-and-out/App.svelte
index bb44e5ca9f..ed9a117e2b 100644
--- a/documentation/examples/09-transitions/02-in-and-out/App.svelte
+++ b/documentation/examples/09-transitions/02-in-and-out/App.svelte
@@ -9,5 +9,5 @@
 </label>
 
 {#if visible}
-	<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
+	<p in:fly={{ y: 200, duration: 2000 }} out:fade>Entre en volant, sort en s'estompant</p>
 {/if}
diff --git a/documentation/examples/09-transitions/02-in-and-out/meta.json b/documentation/examples/09-transitions/02-in-and-out/meta.json
index ae0d4e800d..280b89b051 100644
--- a/documentation/examples/09-transitions/02-in-and-out/meta.json
+++ b/documentation/examples/09-transitions/02-in-and-out/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "In and out"
+	"title": "In et out"
 }
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
index c85fe7ef89..bf3fc2a453 100644
--- a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -29,7 +29,7 @@
 
 {#if visible}
 	<div class="centered" in:spin={{ duration: 8000 }} out:fade>
-		<span>transitions!</span>
+		<span>transitionne !</span>
 	</div>
 {/if}
 
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/meta.json b/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
index cbe988abc8..2bf21b4c45 100644
--- a/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
+++ b/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Custom CSS transitions"
+	"title": "Transitions CSS personnalisées"
 }
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
index 9ccd18a0f7..ee764a52d9 100644
--- a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -5,7 +5,9 @@
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
 		if (!valid) {
-			throw new Error(`This transition only works on elements with a single text node child`);
+			throw new Error(
+				`Cette transition ne fonctionne que sur les éléments qui n'ont qu'un seul noeud enfant de type texte`
+			);
 		}
 
 		const text = node.textContent;
@@ -27,5 +29,5 @@
 </label>
 
 {#if visible}
-	<p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
+	<p transition:typewriter>Portez ce vieux whisky au juge blond qui fume</p>
 {/if}
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/meta.json b/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
index 4ec4afdfce..b0bc49080a 100644
--- a/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
+++ b/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Custom JS transitions"
+	"title": "Transitions JS personnalisées"
 }
diff --git a/documentation/examples/09-transitions/05-transition-events/App.svelte b/documentation/examples/09-transitions/05-transition-events/App.svelte
index 31ef18c930..027b122900 100644
--- a/documentation/examples/09-transitions/05-transition-events/App.svelte
+++ b/documentation/examples/09-transitions/05-transition-events/App.svelte
@@ -2,10 +2,10 @@
 	import { fly } from 'svelte/transition';
 
 	let visible = true;
-	let status = 'waiting...';
+	let status = 'en attente...';
 </script>
 
-<p>status: {status}</p>
+<p>statut: {status}</p>
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
@@ -15,11 +15,11 @@
 {#if visible}
 	<p
 		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart={() => (status = 'intro started')}
-		on:outrostart={() => (status = 'outro started')}
-		on:introend={() => (status = 'intro ended')}
-		on:outroend={() => (status = 'outro ended')}
+		on:introstart={() => (status = `début de l'entrée`)}
+		on:outrostart={() => (status = 'début de la sortie')}
+		on:introend={() => (status = `fin de l'entrée`)}
+		on:outroend={() => (status = `fin de la sortie`)}
 	>
-		Flies in and out
+		Entre et sort en volant
 	</p>
 {/if}
diff --git a/documentation/examples/09-transitions/05-transition-events/meta.json b/documentation/examples/09-transitions/05-transition-events/meta.json
index cad1f94386..14457983d9 100644
--- a/documentation/examples/09-transitions/05-transition-events/meta.json
+++ b/documentation/examples/09-transitions/05-transition-events/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Transition events"
+	"title": "Évènements de transition"
 }
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
index 8f603165c1..5306824609 100644
--- a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
+++ b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
@@ -29,7 +29,7 @@
 
 <div class="container">
 	<div class="phone">
-		<h1>Photo gallery</h1>
+		<h1>Galerie photo</h1>
 
 		<div class="grid">
 			{#each images as image}
@@ -48,8 +48,7 @@
 
 		{#if selected}
 			{#await selected then d}
-				<div class="photo" in:receive|global={{ key: d.id }} out:send|global={{ key: d.id }}>
-					<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+				<div class="photo" in:receive={{ key: d.id }} out:send={{ key: d.id }}>
 					<img alt={d.alt} src="{ASSETS}/{d.id}.jpg" on:click={() => (selected = null)} />
 
 					<p class="credit">
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/meta.json b/documentation/examples/09-transitions/06-deferred-transitions/meta.json
index 9b9e1e09bc..750702a48a 100644
--- a/documentation/examples/09-transitions/06-deferred-transitions/meta.json
+++ b/documentation/examples/09-transitions/06-deferred-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Deferred transitions"
+	"title": "Transitions retardées"
 }
diff --git a/documentation/examples/10-animations/00-animate/App.svelte b/documentation/examples/10-animations/00-animate/App.svelte
index 7209a25f15..7f37cf0e53 100644
--- a/documentation/examples/10-animations/00-animate/App.svelte
+++ b/documentation/examples/10-animations/00-animate/App.svelte
@@ -20,12 +20,12 @@
 	});
 
 	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' }
+		{ id: 1, done: false, description: 'écrire de la doc' },
+		{ id: 2, done: false, description: 'commencer ma près de JSTalk' },
+		{ id: 3, done: true, description: 'acheter du lait' },
+		{ id: 4, done: false, description: 'tondre la pelouse' },
+		{ id: 5, done: false, description: 'nourrir la tortue' },
+		{ id: 6, done: false, description: 'résoudre des bugs' }
 	];
 
 	let uid = todos.length + 1;
@@ -49,12 +49,12 @@
 <div class="board">
 	<input
 		class="new-todo"
-		placeholder="what needs to be done?"
+		placeholder="que dois-je faire ?"
 		on:keydown={(event) => event.key === 'Enter' && add(event.target)}
 	/>
 
 	<div class="left">
-		<h2>todo</h2>
+		<h2>à faire</h2>
 		{#each todos.filter((t) => !t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
 				<input type="checkbox" bind:checked={todo.done} />
@@ -65,7 +65,7 @@
 	</div>
 
 	<div class="right">
-		<h2>done</h2>
+		<h2>fait</h2>
 		{#each todos.filter((t) => t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
 				<input type="checkbox" bind:checked={todo.done} />
diff --git a/documentation/examples/10-animations/00-animate/meta.json b/documentation/examples/10-animations/00-animate/meta.json
index 147c1a971f..4b8f55594d 100644
--- a/documentation/examples/10-animations/00-animate/meta.json
+++ b/documentation/examples/10-animations/00-animate/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The animate directive"
+	"title": "La directive animate"
 }
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
index a938ee235b..05c92b715b 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -16,7 +16,7 @@
 
 <div class="easing-sidebar">
 	<div class="easing-types">
-		<h3>Ease</h3>
+		<h3>Lissage</h3>
 		{#if mobile}
 			<select bind:value={current_ease}>
 				{#each [...eases] as [name]}
@@ -53,7 +53,7 @@
 			</ul>
 		{/if}
 	</div>
-	<h4>Duration</h4>
+	<h4>Durée</h4>
 	<div class="duration">
 		<span>
 			<input type="number" bind:value={duration} min="0" step="100" />
@@ -61,7 +61,7 @@
 			<button class="number" on:click={() => (duration += 100)}>+</button>
 		</span>
 		<button class="play" on:click={() => dispatch('play')}>
-			{playing ? 'Restart' : 'Play'}
+			{playing ? 'Recommencer' : 'Jouer'}
 		</button>
 	</div>
 </div>
diff --git a/documentation/examples/11-easing/00-easing/meta.json b/documentation/examples/11-easing/00-easing/meta.json
index 0c8a4969ff..59d40cabb8 100644
--- a/documentation/examples/11-easing/00-easing/meta.json
+++ b/documentation/examples/11-easing/00-easing/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Ease Visualiser"
+	"title": "Visualisateur de lissage"
 }
diff --git a/documentation/examples/11-easing/meta.json b/documentation/examples/11-easing/meta.json
index 54bd68373d..87ef08e006 100644
--- a/documentation/examples/11-easing/meta.json
+++ b/documentation/examples/11-easing/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Easing"
+	"title": "Lissage"
 }
diff --git a/documentation/examples/12-svg/01-clock/App.svelte b/documentation/examples/12-svg/01-clock/App.svelte
index 7548dff2c9..126dd4b843 100644
--- a/documentation/examples/12-svg/01-clock/App.svelte
+++ b/documentation/examples/12-svg/01-clock/App.svelte
@@ -3,8 +3,8 @@
 
 	let time = new Date();
 
-	// these automatically update when `time`
-	// changes, because of the `$:` prefix
+	// ces valeurs changent automatiquement lorsque
+	// `time` change, grâce au préfixe `$:`
 	$: hours = time.getHours();
 	$: minutes = time.getMinutes();
 	$: seconds = time.getSeconds();
@@ -23,7 +23,7 @@
 <svg viewBox="-50 -50 100 100">
 	<circle class="clock-face" r="48" />
 
-	<!-- markers -->
+	<!-- marqueurs -->
 	{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
 		<line class="major" y1="35" y2="45" transform="rotate({30 * minute})" />
 
@@ -32,13 +32,13 @@
 		{/each}
 	{/each}
 
-	<!-- hour hand -->
+	<!-- heures -->
 	<line class="hour" y1="2" y2="-20" transform="rotate({30 * hours + minutes / 2})" />
 
-	<!-- minute hand -->
+	<!-- minutes -->
 	<line class="minute" y1="4" y2="-30" transform="rotate({6 * minutes + seconds / 10})" />
 
-	<!-- second hand -->
+	<!-- secondes -->
 	<g transform="rotate({6 * seconds})">
 		<line class="second" y1="10" y2="-38" />
 		<line class="second-counterweight" y1="10" y2="2" />
diff --git a/documentation/examples/12-svg/01-clock/meta.json b/documentation/examples/12-svg/01-clock/meta.json
index 85917ba578..cf19f8f65a 100644
--- a/documentation/examples/12-svg/01-clock/meta.json
+++ b/documentation/examples/12-svg/01-clock/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Clock"
+	"title": "Horloge"
 }
diff --git a/documentation/examples/12-svg/02-bar-chart/App.svelte b/documentation/examples/12-svg/02-bar-chart/App.svelte
index 283b109ac0..663e2cfe0a 100644
--- a/documentation/examples/12-svg/02-bar-chart/App.svelte
+++ b/documentation/examples/12-svg/02-bar-chart/App.svelte
@@ -33,21 +33,21 @@
 	$: barWidth = innerWidth / xTicks.length;
 </script>
 
-<h2>US birthrate by year</h2>
+<h2>Taux de natalité aux États-unis par année</h2>
 
 <div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
-		<!-- y axis -->
+		<!-- axe y -->
 		<g class="axis y-axis">
 			{#each yTicks as tick}
 				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
 					<line x2="100%" />
-					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
+					<text y="-4">{tick} {tick === 20 ? ' pour 1 000 habitants' : ''}</text>
 				</g>
 			{/each}
 		</g>
 
-		<!-- x axis -->
+		<!-- axe x -->
 		<g class="axis x-axis">
 			{#each points as point, i}
 				<g class="tick" transform="translate({xScale(i)},{height})">
diff --git a/documentation/examples/12-svg/02-bar-chart/meta.json b/documentation/examples/12-svg/02-bar-chart/meta.json
index d72e5a95a2..a418871873 100644
--- a/documentation/examples/12-svg/02-bar-chart/meta.json
+++ b/documentation/examples/12-svg/02-bar-chart/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Bar chart"
+	"title": "Graphique en barres"
 }
diff --git a/documentation/examples/12-svg/03-area-chart/App.svelte b/documentation/examples/12-svg/03-area-chart/App.svelte
index fb79b04878..e230c0cd96 100644
--- a/documentation/examples/12-svg/03-area-chart/App.svelte
+++ b/documentation/examples/12-svg/03-area-chart/App.svelte
@@ -27,21 +27,21 @@
 	}
 </script>
 
-<h2>Arctic sea ice minimum</h2>
+<h2>Épaisseur minimum de la calotte glacière en Arctique</h2>
 
 <div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
-		<!-- y axis -->
+		<!-- axe y -->
 		<g class="axis y-axis" transform="translate(0, {padding.top})">
 			{#each yTicks as tick}
 				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
 					<line x2="100%" />
-					<text y="-4">{tick} {tick === 8 ? ' million sq km' : ''}</text>
+					<text y="-4">{tick} {tick === 8 ? ' millions de km2' : ''}</text>
 				</g>
 			{/each}
 		</g>
 
-		<!-- x axis -->
+		<!-- axe x -->
 		<g class="axis x-axis">
 			{#each xTicks as tick}
 				<g class="tick tick-{tick}" transform="translate({xScale(tick)},{height})">
@@ -51,15 +51,15 @@
 			{/each}
 		</g>
 
-		<!-- data -->
+		<!-- donnée -->
 		<path class="path-area" d={area} />
 		<path class="path-line" d={path} />
 	</svg>
 </div>
 
 <p>
-	Average September extent. Source: <a href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/"
-		>NSIDC/NASA</a
+	Étendue moyenne de septembre. Source: <a
+		href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/">NSIDC/NASA</a
 	>
 </p>
 
@@ -86,12 +86,12 @@
 	}
 
 	.tick line {
-		stroke: #888;
+		stroke: #aaa;
 		stroke-dasharray: 2;
 	}
 
 	.tick text {
-		fill: #888;
+		fill: #666;
 		text-anchor: start;
 	}
 
diff --git a/documentation/examples/12-svg/03-area-chart/meta.json b/documentation/examples/12-svg/03-area-chart/meta.json
index fa86f9a990..c23516ebb8 100644
--- a/documentation/examples/12-svg/03-area-chart/meta.json
+++ b/documentation/examples/12-svg/03-area-chart/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Area chart"
+	"title": "Graphique d'aire"
 }
diff --git a/documentation/examples/12-svg/04-scatterplot/App.svelte b/documentation/examples/12-svg/04-scatterplot/App.svelte
index 186193b119..6108353009 100644
--- a/documentation/examples/12-svg/04-scatterplot/App.svelte
+++ b/documentation/examples/12-svg/04-scatterplot/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div class="chart">
-	<h2>Anscombe's quartet</h2>
+	<h2>Quartet d'Anscombe</h2>
 
 	<Scatterplot points={data.a} />
 	<Scatterplot points={data.b} />
diff --git a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
index 9c0a96efc5..596921cbb9 100644
--- a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -32,7 +32,7 @@
 <svelte:window on:resize={resize} />
 
 <svg bind:this={svg}>
-	<!-- y axis -->
+	<!-- axe y -->
 	<g class="axis y-axis">
 		{#each yTicks as tick}
 			<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
@@ -42,7 +42,7 @@
 		{/each}
 	</g>
 
-	<!-- x axis -->
+	<!-- axe x -->
 	<g class="axis x-axis">
 		{#each xTicks as tick}
 			<g class="tick" transform="translate({xScale(tick)},0)">
@@ -52,7 +52,7 @@
 		{/each}
 	</g>
 
-	<!-- data -->
+	<!-- donnée -->
 	{#each points as point}
 		<circle cx={xScale(point.x)} cy={yScale(point.y)} r="5" />
 	{/each}
diff --git a/documentation/examples/12-svg/04-scatterplot/meta.json b/documentation/examples/12-svg/04-scatterplot/meta.json
index df11c668a9..1b84de9346 100644
--- a/documentation/examples/12-svg/04-scatterplot/meta.json
+++ b/documentation/examples/12-svg/04-scatterplot/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Scatterplot"
+	"title": "Nuages de points"
 }
diff --git a/documentation/examples/12-svg/05-svg-transitions/App.svelte b/documentation/examples/12-svg/05-svg-transitions/App.svelte
index 3a4b1710c8..7c1df29cc6 100644
--- a/documentation/examples/12-svg/05-svg-transitions/App.svelte
+++ b/documentation/examples/12-svg/05-svg-transitions/App.svelte
@@ -21,14 +21,14 @@
 
 	<div class="centered" out:fly={{ y: -20, duration: 800 }}>
 		{#each 'SVELTE' as char, i}
-			<span in:fade|global={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
+			<span in:fade={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
 		{/each}
 	</div>
 {/if}
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	toggle me
+	activer
 </label>
 
 <link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet" />
diff --git a/documentation/examples/12-svg/05-svg-transitions/meta.json b/documentation/examples/12-svg/05-svg-transitions/meta.json
index 79a57977d7..012988a470 100644
--- a/documentation/examples/12-svg/05-svg-transitions/meta.json
+++ b/documentation/examples/12-svg/05-svg-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "SVG transitions"
+	"title": "Transitions SVG"
 }
diff --git a/documentation/examples/13-actions/00-actions/App.svelte b/documentation/examples/13-actions/00-actions/App.svelte
index fcd0ca6ae3..6d8c03be72 100644
--- a/documentation/examples/13-actions/00-actions/App.svelte
+++ b/documentation/examples/13-actions/00-actions/App.svelte
@@ -4,9 +4,11 @@
 	let showModal = true;
 </script>
 
-<button on:click={() => (showModal = true)}>Show Modal</button>
+<button on:click={() => (showModal = true)}>Afficher la modale</button>
 {#if showModal}
-	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
+	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
+		Cliquez à l'extérieur !
+	</div>
 {/if}
 
 <style>
diff --git a/documentation/examples/13-actions/00-actions/meta.json b/documentation/examples/13-actions/00-actions/meta.json
index fb4dc640dd..fb2c8ebd0f 100644
--- a/documentation/examples/13-actions/00-actions/meta.json
+++ b/documentation/examples/13-actions/00-actions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The use directive"
+	"title": "La directive use"
 }
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
index 23cc9f2f9e..4aaeedbf5c 100644
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
+++ b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
@@ -13,9 +13,9 @@
 <button
 	use:longpress={duration}
 	on:longpress={() => (pressed = true)}
-	on:mouseenter={() => (pressed = false)}>press and hold</button
+	on:mouseenter={() => (pressed = false)}>maintenez appuyé</button
 >
 
 {#if pressed}
-	<p>congratulations, you pressed and held for {duration}ms</p>
+	<p>félicitations, vous avez maintenu le bouton appuyé pendant {duration} ms</p>
 {/if}
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json b/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
index 8a857ebcbb..0af800f0fe 100644
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
+++ b/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Adding parameters"
+	"title": "Ajout de paramètres"
 }
diff --git a/documentation/examples/13-actions/03-actions-pannable/meta.json b/documentation/examples/13-actions/03-actions-pannable/meta.json
index 3041762ecd..5536ab2a39 100644
--- a/documentation/examples/13-actions/03-actions-pannable/meta.json
+++ b/documentation/examples/13-actions/03-actions-pannable/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "A more complex action"
+	"title": "Une action plus complexe"
 }
diff --git a/documentation/examples/14-classes/00-classes/meta.json b/documentation/examples/14-classes/00-classes/meta.json
index 82fca54c3c..691868f054 100644
--- a/documentation/examples/14-classes/00-classes/meta.json
+++ b/documentation/examples/14-classes/00-classes/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The class directive"
+	"title": "La directive de classe"
 }
diff --git a/documentation/examples/14-classes/01-class-shorthand/App.svelte b/documentation/examples/14-classes/01-class-shorthand/App.svelte
index ad39916ce5..2f36b1fad3 100644
--- a/documentation/examples/14-classes/01-class-shorthand/App.svelte
+++ b/documentation/examples/14-classes/01-class-shorthand/App.svelte
@@ -4,11 +4,11 @@
 
 <label>
 	<input type="checkbox" bind:checked={big} />
-	big
+	grand
 </label>
 
 <div class:big>
-	some {big ? 'big' : 'small'} text
+	un texte de {big ? 'grande' : 'petite'} taille
 </div>
 
 <style>
diff --git a/documentation/examples/14-classes/01-class-shorthand/meta.json b/documentation/examples/14-classes/01-class-shorthand/meta.json
index ee98f80149..bb9e383d48 100644
--- a/documentation/examples/14-classes/01-class-shorthand/meta.json
+++ b/documentation/examples/14-classes/01-class-shorthand/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Shorthand class directive"
+	"title": "Directive de classe raccourcie"
 }
diff --git a/documentation/examples/15-composition/00-slots/App.svelte b/documentation/examples/15-composition/00-slots/App.svelte
index 986bdc01c5..1d99f102e9 100644
--- a/documentation/examples/15-composition/00-slots/App.svelte
+++ b/documentation/examples/15-composition/00-slots/App.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
+	<h2>Bonjour !</h2>
+	<p>Ceci est une boîte. Elle peut contenir toutes sortes de choses.</p>
 </Box>
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/App.svelte b/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
index 708428d4d8..d595bee901 100644
--- a/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
+++ b/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
@@ -3,8 +3,8 @@
 </script>
 
 <Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
+	<h2>Bonjour !</h2>
+	<p>Ceci est une boîte. Elle peut contenir toutes sortes de choses.</p>
 </Box>
 
 <Box />
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte b/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
index 8cb8128b31..abec7c75cb 100644
--- a/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
+++ b/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
@@ -1,6 +1,6 @@
 <div class="box">
 	<slot>
-		<em>no content was provided</em>
+		<em>aucun contenu n'a été fourni</em>
 	</slot>
 </div>
 
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/meta.json b/documentation/examples/15-composition/01-slot-fallbacks/meta.json
index ccc7d49a93..37a53da2bb 100644
--- a/documentation/examples/15-composition/01-slot-fallbacks/meta.json
+++ b/documentation/examples/15-composition/01-slot-fallbacks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Slot fallbacks"
+	"title": "Slots par défaut"
 }
diff --git a/documentation/examples/15-composition/02-named-slots/App.svelte b/documentation/examples/15-composition/02-named-slots/App.svelte
index ea27d75edf..3113aad601 100644
--- a/documentation/examples/15-composition/02-named-slots/App.svelte
+++ b/documentation/examples/15-composition/02-named-slots/App.svelte
@@ -3,10 +3,10 @@
 </script>
 
 <ContactCard>
-	<span slot="name"> P. Sherman </span>
+	<span slot="name"> P. Dupont </span>
 
 	<span slot="address">
-		42 Wallaby Way<br />
-		Sydney
+		42 rue de la chocolatine<br />
+		Bordeaux
 	</span>
 </ContactCard>
diff --git a/documentation/examples/15-composition/02-named-slots/ContactCard.svelte b/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
index d72da2ad4c..9c74c8bd23 100644
--- a/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
+++ b/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
@@ -1,19 +1,19 @@
 <article class="contact-card">
 	<h2>
 		<slot name="name">
-			<span class="missing">Unknown name</span>
+			<span class="missing">Nom inconnu</span>
 		</slot>
 	</h2>
 
 	<div class="address">
 		<slot name="address">
-			<span class="missing">Unknown address</span>
+			<span class="missing">Adresse inconnue</span>
 		</slot>
 	</div>
 
 	<div class="email">
 		<slot name="email">
-			<span class="missing">Unknown email</span>
+			<span class="missing">e-mail inconnu</span>
 		</slot>
 	</div>
 </article>
diff --git a/documentation/examples/15-composition/02-named-slots/meta.json b/documentation/examples/15-composition/02-named-slots/meta.json
index b2f48bdaec..a89712c5ef 100644
--- a/documentation/examples/15-composition/02-named-slots/meta.json
+++ b/documentation/examples/15-composition/02-named-slots/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Named slots"
+	"title": "Slots nommés"
 }
diff --git a/documentation/examples/15-composition/03-slot-props/App.svelte b/documentation/examples/15-composition/03-slot-props/App.svelte
index c281e61b04..5b6860ac31 100644
--- a/documentation/examples/15-composition/03-slot-props/App.svelte
+++ b/documentation/examples/15-composition/03-slot-props/App.svelte
@@ -5,9 +5,9 @@
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
-			<p>I am being hovered upon.</p>
+			<p>On me survole.</p>
 		{:else}
-			<p>Hover over me!</p>
+			<p>Survolez-moi !</p>
 		{/if}
 	</div>
 </Hoverable>
@@ -15,9 +15,9 @@
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
-			<p>I am being hovered upon.</p>
+			<p>On me survole.</p>
 		{:else}
-			<p>Hover over me!</p>
+			<p>Survolez-moi !</p>
 		{/if}
 	</div>
 </Hoverable>
@@ -25,9 +25,9 @@
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
-			<p>I am being hovered upon.</p>
+			<p>On me survole.</p>
 		{:else}
-			<p>Hover over me!</p>
+			<p>Survolez-moi !</p>
 		{/if}
 	</div>
 </Hoverable>
@@ -46,6 +46,5 @@
 
 	p {
 		pointer-events: none;
-		color: black;
 	}
 </style>
diff --git a/documentation/examples/15-composition/03-slot-props/meta.json b/documentation/examples/15-composition/03-slot-props/meta.json
index 4b28b342fa..e14e15e0b3 100644
--- a/documentation/examples/15-composition/03-slot-props/meta.json
+++ b/documentation/examples/15-composition/03-slot-props/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Slot props"
+	"title": "Propriétés de slot"
 }
diff --git a/documentation/examples/15-composition/04-conditional-slots/Profile.svelte b/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
index 963506ebca..621cec6765 100644
--- a/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
+++ b/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
@@ -1,12 +1,12 @@
 <section>
-	<div>Name</div>
+	<div>Nom</div>
 	<slot name="name" />
 	{#if $$slots.email}
-		<div>Email</div>
+		<div>e-mail</div>
 		<slot name="email" />
 	{/if}
 	{#if $$slots.phone}
-		<div>Phone</div>
+		<div>Téléphone</div>
 		<slot name="phone" />
 	{/if}
 </section>
diff --git a/documentation/examples/15-composition/04-conditional-slots/meta.json b/documentation/examples/15-composition/04-conditional-slots/meta.json
index 26d24b0812..2ced2a077b 100644
--- a/documentation/examples/15-composition/04-conditional-slots/meta.json
+++ b/documentation/examples/15-composition/04-conditional-slots/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Conditional Slots"
+	"title": "Slots conditionnels"
 }
diff --git a/documentation/examples/15-composition/05-modal/App.svelte b/documentation/examples/15-composition/05-modal/App.svelte
index 107affa11d..79de940327 100644
--- a/documentation/examples/15-composition/05-modal/App.svelte
+++ b/documentation/examples/15-composition/05-modal/App.svelte
@@ -4,28 +4,53 @@
 	let showModal = false;
 </script>
 
-<button on:click={() => (showModal = true)}> show modal </button>
+<button on:click={() => (showModal = true)}> afficher la modale </button>
 
 <Modal bind:showModal>
 	<h2 slot="header">
 		modal
-		<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
+		<small><em>adjectif</em> mod·al \ˈmō-dəl\</small>
 	</h2>
 
+	<h3>Définitions</h3>
 	<ol class="definition-list">
-		<li>of or relating to modality in logic</li>
+		<li>qui concerne le mode des verbes</li>
+		<li>qui a rapport au mode en musique</li>
 		<li>
-			containing provisions as to the mode of procedure or the manner of taking effect —used of a
-			contract or legacy
+			se dit d'une musique employant d'autres échelles que les deux modes classiques majeur et
+			mineur (par opposition à tonal)
 		</li>
-		<li>of or relating to a musical mode</li>
-		<li>of or relating to structure as opposed to substance</li>
 		<li>
-			of, relating to, or constituting a grammatical form or category characteristically indicating
-			predication
+			auxiliaire ou verbe modal ou modal (nom masculin), verbe qui sert à exprimer les modalités
+			logiques de l'action (contingent vs nécessaire, probable vs possible, etc.).
+		</li>
+		<li>
+			classe modale, pour un caractère continu dont les valeurs sont groupées en classes de même
+			étendue, classe logique dont la fréquence est maximale
+		</li>
+		<li>
+			logique modale, système de logique qui comporte, en sus des connecteurs et quantificateurs de
+			la logique classique, deux opérateurs unaires de modalité, l'un pour la nécessité (« il est
+			nécessaire que… »), l'autre pour la possibilité (« il est possible que… »)
+		</li>
+	</ol>
+
+	<h3>Expressions</h3>
+	<ol class="expression-list">
+		<li>
+			auxiliaire ou verbe modal ou modal (nom masculin), verbe qui sert à exprimer les modalités
+			logiques de l'action (contingent vs nécessaire, probable vs possible, etc.).
+		</li>
+		<li>
+			classe modale, pour un caractère continu dont les valeurs sont groupées en classes de même
+			étendue, classe logique dont la fréquence est maximale
+		</li>
+		<li>
+			logique modale, système de logique qui comporte, en sus des connecteurs et quantificateurs de
+			la logique classique, deux opérateurs unaires de modalité, l'un pour la nécessité (« il est
+			nécessaire que… »), l'autre pour la possibilité (« il est possible que… »)
 		</li>
-		<li>of or relating to a statistical mode</li>
 	</ol>
 
-	<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+	<a href="https://www.larousse.fr/dictionnaires/francais/modal/51904">larousse.fr</a>
 </Modal>
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
index 3b832030fe..51db8c7eaf 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -1,25 +1,24 @@
 <script>
-	export let showModal; // boolean
+	export let showModal; // booléen
 
 	let dialog; // HTMLDialogElement
 
 	$: if (dialog && showModal) dialog.showModal();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <dialog
 	bind:this={dialog}
 	on:close={() => (showModal = false)}
 	on:click|self={() => dialog.close()}
 >
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />
 		<hr />
 		<slot />
 		<hr />
 		<!-- svelte-ignore a11y-autofocus -->
-		<button autofocus on:click={() => dialog.close()}>close modal</button>
+		<button autofocus on:click={() => dialog.close()}>fermer la modale</button>
 	</div>
 </dialog>
 
diff --git a/documentation/examples/15-composition/05-modal/meta.json b/documentation/examples/15-composition/05-modal/meta.json
index 360dafa159..cacd003503 100644
--- a/documentation/examples/15-composition/05-modal/meta.json
+++ b/documentation/examples/15-composition/05-modal/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Modal"
+	"title": "Modale"
 }
diff --git a/documentation/examples/15-composition/meta.json b/documentation/examples/15-composition/meta.json
index 1d81c05f29..d09bc136eb 100644
--- a/documentation/examples/15-composition/meta.json
+++ b/documentation/examples/15-composition/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Component composition"
+	"title": "Composition de composants"
 }
diff --git a/documentation/examples/16-context/00-context-api/meta.json b/documentation/examples/16-context/00-context-api/meta.json
index f95f4c32b6..db3257d5ad 100644
--- a/documentation/examples/16-context/00-context-api/meta.json
+++ b/documentation/examples/16-context/00-context-api/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "setContext and getContext"
+	"title": "setContext et getContext"
 }
diff --git a/documentation/examples/16-context/meta.json b/documentation/examples/16-context/meta.json
index bb3c2c607d..7d79715125 100644
--- a/documentation/examples/16-context/meta.json
+++ b/documentation/examples/16-context/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Context API"
+	"title": "API de contexte"
 }
diff --git a/documentation/examples/17-special-elements/00-svelte-self/App.svelte b/documentation/examples/17-special-elements/00-svelte-self/App.svelte
index 52c6daf613..c5eeb1e119 100644
--- a/documentation/examples/17-special-elements/00-svelte-self/App.svelte
+++ b/documentation/examples/17-special-elements/00-svelte-self/App.svelte
@@ -4,16 +4,16 @@
 	let root = [
 		{
 			type: 'folder',
-			name: 'Important work stuff',
+			name: 'Trucs importants de boulot',
 			files: [{ type: 'file', name: 'quarterly-results.xlsx' }]
 		},
 		{
 			type: 'folder',
-			name: 'Animal GIFs',
+			name: "GIF d'animaux",
 			files: [
 				{
 					type: 'folder',
-					name: 'Dogs',
+					name: 'Chiens',
 					files: [
 						{ type: 'file', name: 'treadmill.gif' },
 						{ type: 'file', name: 'rope-jumping.gif' }
@@ -21,7 +21,7 @@
 				},
 				{
 					type: 'folder',
-					name: 'Goats',
+					name: 'Chèvres',
 					files: [
 						{ type: 'file', name: 'parkour.gif' },
 						{ type: 'file', name: 'rampage.gif' }
@@ -32,7 +32,7 @@
 				{ type: 'file', name: 'monkey-on-a-pig.gif' }
 			]
 		},
-		{ type: 'file', name: 'TODO.md' }
+		{ type: 'file', name: 'À_FAIRE.md' }
 	];
 </script>
 
diff --git a/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte b/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
index 551f1afbbe..f525dca545 100644
--- a/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
+++ b/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
@@ -1,7 +1,7 @@
-<strong>Blue thing</strong>
+<strong>Truc rouge</strong>
 
 <style>
 	strong {
-		color: blue;
+		color: red;
 	}
 </style>
diff --git a/documentation/examples/17-special-elements/02-svelte-element/App.svelte b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
index 068f7b3c4f..0640e93b5f 100644
--- a/documentation/examples/17-special-elements/02-svelte-element/App.svelte
+++ b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
@@ -9,4 +9,4 @@
 	{/each}
 </select>
 
-<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
+<svelte:element this={selected}>Je suis une balise {selected}</svelte:element>
diff --git a/documentation/examples/17-special-elements/03-svelte-window/App.svelte b/documentation/examples/17-special-elements/03-svelte-window/App.svelte
index 8ccc87d2b3..163219922b 100644
--- a/documentation/examples/17-special-elements/03-svelte-window/App.svelte
+++ b/documentation/examples/17-special-elements/03-svelte-window/App.svelte
@@ -12,10 +12,10 @@
 
 <div style="text-align: center">
 	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<kbd>{key === ' ' ? 'Espace' : key}</kbd>
 		<p>{keyCode}</p>
 	{:else}
-		<p>Focus this window and press any key</p>
+		<p>Mettez le focus sur cette fenêtre et appuyez sur n'importe quelle touche</p>
 	{/if}
 </div>
 
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
index 7e85600abe..e9823ff6d6 100644
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
+++ b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
@@ -11,16 +11,16 @@
 		<img
 			style="transform: translate(0,{(-y * layer) / (layers.length - 1)}px)"
 			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
-			alt="parallax layer {layer}"
+			alt="couche parallax {layer}"
 		/>
 	{/each}
 </a>
 
 <div class="text">
-	<span style="opacity: {1 - Math.max(0, y / 40)}"> scroll down </span>
+	<span style="opacity: {1 - Math.max(0, y / 40)}"> Faites défiler vers le bas </span>
 
 	<div class="foreground">
-		You have scrolled {y} pixels
+		Vous avez parcouru {y} pixels
 	</div>
 </div>
 
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json b/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
index c4864331cc..eba96d3f15 100644
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
+++ b/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "<svelte:window> bindings"
+	"title": "Liaisons <svelte:window>"
 }
diff --git a/documentation/examples/17-special-elements/05-svelte-document/App.svelte b/documentation/examples/17-special-elements/05-svelte-document/App.svelte
index e11a9005db..c9de2028a2 100644
--- a/documentation/examples/17-special-elements/05-svelte-document/App.svelte
+++ b/documentation/examples/17-special-elements/05-svelte-document/App.svelte
@@ -1,10 +1,9 @@
 <script>
 	let selection = '';
-
 	const handleSelectionChange = (e) => (selection = document.getSelection());
 </script>
 
 <svelte:document on:selectionchange={handleSelectionChange} />
 
-<p>Select this text to fire events</p>
-<p>Selection: {selection}</p>
+<p>Sélectionner ce texte pour déclencher des évènements</p>
+<p>Sélection: {selection}</p>
diff --git a/documentation/examples/17-special-elements/06-svelte-body/App.svelte b/documentation/examples/17-special-elements/06-svelte-body/App.svelte
index 71edebea48..65bedf2241 100644
--- a/documentation/examples/17-special-elements/06-svelte-body/App.svelte
+++ b/documentation/examples/17-special-elements/06-svelte-body/App.svelte
@@ -10,7 +10,7 @@
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
 	class:curious={hereKitty}
-	alt="Kitten wants to know what's going on"
+	alt="Des chatons curieux veulent savoir ce qu'il se passe"
 	src="/tutorial/kitten.png"
 />
 
diff --git a/documentation/examples/17-special-elements/07-svelte-head/App.svelte b/documentation/examples/17-special-elements/07-svelte-head/App.svelte
index 5e6bb2d945..01a6546ed3 100644
--- a/documentation/examples/17-special-elements/07-svelte-head/App.svelte
+++ b/documentation/examples/17-special-elements/07-svelte-head/App.svelte
@@ -2,4 +2,4 @@
 	<link rel="stylesheet" href="/tutorial/dark-theme.css" />
 </svelte:head>
 
-<h1>Hello world!</h1>
+<h1>Bonjour tout le monde !</h1>
diff --git a/documentation/examples/17-special-elements/meta.json b/documentation/examples/17-special-elements/meta.json
index 6c2af96c1d..fa47b3b421 100644
--- a/documentation/examples/17-special-elements/meta.json
+++ b/documentation/examples/17-special-elements/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Special elements"
+	"title": "Éléments spéciaux"
 }
diff --git a/documentation/examples/18-module-context/01-module-exports/App.svelte b/documentation/examples/18-module-context/01-module-exports/App.svelte
index a018d3429f..ab510aa253 100644
--- a/documentation/examples/18-module-context/01-module-exports/App.svelte
+++ b/documentation/examples/18-module-context/01-module-exports/App.svelte
@@ -2,7 +2,7 @@
 	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
 </script>
 
-<button on:click={stopAll}> stop all audio </button>
+<button on:click={stopAll}> arrêter tous les lecteurs </button>
 
 <!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
 <AudioPlayer
diff --git a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
index b76601e025..4d9e8b418b 100644
--- a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
@@ -33,7 +33,7 @@
 
 <article class:playing={!paused}>
 	<h2>{title}</h2>
-	<p><strong>{composer}</strong> / performed by {performer}</p>
+	<p><strong>{composer}</strong> / interprété par {performer}</p>
 
 	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
diff --git a/documentation/examples/18-module-context/01-module-exports/meta.json b/documentation/examples/18-module-context/01-module-exports/meta.json
index 5d718fc840..ce21d57aa4 100644
--- a/documentation/examples/18-module-context/01-module-exports/meta.json
+++ b/documentation/examples/18-module-context/01-module-exports/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Named exports"
+	"title": "Exports nommés"
 }
diff --git a/documentation/examples/19-debugging/00-debug/App.svelte b/documentation/examples/19-debugging/00-debug/App.svelte
index 30bffc896c..65aed6a887 100644
--- a/documentation/examples/19-debugging/00-debug/App.svelte
+++ b/documentation/examples/19-debugging/00-debug/App.svelte
@@ -10,4 +10,4 @@
 
 {@debug user}
 
-<h1>Hello {user.firstname}!</h1>
+<h1>Bonjour {user.firstname} !</h1>
diff --git a/documentation/examples/19-debugging/00-debug/meta.json b/documentation/examples/19-debugging/00-debug/meta.json
index e899108a45..0137afa334 100644
--- a/documentation/examples/19-debugging/00-debug/meta.json
+++ b/documentation/examples/19-debugging/00-debug/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The @debug tag"
+	"title": "La balise @debug"
 }
diff --git a/documentation/examples/19-debugging/meta.json b/documentation/examples/19-debugging/meta.json
index 5cfdfbc17d..c1d03178ac 100644
--- a/documentation/examples/19-debugging/meta.json
+++ b/documentation/examples/19-debugging/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Debugging"
+	"title": "Débugger"
 }
diff --git a/documentation/examples/20-7guis/01-7guis-counter/App.svelte b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
index 26c8c51477..eb570dd0cc 100644
--- a/documentation/examples/20-7guis/01-7guis-counter/App.svelte
+++ b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
@@ -4,4 +4,4 @@
 </script>
 
 <input type="number" bind:value={count} />
-<button on:click={() => (count += 1)}>count</button>
+<button on:click={() => (count += 1)}>compter</button>
diff --git a/documentation/examples/20-7guis/01-7guis-counter/meta.json b/documentation/examples/20-7guis/01-7guis-counter/meta.json
index c7fe17ca02..578a5f43ad 100644
--- a/documentation/examples/20-7guis/01-7guis-counter/meta.json
+++ b/documentation/examples/20-7guis/01-7guis-counter/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Counter"
+	"title": "Compteur"
 }
diff --git a/documentation/examples/20-7guis/02-7guis-temperature/meta.json b/documentation/examples/20-7guis/02-7guis-temperature/meta.json
index c5eacde091..5c390f2b9d 100644
--- a/documentation/examples/20-7guis/02-7guis-temperature/meta.json
+++ b/documentation/examples/20-7guis/02-7guis-temperature/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Temperature Converter"
+	"title": "Convertisseur de température"
 }
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
index 42caebe506..d45ba1e77f 100644
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -15,11 +15,11 @@
 	$: endDate = convertToDate(end);
 
 	function bookFlight() {
-		const type = isReturn ? 'return' : 'one-way';
+		const type = isReturn ? 'A-R' : 'aller simple';
 
-		let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
-		if (type === 'return') {
-			message += ` and returning ${endDate.toDateString()}`;
+		let message = `Vous avez réservé un vol ${type}, qui décolle le ${startDate.toDateString()}`;
+		if (type === 'A-R') {
+			message += ` et revient le ${endDate.toDateString()}`;
 		}
 
 		alert(message);
@@ -38,14 +38,14 @@
 </script>
 
 <select bind:value={isReturn}>
-	<option value={false}>one-way flight</option>
-	<option value={true}>return flight</option>
+	<option value={false}>Aller simple</option>
+	<option value={true}>Aller-retour</option>
 </select>
 
 <input type="date" bind:value={start} />
 <input type="date" bind:value={end} disabled={!isReturn} />
 
-<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
+<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>réserver</button>
 
 <style>
 	select,
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json b/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
index 05abfec119..31db07c9c6 100644
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
+++ b/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Flight booker"
+	"title": "Réservateur de vol"
 }
diff --git a/documentation/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
index dab2d6de44..f659f61447 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/App.svelte
+++ b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
@@ -24,15 +24,15 @@
 </script>
 
 <label>
-	elapsed time:
+	temps écoulé :
 	<progress value={elapsed / duration} />
 </label>
 
 <div>{(elapsed / 1000).toFixed(1)}s</div>
 
 <label>
-	duration:
+	durée :
 	<input type="range" bind:value={duration} min="1" max="20000" />
 </label>
 
-<button on:click={() => (elapsed = 0)}>reset</button>
+<button on:click={() => (elapsed = 0)}>réinitialiser</button>
diff --git a/documentation/examples/20-7guis/04-7guis-timer/meta.json b/documentation/examples/20-7guis/04-7guis-timer/meta.json
index fdae7a752c..0ea6a966be 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/meta.json
+++ b/documentation/examples/20-7guis/04-7guis-timer/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Timer"
+	"title": "Chronomètre"
 }
diff --git a/documentation/examples/20-7guis/05-7guis-crud/App.svelte b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
index 15a2ee6cd0..0c8465d2a0 100644
--- a/documentation/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
@@ -36,7 +36,7 @@
 	}
 
 	function remove() {
-		// Remove selected person from the source array (people), not the filtered array
+		// Supprime la personne sélectionnée du tableau source (people), mais pas du tableau filtré
 		const index = people.indexOf(selected);
 		people = [...people.slice(0, index), ...people.slice(index + 1)];
 
@@ -58,13 +58,13 @@
 	{/each}
 </select>
 
-<label><input bind:value={first} placeholder="first" /></label>
-<label><input bind:value={last} placeholder="last" /></label>
+<label><input bind:value={first} placeholder="premier" /></label>
+<label><input bind:value={last} placeholder="dernier" /></label>
 
 <div class="buttons">
-	<button on:click={create} disabled={!first || !last}>create</button>
-	<button on:click={update} disabled={!first || !last || !selected}>update</button>
-	<button on:click={remove} disabled={!selected}>delete</button>
+	<button on:click={create} disabled={!first || !last}>créer</button>
+	<button on:click={update} disabled={!first || !last || !selected}>éditer</button>
+	<button on:click={remove} disabled={!selected}>supprimer</button>
 </div>
 
 <style>
diff --git a/documentation/examples/20-7guis/06-7guis-circles/App.svelte b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
index 12d79a1a05..aed5198167 100644
--- a/documentation/examples/20-7guis/06-7guis-circles/App.svelte
+++ b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
@@ -1,9 +1,8 @@
 <!--
 https://eugenkiss.github.io/7guis/tasks#circle
 
-Click on the canvas to draw a circle. Click on a circle
-to select it. Right-click on the canvas to adjust the
-radius of the selected circle.
+Cliquez sur le canvas pour dessiner un cercle. Cliquez sur un cercle pour le sélectionner.
+Faites un clic-droit sur le canvas pour ajuster le rayon du cercle sélectionné
 -->
 
 <script>
@@ -18,8 +17,8 @@ radius of the selected circle.
 		if (adjusting) {
 			adjusting = false;
 
-			// if circle was adjusted,
-			// push to the stack
+			// si le cercle est ajusté,
+			// l'ajouter à la pile
 			if (adjusted) push();
 			return;
 		}
@@ -66,13 +65,12 @@ radius of the selected circle.
 </script>
 
 <div class="controls">
-	<button on:click={() => travel(-1)} disabled={i === 0}>undo</button>
-	<button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>redo</button>
+	<button on:click={() => travel(-1)} disabled={i === 0}>annuler</button>
+	<button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>refaire</button>
 </div>
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+
 <svg on:click={handleClick}>
 	{#each circles as circle}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<circle
 			cx={circle.cx}
 			cy={circle.cy}
@@ -89,7 +87,7 @@ radius of the selected circle.
 
 {#if adjusting}
 	<div class="adjuster">
-		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
+		<p>ajuster le diamètre du cercle en position {selected.cx}, {selected.cy}</p>
 		<input type="range" value={selected.r} on:input={adjust} />
 	</div>
 {/if}
diff --git a/documentation/examples/20-7guis/06-7guis-circles/meta.json b/documentation/examples/20-7guis/06-7guis-circles/meta.json
index 963e1f9421..639bbdf455 100644
--- a/documentation/examples/20-7guis/06-7guis-circles/meta.json
+++ b/documentation/examples/20-7guis/06-7guis-circles/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Circle Drawer"
+	"title": "Créateur de cercles"
 }
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
index e954246595..91483ab50c 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
@@ -7,7 +7,7 @@
 	let page;
 
 	async function hashchange() {
-		// the poor man's router!
+		// le routeur du pauvre !
 		const path = window.location.hash.slice(1);
 
 		if (path.startsWith('/item')) {
@@ -50,4 +50,8 @@
 		font-size: 12px;
 		margin: 0 0 1em 0;
 	}
+
+	main :global(a) {
+		color: rgb(0, 0, 150);
+	}
 </style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
index db57a25757..7491ad4caa 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
@@ -7,7 +7,7 @@
 	$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
-<a href={returnTo}>&laquo; back</a>
+<a href={returnTo}>&laquo; retour</a>
 
 <article>
 	<a href={url}>
@@ -17,7 +17,7 @@
 		{/if}
 	</a>
 
-	<p class="meta">submitted by {item.user} {item.time_ago}</p>
+	<p class="meta">posté par {item.user} {item.time_ago}</p>
 </article>
 
 <div class="comments">
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
index e3f0b7b822..45192229c0 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
@@ -25,7 +25,7 @@
 
 	<a href="#/top/{page + 1}">page {page + 1}</a>
 {:else}
-	<p class="loading">loading...</p>
+	<p class="loading">chargement...</p>
 {/if}
 
 <style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
index 360d2181b6..53dfd1a47a 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
@@ -5,7 +5,7 @@
 
 	function comment_text() {
 		const c = item.comments_count;
-		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
+		return `${c} ${c === 1 ? 'commentaire' : 'commentaires'}`;
 	}
 
 	$: url = item.type === 'ask' ? `https://news.ycombinator.com/${item.url}` : item.url;
@@ -14,7 +14,10 @@
 <article>
 	<span>{i + offset + 1}</span>
 	<h2><a target="_blank" rel="noreferrer" href={url}>{item.title}</a></h2>
-	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
+	<p class="meta">
+		<a href="#/item/{item.id}">{comment_text()}</a> par {item.user}
+		{item.time_ago}
+	</p>
 </article>
 
 <style>
@@ -33,4 +36,8 @@
 		position: absolute;
 		left: 0;
 	}
+
+	a {
+		color: #333;
+	}
 </style>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
index 05d0820f9e..64a462d446 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
@@ -3,15 +3,15 @@
 	import MutableTodo from './MutableTodo.svelte';
 
 	let todos = [
-		{ id: 1, done: true, text: 'wash the car' },
-		{ id: 2, done: false, text: 'take the dog for a walk' },
-		{ id: 3, done: false, text: 'mow the lawn' }
+		{ id: 1, done: true, text: 'laver la voiture' },
+		{ id: 2, done: false, text: 'sortir le chien' },
+		{ id: 3, done: false, text: 'tondre la pelouse' }
 	];
 
 	function toggle(id) {
 		todos = todos.map((todo) => {
 			if (todo.id === id) {
-				// return a new object
+				// renvoie un nouvel objet
 				return {
 					id,
 					done: !todo.done,
@@ -19,7 +19,7 @@
 				};
 			}
 
-			// return the same object
+			// renvoie le même objet
 			return todo;
 		});
 	}
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 8044f6be4e..51ec5462ce 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -6,22 +6,22 @@
 
 	export let todo;
 
-	let btn;
+	let div;
 
 	afterUpdate(() => {
-		flash(btn);
+		flash(div);
 	});
 </script>
 
-<!-- the text will flash red whenever
-		the `todo` object changes -->
-<button bind:this={btn} on:click>
+<!-- le texte clignote en rouge quand
+     l'objet `todo` change -->
+<div bind:this={div} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</button>
+</div>
 
 <style>
-	button {
+	div {
 		cursor: pointer;
 		border:none;
 		background:none;
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index f92468ab79..56a28d668f 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -4,22 +4,22 @@
 
 	export let todo;
 
-	let btn;
+	let div;
 
 	afterUpdate(() => {
-		flash(btn);
+		flash(div);
 	});
 </script>
 
-<!-- the text will flash red whenever
-		the `todo` object changes -->
-<button bind:this={btn}>
+<!-- le texte clignote en rouge quand
+     l'objet `todo` change -->
+<div bind:this={div} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</button>
+</div>
 
 <style>
-	button {
+	div {
 		cursor: pointer;
 		border:none;
 		background:none;
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/meta.json b/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
index a896bad1b4..22818ce705 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Immutable data"
+	"title": "Données immutables"
 }
diff --git a/i18n.md b/i18n.md
new file mode 100644
index 0000000000..f4626f8144
--- /dev/null
+++ b/i18n.md
@@ -0,0 +1,260 @@
+# i18n
+
+You'll find in this section some information about the process we used to translate the Svelte docs to french. You can check this [draft PR](https://github.com/sveltejs/svelte/pull/9281) to get an idea of the different files we modified.
+
+You can find the translated version at the following address: https://sveltefr.dev.
+
+## Repo
+
+**We recommend that you fork the [original Svelte repo](https://github.com/sveltejs/svelte)** rather than this one to keep the original repo as reference.
+
+Either way, you should know that the main modifications we made to the original repo are the following:
+- removed original workflows
+- added docs tracking workflow
+- modified Github templates
+- modified a little markdown processing
+- translated UI elements
+- translated the docs (of course)
+- added a glossary section
+
+### Workflows
+
+#### Original workflows
+
+The original Svelte has some workflows to make sure everything works as expected. **We chose to remove these workflows** to avoid being blocked by CI errors that do not really matter to us. Feel free to keep them if you'd like.
+
+#### Docs tracking workflow
+
+We want these docs to be as close as possible to the original ones. This means keeping them up-to-date as much as possible. For that reason, being notified of changes on the docs is very important.
+
+**We added a custom workflow** called "Docs Tracker" in the file `.github/workflows/track-docs.yml`, based on [AlexxNB's custom Github Action](https://github.com/AlexxNB/track-commits-to-issue). It is composed of three jobs:
+- "Checking Docs" to monitor changes to the `documentation` folder
+- "Checking Site" to monitor changes to the `sites/svelte.dev` folder
+- "Checking Svelte" to monitor changes to the `packages/svelte/src` folder
+
+These jobs will check every 3 hours if commits have affected files in their respective folder, and publish issues to your repositories with links to said commits. It will be then up to you to mitigate whether or not you need to update your translations.
+
+**We recommend to activate this tracking workflow from day one** of your translation process. From there, you mainly have two options:
+- regurlarly rebase on top of `sveltejs/svelte` to get the latest version of the docs, add new translations if any or fix potential conflicts if changes were made to already translated parts, and close corresponding issues when addressed
+- work only from your original fork and let the issues pile up. Once you're done, perform one rebase, and address the issues one by one
+
+We feel the first option is safer, but you might have a different opinion.
+
+### Github templates
+
+The original repo has some templates for posting issues and Pull Requests. These templates are not relevant in our case since we are _not_ willing to push anything to Svelte's repo. Moreover, we do not want people to accidently open issues or PRs concerning Svelte bugs or feature requests in our translated repository.
+
+For this reason **we modified the templates** to invite people to make sure they are posting their issue or PR to the correct repository depending on their needs.
+
+### Opening PRs
+
+On Github, when you open a PR on a forked repo, the PR will by default target to original repo. In our case, this ended up in opening half a dozen irrelevant PRs on Svelte repo, that we had to close right after.
+
+**When opening PRs for submitting a translation to your own repo, make sure to target your own repo** rather than the original one.
+
+## Environment variables
+
+You will need some environment variables, that you can set in `sites/svelte.dev/.env` file if you need them locally, or in your deployment environment if you need to [deploy](#deploying).
+
+### REPL
+
+Svelte's REPL use a [Supabase](https://supabase.com/) instance to store user data, which is referenced by the following environment variables:
+- `SUPABASE_URL`
+- `SUPABASE_KEY`
+
+For development, these variables should already be set in the `.env` (even if the key is `''`), so you do not need to modify them.
+
+However, you will need to set different values for deployment. We obviously can not access Svelte's official Supabase instance, so **we needed to create our own Supabase instance**, and provide these variables with our own values.
+
+More info on how to set up your Supabase instance [here](https://github.com/sveltejs/sites/tree/master/db).
+
+### External links
+
+The docs contains references to external sites, such as the [SvelteKit site](https://learn.svelte.dev), the [tutorial site](https://learn.svelte.dev), or the [Github organization](https://github.com/sveltejs/svelte).
+
+In order to be able to easily customize these links, **we added environment variables** representing these links:
+- `PUBLIC_SVELTE_SITE_URL`: URL of the Svelte site (not really needed in this repo)
+- `PUBLIC_KIT_SITE_URL`: URL of the SvelteKit site
+- `PUBLIC_LEARN_SITE_URL`: URL of the tutorial site
+- `PUBLIC_GITHUB_ORG`: name of the Github organization/account that hosts this project
+
+At first, the `PUBLIC_KIT_SITE_URL` and `PUBLIC_LEARN_SITE_URL` variables might be just references to the original sites, and not provide any added value. But once you complete the translations of Kit and tutorial docs sites, you might need to use these variables to reference the URLs of your translated sites.
+
+The `PUBLIC_GITHUB_ORG` variable is mainly used to provide a link to your repo when inviting people to "Edit this page".
+
+We might want to use these variables in the following files:
+- `sites/svelte.dev/scripts/get_contributors.js`
+- `sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js`
+- `sites/svelte.dev/src/routes/+layout.svelte`
+- `sites/svelte.dev/src/routes/+page.svelte`
+- `sites/svelte.dev/src/routes/_components/Hero.svelte`
+- `sites/svelte.dev/src/routes/docs/[slug]/+page.svelte`
+
+> Be careful, this list might not be exhaustive.
+
+### Markdown processing
+
+As we have seen in the previous section, the docs contains references to external sites. You might want to also reference these links in the `.md` files, but this will require to **replace the environment variables at build time**.
+
+This can done in the `sites/svelte.dev/src/lib/server/docs/index.js` file, like so:
+
+```js
+category.pages.push({
+	// ...
+	content: page_content
+		.replace(/PUBLIC_KIT_SITE_URL/g, PUBLIC_KIT_SITE_URL)
+		.replace(/PUBLIC_SVELTE_SITE_URL/g, PUBLIC_SVELTE_SITE_URL)
+		.replace(/PUBLIC_LEARN_SITE_URL/g, PUBLIC_LEARN_SITE_URL)
+		.replace(/PUBLIC_GITHUB_ORG/g, PUBLIC_GITHUB_ORG),
+	// ...
+});
+```
+
+## Translating the docs
+
+The core of the work to accomplish is in the `documentation` folder. You will find four folders : `blog`, `docs`, `examples`, `tutorial`.
+
+> You can find more information about these folders and their structure in [this section](sites/svelte.dev/README.md).
+
+### Main content
+
+#### `blog`
+
+**We did not translate anything in this folder**, because of the amount of posts to translate. Some of these posts are quite old, and it might not be very relevant to translate them.
+
+#### `docs`
+
+**We translated as much as possible in this folder**, even some strings in the code snippets so that even code examples are better understood.
+
+Do not forget to translate the `meta.json` files, which provide metadata like section titles.
+
+We did not feel necessary to translate the folder names, since it would 'only' affect URLs. This might have a bad influence on SEO. However, the subsections titles in the `.md` files that you will eventually translate will break links throughout your site. You will need to fix those before deployment.
+
+#### `examples`
+
+Since we translated code snippets in the `docs`, **we felt necessary to also translate as much as possible in this folder**.
+
+#### `tutorial`
+
+This section is the tutorial that you can access if your browser does not support the modern tools required to display the [`learn.svelte.dev` site](https://learn.svelte.dev). This version of the tutorial can be quite different from the `learn.svelte.dev` one, and would have required extra work we did not consider necessary.
+
+**We did not translate anything in this folder**, but you might feel differently about it.
+
+### UI elements
+
+Most of the translation work is related to the `documentation` folder. But **there are also some UI elements you might want to translate** to make your version complete.
+
+Some of these UI elements are located directly in the Svelte repo, others are handled by a another repo ([site-kit](https://github.com/sveltejs/site-kit)), common to all Svelte sites ([Svelte](https://svelte.dev), [SvelteKit](https://kit.svelte.dev), and the [tutorial](https://learn.svelte.dev)). This repo provides components with slots and props to handle translations.
+
+You shouldn't have to fork site-kit to provide your translations, but occasionally the Svelte team might modify some elements in the repo and forget about some i18n needs. In that case, open an issue/PR in the site-kit repo to ask for modifications.
+
+Here's the list of files in which you might need to translate UI stuff:
+- `sites/svelte.dev/src/lib/time.js`
+- `sites/svelte.dev/src/routes/(authed)/apps/+page.svelte`
+- `sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte`
+- `sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte`
+- `sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte`
+- `sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte`
+- `sites/svelte.dev/src/routes/+layout.server.js`
+- `sites/svelte.dev/src/routes/+layout.svelte`
+- `sites/svelte.dev/src/routes/+page.svelte`
+- `sites/svelte.dev/src/routes/_components/Demo.svelte`
+- `sites/svelte.dev/src/routes/_components/Hero.svelte`
+- `sites/svelte.dev/src/routes/_components/Supporters/index.svelte`
+- `sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte`
+- `sites/svelte.dev/src/routes/blog/[slug]/+page.svelte`
+- `sites/svelte.dev/src/routes/docs/[slug]/+page.svelte`
+- `sites/svelte.dev/src/routes/examples/[slug]/+page.svelte`
+- `sites/svelte.dev/src/routes/nav.json/+server.js`
+- `sites/svelte.dev/src/routes/search/+page.svelte`
+- `sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte`
+
+> Be careful, this list might not be exhaustive.
+
+Additionally, you also might want to change the `lang` attribute in `sites/svelte.dev/src/app.html`.
+
+### Interfaces
+
+The 'Types' sections of the docs directly refer to the Svelte compiler source code. For instance, the documentation [here](https://svelte.dev/docs/svelte-store#types-readable) is not written anywhere in the `documentation` folder, but in the compiler source code instead.
+
+If you want the types descriptions to also be translated, then you will need to work on these files:
+- `packages/svelte/src/compiler/interfaces.d.ts`
+- `packages/svelte/src/runtime/action/public.d.ts`
+- `packages/svelte/src/runtime/internal/dev.js`
+- `packages/svelte/src/runtime/internal/public.d.ts`
+- `packages/svelte/src/runtime/store/public.d.ts`
+
+> Be careful, this list might not be exhaustive.
+
+### AI
+
+**We did not use AI tools** to translate these docs. An attempt was made at the beginning of the project, but there were many mistakes and hallucinations, which resulted in extra time checking the generated text. Plus, it felt better to manually control the tone and variations of each sentence, even if it meant writing every word of it.
+
+You might feel differently about AI tools, use them if you find them relevant.
+
+## Glossary
+
+In a web development context, some words do not translate well in some languages – or at least in French –, even if they technically have an official translation. This is because people have taken the habit to use the original word in English rather than the translated one. These are called _anglicisms_.
+
+For example, in French, _callback_ should be translated to _fonction de rappel_. But in practice almost nobody uses the translated word, and we stick to _callback_ instead.
+
+For this reason, **we chose to remain as close as possible to the actual usage**, and keep such words in their original version.
+
+But such anglicisms might not be fully understood by some people, especially beginners in tech. So we added an [extra glossary section](documentation/docs/07-glossary) in the docs in order to provide a simple definition of the anglicisms.
+
+The glossary is divided in four sections:
+- `01-development`: generic development-related words
+- `02-web`: web-related words
+- `03-javascript`: javascript-related words
+- `04-sveltejs`: svelte-related words
+
+We tried not to be too specific in the definitions of this glossary, providing instead links to Wikipedia or MDN.
+
+> Depending on your language and on how people use anglicisms for technical words, your glossary sections might be very different from the french one, or **you might not even need such glossary**. It's up for you to decide really.
+
+### Introduction
+
+Each section of the glossary has the same introduction, which reads as follows:
+
+> You'll find herebelow some information on usual anglicisms used in the context of [X].
+> These words do not translate well in french, or their translation is rarely used. We prefer to leave their english version in the docs to remain as close as possible to actual usage.
+> This glossary section is specific to the french version of the Svelte docs, and does not exist in the official documentation.
+
+
+### Styling links
+
+To differentiate the anglicisms links from regular links, we added some styling in `sites/svelte.dev/src/routes/+layout.svelte`:
+
+```css
+:global(.text .vo a) {
+	color: var(--sk-text-1);
+	box-shadow: inset 0 -1px 0 0 var(--sk-text-4);
+	transition: color 0.2s ease-in-out;
+}
+
+:global(.text .vo a:hover) {
+	color: var(--sk-text-3);
+}
+```
+
+> `'vo'` stands for "original version" (_version originale_) in french, and is what we use to describe movies that aren't dubbed.
+
+> We tried to keep this styling as light as possible to avoid disturbing the reading. Feel free to change it.
+
+A typical link in a `.md` for anglicisms would look like this `<span class='vo'>[callback](docs/development#callback)</span>`.
+
+## Discord
+
+If you have a Discord server for your language, you might want to reference it in the `sites/svelte.dev/src/routes/chat/+server.js` file.
+
+## Deploying
+
+Thanks to SvelteKit, it should be quite easy to deploy this project.
+
+**The original site is deployed using [Vercel](https://vercel.com/), and we chose to do the same**. So we can not provide specific troubleshooting for other deployment strategies.
+
+For your deployment to succeed, you need to:
+- make sure your [environment variables](#environment-variables) are correctly set in your deployment environment
+- run `npm run build` in `sites/svelte.dev` to make sur you did not break any links by translating subsection titles (and if so, fix the links)
+
+And if this goes well, the only extra thing you might need is your dedicated domain name! :fire:
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
new file mode 100644
index 0000000000..0e0fd8a56f
--- /dev/null
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -0,0 +1,288 @@
+import type {
+	AssignmentExpression,
+	ClassDeclaration,
+	Expression,
+	FunctionDeclaration,
+	Identifier,
+	ImportDeclaration
+} from 'estree';
+import type { Location } from 'locate-character';
+import type { SourceMap } from 'magic-string';
+import type { Context } from 'zimmerframe';
+import type { Scope } from '../phases/scope.js';
+import * as Css from './css.js';
+import type { Namespace, SvelteNode } from './template.js';
+
+/** La forme de ce que renvoie `compile` du `svelte/compiler` */
+export interface CompileResult {
+	/** Le code JavaScript généré après compilation du composant */
+	js: {
+		/** Le code généré */
+		code: string;
+		/** Une <span class="vo">[sourcemap](/docs/web#sourcemap)</span> */
+		map: SourceMap;
+	};
+	/** Le code CSS compilé */
+	css: null | {
+		/** Le code généré */
+		code: string;
+		/** Une <span class="vo">[sourcemap](/docs/web#sourcemap)</span> */
+		map: SourceMap;
+	};
+	/**
+	 * * Un tableau de <span class="vo">[warnings](/docs/development#warning)</span> générés pendant la compilation. Chaque <span class="vo">[warning](/docs/development#warning)</span> possède les attributs suivants :
+	 * - `code` : une `string` identifiant la catégorie du <span class="vo">[warning](/docs/development#warning)</span>
+	 * - `message` : décrit le problème de manière intelligible
+	 * - `start` et `end` : si le <span class="vo">[warning](/docs/development#warning)</span> est relevé à un endroit particulier, ce sont des objets avec les propriétés `line`, `column` et `character`
+	 */
+	warnings: Warning[];
+	/**
+	 * Méta-données du composant compilé
+	 */
+	metadata: {
+		/**
+		 * Si oui ou non le fichier a été compilé avec le mode Runes, soit dû à une option explicite, soit inféré de l'usage.
+		 * Pour `compileModule`, ceci vaut toujours `true`
+		 */
+		runes: boolean;
+	};
+}
+
+export interface Warning {
+	start?: Location;
+	end?: Location;
+	// TODO there was pos: number in Svelte 4 - do we want to add it back?
+	code: string;
+	message: string;
+	filename?: string;
+}
+
+export interface CompileError extends Error {
+	code: string;
+	filename?: string;
+	position?: [number, number];
+	start?: Location;
+	end?: Location;
+}
+
+export type CssHashGetter = (args: {
+	name: string;
+	filename: string | undefined;
+	css: string;
+	hash: (input: string) => string;
+}) => string;
+
+export interface OptimizeOptions {
+	hydrate?: boolean;
+}
+
+export interface CompileOptions extends ModuleCompileOptions {
+	/**
+	 * Définit le nom de la classe JavaScript généré (bien que le compilateur la renomera si son nom entre en conflit avec une autre variable).
+	 * Il est normalement inféré à partir l'option `filename`.
+	 */
+	name?: string;
+	/**
+	 * Si `true`, indique au compilateur de générer un constructeur de <span class="vo">[custom element](/docs/web#web-component)</span> à la place d'un composant Svelte traditionnel.
+	 *
+	 * @default false
+	 */
+	customElement?: boolean;
+	/**
+	 * Si `true`, des <span class="vo">[getters et setters](/docs/development#getter-setter)</span> seront générés pour les <span class="vo">[props](/docs/sveltejs#props)</span> des composants. Si `false`, ils ne seront créés que pour les valeurs exportées en lecture seules (c'est-à-dire celles déclarées avec `const`, `class` et `function`). Activer l'option de compilation `customElement: true` changera la valeur par défaut de `accessors` à `true`.
+	 *
+	 * @default false
+	 */
+	accessors?: boolean;
+	/**
+	 * Le <span class="vo">[namespace](/docs/development#namespace)</span> de l'élément; par exemple, `"mathml"`, `"svg"`, `"foreign"`.
+	 *
+	 * @default 'html'
+	 */
+	namespace?: Namespace;
+	/**
+	 * Si `true`, indique au compilateur que vous vous engagez à ne pas muter d'objets.
+	 * Cela permet au compilateur d'être moins conservatif lorsqu'il vérifie si une valeur a changé.
+	 *
+	 * @default false
+	 */
+	immutable?: boolean;
+	/**
+	 * - `'injected'`: le style sera inclus dans les classes JavaScript et injecté au <span class="vo">[runtime](/docs/development#runtime)</span> pour les composants réellement rendus.
+	 * - `'external'`: le style sera renvoyé dans la propriété `css` du résultat de la compilation. La plupart des <span class="vo">[plugins](/docs/development#plugin)</span> Svelte de <span class="vo">[bundler](/docs/web#bundler-packager)</span> définiront cette option à `'external'` et utiliseront le CSS généré statiquement. Cela permet d'atteindre de meilleures performances, puisque les <span class="vo">[bundles](/docs/web#bundler-packager)</span> JavaScript seront plus petits et le style généré sous forme de fichiers `.css` pourra être mis en cache.
+	 * Cette propriété vaut toujours `'injected'` lorsque l'on compile avec le mode `customElement`.
+	 */
+	css?: 'injected' | 'external';
+	/**
+	 * Une fonction qui prend comme arguments `{ hash, css, name, filename }` et retourne un nom de classe utilisé pour le css <span class="vo">[scopé](/docs/development#scope)</span>.
+	 * La fonction par défaut retourne `svelte-${hash(css)}`.
+	 *
+	 * @default undefined
+	 */
+	cssHash?: CssHashGetter;
+	/**
+	 * Si `true`, les commentaires HTML seront conservés au cours du rendu côté serveur.
+	 * Par défault, ils sont supprimés.
+	 *
+	 * @default false
+	 */
+	preserveComments?: boolean;
+	/**
+	 * Si `true`, les caractères blancs (espaces, tabulations, ...) seront gardés tels quels, plutôt que supprimés ou fusionnés lorsque c'est possible.
+	 *
+	 * @default false
+	 */
+	preserveWhitespace?: boolean;
+	/**
+	 * Définir à `true` pour forcer le compilateur à utiliser le mode Runes, même s'il n'y a aucune indication de l'usage de Runes.
+	 * Définir à `false` pour forcer le compilateur à ignorer les Runes, même s'il y a des indications de l'usage de Runes.
+	 * Définir à `undefined` (valeur par défaut) pour inférer le mode Runes depuis le code du composant.
+	 * Vaut toujours `true` pour les modules JS/TS compilés avec Svelte.
+	 * Vaudra `true` par défaut avec Svelte 6.
+	 * @default undefined
+	 */
+	runes?: boolean | undefined;
+	/**
+	 * Si `true`, expose la version majeure de Svelte dans l'objet global `window` du navigateur.
+	 *
+	 * @default true
+	 */
+	discloseVersion?: boolean;
+	/**
+	 * @deprecated N'utilisez ceci que comme une solution temporaire avant de migrer votre code.
+	 */
+	legacy?: {
+		/**
+		 * Applique une transformation de sorte que l'export par défaut des fichiers Svelte puisse toujours être instancié de la même façon qu'avec Svelte 4 –
+		 * comme une classe lorsque l'on compile pour le navigateur (mais en utilisant `createClassComponent(MyComponent, {...})` depuis `svelte/legacy`)
+		 * ou comme un objet avec une méthode `.render(...)` lorsque l'on compile pour le serveur
+		 * @default false
+		 */
+		componentApi?: boolean;
+	};
+	/**
+	 * Une <span class="vo">[sourcemap](/docs/web#sourcemap)</span> initiale qui sera fusionnée dans la sourcemap finale.
+	 * C'est souvent la sourcemap du pré-processeur.
+	 *
+	 * @default null
+	 */
+	sourcemap?: object | string;
+	/**
+	 * Nom de fichier utilisé pour les <span class="vo">[sourcemaps](/docs/web#sourcemap)</span> JavaScript.
+	 *
+	 * @default null
+	 */
+	outputFilename?: string;
+	/**
+	 * Nom de fichier utilisé pour les <span class="vo">[sourcemaps](/docs/web#sourcemap)</span> CSS.
+	 *
+	 * @default null
+	 */
+	cssOutputFilename?: string;
+
+	// Other Svelte 4 compiler options:
+	// enableSourcemap?: EnableSourcemap; // TODO bring back? https://github.com/sveltejs/svelte/pull/6835
+	// legacy?: boolean; // TODO compiler error noting the new purpose?
+}
+
+export interface ModuleCompileOptions {
+	/**
+	 * If `true`, causes extra code to be added that will perform runtime checks and provide debugging information during development.
+	 *
+	 * @default false
+	 */
+	dev?: boolean;
+	/**
+	 * If `"client"`, Svelte emits code designed to run in the browser.
+	 * If `"server"`, Svelte emits code suitable for server-side rendering.
+	 * If `false`, nothing is generated. Useful for tooling that is only interested in warnings.
+	 *
+	 * @default 'client'
+	 */
+	generate?: 'client' | 'server' | false;
+	/**
+	 * Used for debugging hints and sourcemaps. Your bundler plugin will set it automatically.
+	 */
+	filename?: string;
+}
+
+// The following two somewhat scary looking types ensure that certain types are required but can be undefined still
+
+export type ValidatedModuleCompileOptions = Omit<Required<ModuleCompileOptions>, 'filename'> & {
+	filename: ModuleCompileOptions['filename'];
+};
+
+export type ValidatedCompileOptions = ValidatedModuleCompileOptions &
+	Omit<
+		Required<CompileOptions>,
+		| keyof ModuleCompileOptions
+		| 'name'
+		| 'legacy'
+		| 'outputFilename'
+		| 'cssOutputFilename'
+		| 'sourcemap'
+		| 'runes'
+	> & {
+		name: CompileOptions['name'];
+		outputFilename: CompileOptions['outputFilename'];
+		cssOutputFilename: CompileOptions['cssOutputFilename'];
+		sourcemap: CompileOptions['sourcemap'];
+		legacy: Required<Required<CompileOptions>['legacy']>;
+		runes: CompileOptions['runes'];
+	};
+
+export type DeclarationKind =
+	| 'var'
+	| 'let'
+	| 'const'
+	| 'function'
+	| 'import'
+	| 'param'
+	| 'synthetic';
+
+export interface Binding {
+	node: Identifier;
+	/**
+	 * - `normal`: A variable that is not in any way special
+	 * - `prop`: A normal prop (possibly mutated)
+	 * - `rest_prop`: A rest prop
+	 * - `state`: A state variable
+	 * - `derived`: A derived variable
+	 * - `each`: An each block context variable
+	 * - `store_sub`: A $store value
+	 * - `legacy_reactive`: A `$:` declaration
+	 */
+	kind:
+		| 'normal'
+		| 'prop'
+		| 'rest_prop'
+		| 'state'
+		| 'derived'
+		| 'each'
+		| 'store_sub'
+		| 'legacy_reactive';
+	declaration_kind: DeclarationKind;
+	/**
+	 * What the value was initialized with.
+	 * For destructured props such as `let { foo = 'bar' } = $props()` this is `'bar'` and not `$props()`
+	 */
+	initial: null | Expression | FunctionDeclaration | ClassDeclaration | ImportDeclaration;
+	is_called: boolean;
+	references: { node: Identifier; path: SvelteNode[] }[];
+	mutated: boolean;
+	scope: Scope;
+	/** For `legacy_reactive`: its reactive dependencies */
+	legacy_dependencies: Binding[];
+	/** Legacy props: the `class` in `{ export klass as class}` */
+	prop_alias: string | null;
+	/** If this is set, all references should use this expression instead of the identifier name */
+	expression: Expression | null;
+	/** If this is set, all mutations should use this expression */
+	mutation: ((assignment: AssignmentExpression, context: Context<any, any>) => Expression) | null;
+}
+
+export * from './template.js';
+export { Css };
+
+// TODO this chain is a bit weird
+export { ReactiveStatement } from '../phases/types.js';
diff --git a/packages/svelte/src/main/public.d.ts b/packages/svelte/src/main/public.d.ts
new file mode 100644
index 0000000000..a6d6d43b6e
--- /dev/null
+++ b/packages/svelte/src/main/public.d.ts
@@ -0,0 +1,205 @@
+// This should contain all the public interfaces (not all of them are actually importable, check current Svelte for which ones are).
+
+/**
+ * @deprecated Svelte components were classes in Svelte 4. In Svelte 5, thy are not anymore.
+ * Use `mount` or `createRoot` instead to instantiate components.
+ * See [breaking changes](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes)
+ * for more info.
+ */
+export interface ComponentConstructorOptions<
+	Props extends Record<string, any> = Record<string, any>
+> {
+	target: Element | Document | ShadowRoot;
+	anchor?: Element;
+	props?: Props;
+	context?: Map<any, any>;
+	hydrate?: boolean;
+	intro?: boolean;
+	$$inline?: boolean;
+}
+
+/**
+ * Can be used to create strongly typed Svelte components.
+ *
+ * #### Example:
+ *
+ * You have component library on npm called `component-library`, from which
+ * you export a component called `MyComponent`. For Svelte+TypeScript users,
+ * you want to provide typings. Therefore you create a `index.d.ts`:
+ * ```ts
+ * import { SvelteComponent } from "svelte";
+ * export class MyComponent extends SvelteComponent<{foo: string}> {}
+ * ```
+ * Typing this makes it possible for IDEs like VS Code with the Svelte extension
+ * to provide intellisense and to use the component like this in a Svelte file
+ * with TypeScript:
+ * ```svelte
+ * <script lang="ts">
+ * 	import { MyComponent } from "component-library";
+ * </script>
+ * <MyComponent foo={'bar'} />
+ * ```
+ *
+ * This was the base class for Svelte components in Svelte 4. Svelte 5+ components
+ * are completely different under the hood. You should only use this type for typing,
+ * not actually instantiate components with `new` - use `mount` or `createRoot` instead.
+ * See [breaking changes](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes)
+ * for more info.
+ */
+export class SvelteComponent<
+	Props extends Record<string, any> = any,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any
+> {
+	[prop: string]: any;
+
+	/**
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	constructor(props: Props);
+	/**
+	 * @deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which
+	 * is a stop-gap solution. Migrate towards using `mount` or `createRoot` instead. See
+	 * https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more info.
+	 */
+	constructor(options: ComponentConstructorOptions<Props>);
+	/**
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 * */
+	$$prop_def: Props;
+	/**
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 *
+	 * */
+	$$events_def: Events;
+	/**
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 *
+	 * */
+	$$slot_def: Slots;
+
+	/**
+	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+	 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+	 * for more info.
+	 */
+	$destroy(): void;
+
+	/**
+	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+	 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+	 * for more info.
+	 */
+	$on<K extends Extract<keyof Events, string>>(
+		type: K,
+		callback: (e: Events[K]) => void
+	): () => void;
+
+	/**
+	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+	 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+	 * for more info.
+	 */
+	$set(props: Partial<Props>): void;
+}
+
+/**
+ * @deprecated Utilisez plutôt `SvelteComponent`. Voir TODO pour plus d'informations.
+ */
+export class SvelteComponentTyped<
+	Props extends Record<string, any> = any,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any
+> extends SvelteComponent<Props, Events, Slots> {}
+
+/**
+ * Type utile pour obtenir les évènements qu'un composant attend. Exemple :
+ * ```html
+ * <script lang="ts">
+ *    import type { ComponentEvents } from 'svelte';
+ *    import Component from './Component.svelte';
+ *
+ *    function handleCloseEvent(event: ComponentEvents<Component>['close']) {
+ *       console.log(event.detail);
+ *    }
+ * </script>
+ *
+ * <Component on:close={handleCloseEvent} />
+ * ```
+ */
+export type ComponentEvents<Comp extends SvelteComponent> = Comp extends SvelteComponent<
+	any,
+	infer Events
+>
+	? Events
+	: never;
+
+/**
+ * Type utile pour obtenir les <span class='vo'>[props](/docs/sveltejs#props)</span> qu'un composant attend. Exemple :
+ * ```html
+ * <script lang="ts">
+ * 	import type { ComponentProps } from 'svelte';
+ * 	import Component from './Component.svelte';
+ *
+ * 	const props: ComponentProps<Component> = { foo: 'bar' }; // Affiche une erreur si ceci ne contient pas les bonnes props
+ * </script>
+ * ```
+ */
+export type ComponentProps<Comp extends SvelteComponent> = Comp extends SvelteComponent<infer Props>
+	? Props
+	: never;
+
+/**
+ * Type utile pour obtenir le type d'un composant Svelte. Utile en combinaison avec les
+ * composants dynamiques utilisant `<svelte:component>`.
+ *
+ * Exemple:
+ * ```html
+ * <script lang="ts">
+ * 	import type { ComponentType, SvelteComponent } from 'svelte';
+ * 	import Component1 from './Component1.svelte';
+ * 	import Component2 from './Component2.svelte';
+ *
+ * 	const component: ComponentType = someLogic() ? Component1 : Component2;
+ * 	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
+ * </script>
+ *
+ * <svelte:component this={component} />
+ * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
+ * ```
+ */
+export type ComponentType<Comp extends SvelteComponent> = (new (
+	options: ComponentConstructorOptions<
+		Comp extends SvelteComponent<infer Props> ? Props : Record<string, any>
+	>
+) => Comp) & {
+	/** La version "web component" du composant. Seulement présent si compilé avec l'option `customElement` */
+	element?: typeof HTMLElement;
+};
+
+interface DispatchOptions {
+	cancelable?: boolean;
+}
+
+export interface EventDispatcher<EventMap extends Record<string, any>> {
+	// Implementation notes:
+	// - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
+	// - | null | undefined is added for convenience, as they are equivalent for the custom event constructor (both result in a null detail)
+	<Type extends keyof EventMap>(
+		...args: null extends EventMap[Type]
+			? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
+			: undefined extends EventMap[Type]
+			? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
+			: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
+	): boolean;
+}
+
+export * from './main-client.js';
diff --git a/packages/svelte/src/runtime/action/public.d.ts b/packages/svelte/src/runtime/action/public.d.ts
index d6d41d9816..bbb677c7f4 100644
--- a/packages/svelte/src/runtime/action/public.d.ts
+++ b/packages/svelte/src/runtime/action/public.d.ts
@@ -1,14 +1,15 @@
 /**
- * Actions can return an object containing the two properties defined in this interface. Both are optional.
- * - update: An action can have a parameter. This method will be called whenever that parameter changes,
- *   immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both
- *   mean that the action accepts no parameters.
- * - destroy: Method that is called after the element is unmounted
+ * Les actions peuvent renvoyer un objet contenant les deux propriétés définies dans cette interface.
+ * Les deux sont optionnelles.
+ * - update: Une action peut avoir un paramètre. Cette méthode est appelée à chaque fois que ce paramètre change,
+ *   juste après que Svelte ait appliqué les mises à jour au <span class="vo">[markup](/docs/web#markup)</span>.
+ * 	 `ActionReturn` et `ActionReturn<undefined>` signifient toutes les deux que l'action n'accepte pas de paramètre.
+ * - destroy: Méthode qui est appelée après la destruction de l'élément
  *
- * Additionally, you can specify which additional attributes and events the action enables on the applied element.
- * This applies to TypeScript typings only and has no effect at runtime.
+ * De plus, vous pouvez spécifier quels attributs et évènements additionnels l'action apporte à l'élément sur lequel elle est appliquée.
+ * Ceci n'a d'impact que sur les types Typescript et n'a pas d'effet au moment de l'exécution.
  *
- * Example usage:
+ * Exemple d'usage:
  * ```ts
  * interface Attributes {
  * 	newprop?: string;
@@ -41,19 +42,19 @@ export interface ActionReturn<
 }
 
 /**
- * Actions are functions that are called when an element is created.
- * You can use this interface to type such actions.
- * The following example defines an action that only works on `<div>` elements
- * and optionally accepts a parameter which it has a default value for:
+ * Les actions sont des fonctions exécutées lorsqu'un élément est créé.
+ * Vous pouvez utiliser cette interface pour les typer.
+ * L'exemple suivant définit une action qui ne fonctionne que pour les éléments `<div>`
+ * et accepte un paramètre optionnel qui a une valeur par défaut :
  * ```ts
  * export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
  *   // ...
  * }
  * ```
- * `Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.
+ * `Action<HTMLDivElement>` et `Action<HTMLDivElement, undefined>` indiquent tous les deux que l'action n'accepte pas de paramètre.
  *
- * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
- * See interface `ActionReturn` for more details.
+ * Une action peut renvoyer un objet avec les méthodes `update` et `destroy`, et vous pouvez typer quels attributs et évènements elle apporte.
+ * Voir l'interface `ActionReturn` pour plus de détails.
  *
  * Docs: https://svelte.dev/docs/svelte-action
  */
diff --git a/packages/svelte/src/runtime/store/public.d.ts b/packages/svelte/src/runtime/store/public.d.ts
index 9655a15674..0b488687d9 100644
--- a/packages/svelte/src/runtime/store/public.d.ts
+++ b/packages/svelte/src/runtime/store/public.d.ts
@@ -1,49 +1,50 @@
 import { Invalidator } from './private.js';
 
-/** Callback to inform of a value updates. */
+/** <span class="vo">[Callback](/docs/development#callback)</span> pour informer des changements d'une valeur. */
 export type Subscriber<T> = (value: T) => void;
 
-/** Unsubscribes from value updates. */
+/** Permet de se désabonner des changements d'une valeur */
 export type Unsubscriber = () => void;
 
-/** Callback to update a value. */
+/** <span class="vo">[Callback](/docs/development#callback)</span> pour mettre à jour une valeur. */
 export type Updater<T> = (value: T) => T;
 
 /**
- * Start and stop notification callbacks.
- * This function is called when the first subscriber subscribes.
+ * Lance et arrête les <span class="vo">[callbacks](/docs/development#callback)</span> d'abonnement.
+ * Cette fonction est appelée quand le premier abonné s'abonne.
  *
- * @param {(value: T) => void} set Function that sets the value of the store.
- * @param {(value: Updater<T>) => void} update Function that sets the value of the store after passing the current value to the update function.
- * @returns {void | (() => void)} Optionally, a cleanup function that is called when the last remaining
- * subscriber unsubscribes.
+ * @param {(value: T) => void} set Fonction qui change la valeur du <span class="vo">[store](/docs/sveltejs#store)</span>.
+ *
+ * @param {(value: Updater<T>) => void} update Fonction qui change la valeur du <span class="vo">[store](/docs/sveltejs#store)</span>
+ * après avoir passé la valeur actuelle à la fonction de mise à jour.
+ * @returns {void | (() => void)} Une fonction de nettoyage optionnelle qui est appelée quand le dernier abonné se désabonne.
  */
 export type StartStopNotifier<T> = (
 	set: (value: T) => void,
 	update: (fn: Updater<T>) => void
 ) => void | (() => void);
 
-/** Readable interface for subscribing. */
+/** Interface Readable pour s'abonner. */
 export interface Readable<T> {
 	/**
-	 * Subscribe on value changes.
-	 * @param run subscription callback
-	 * @param invalidate cleanup callback
+	 * Permet de s'abonner aux changements de valeur.
+	 * @param run <span class="vo">[callback](/docs/development#callback)</span> d'abonnement
+	 * @param invalidate <span class="vo">[callback](/docs/development#callback)</span> de nettoyage
 	 */
 	subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;
 }
 
-/** Writable interface for both updating and subscribing. */
+/** Interface Writable for s'abonner et mettre à jour. */
 export interface Writable<T> extends Readable<T> {
 	/**
-	 * Set value and inform subscribers.
-	 * @param value to set
+	 * Change la valeur et informe les abonnés.
+	 * @param value une valeur
 	 */
 	set(this: void, value: T): void;
 
 	/**
-	 * Update value using callback and inform subscribers.
-	 * @param updater callback
+	 * Met la valeur à jour en utilisant le <span class="vo">[callback](/docs/development#callback)</span> et informe les abonnés.
+	 * @param updater <span class="vo">[callback](/docs/development#callback)</span>
 	 */
 	update(this: void, updater: Updater<T>): void;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e803a2101d..30c4cae31d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,16 +16,16 @@ importers:
         version: 1.1.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.60.0
-        version: 5.60.0(@typescript-eslint/parser@5.62.0)(eslint@8.44.0)(typescript@5.2.2)
+        version: 5.60.0(@typescript-eslint/parser@5.62.0)(eslint@8.53.0)(typescript@5.2.2)
       eslint:
         specifier: ^8.44.0
-        version: 8.44.0
+        version: 8.53.0
       eslint-plugin-svelte:
         specifier: ^2.32.2
-        version: 2.32.2(eslint@8.44.0)(svelte@packages+svelte)
+        version: 2.32.2(eslint@8.53.0)(svelte@packages+svelte)
       eslint-plugin-unicorn:
         specifier: ^47.0.0
-        version: 47.0.0(eslint@8.44.0)
+        version: 47.0.0(eslint@8.53.0)
       playwright:
         specifier: ^1.35.1
         version: 1.35.1
@@ -46,10 +46,10 @@ importers:
         version: 1.4.15
       '@jridgewell/trace-mapping':
         specifier: ^0.3.18
-        version: 0.3.18
+        version: 0.3.20
       acorn:
         specifier: ^8.9.0
-        version: 8.9.0
+        version: 8.10.0
       aria-query:
         specifier: ^5.3.0
         version: 5.3.0
@@ -83,22 +83,22 @@ importers:
         version: 1.35.1
       '@rollup/plugin-commonjs':
         specifier: ^24.1.0
-        version: 24.1.0(rollup@3.26.2)
+        version: 24.1.0(rollup@3.27.1)
       '@rollup/plugin-json':
         specifier: ^6.0.0
-        version: 6.0.0(rollup@3.26.2)
+        version: 6.0.1(rollup@3.27.1)
       '@rollup/plugin-node-resolve':
         specifier: ^15.1.0
-        version: 15.1.0(rollup@3.26.2)
+        version: 15.2.3(rollup@3.27.1)
       '@sveltejs/eslint-config':
         specifier: ^6.0.4
-        version: 6.0.4(@typescript-eslint/eslint-plugin@5.60.0)(@typescript-eslint/parser@6.8.0)(eslint-config-prettier@9.0.0)(eslint-plugin-svelte@2.34.0)(eslint-plugin-unicorn@47.0.0)(eslint@8.51.0)(typescript@5.1.3)
+        version: 6.0.4(@typescript-eslint/eslint-plugin@5.60.0)(@typescript-eslint/parser@5.62.0)(eslint-config-prettier@8.10.0)(eslint-plugin-svelte@2.32.2)(eslint-plugin-unicorn@47.0.0)(eslint@8.53.0)(typescript@5.2.2)
       '@types/aria-query':
         specifier: ^5.0.1
-        version: 5.0.1
+        version: 5.0.4
       '@types/estree':
         specifier: ^1.0.1
-        version: 1.0.1
+        version: 1.0.5
       '@types/node':
         specifier: ^14.18.51
         version: 14.18.51
@@ -107,10 +107,10 @@ importers:
         version: 3.0.0
       dts-buddy:
         specifier: ^0.1.7
-        version: 0.1.7
+        version: 0.1.14
       esbuild:
         specifier: ^0.18.11
-        version: 0.18.11
+        version: 0.18.17
       eslint-plugin-lube:
         specifier: ^0.1.7
         version: 0.1.7
@@ -125,7 +125,7 @@ importers:
         version: 4.1.5
       rollup:
         specifier: ^3.26.2
-        version: 3.26.2
+        version: 3.27.1
       source-map:
         specifier: ^0.7.4
         version: 0.7.4
@@ -134,7 +134,7 @@ importers:
         version: 0.2.9
       typescript:
         specifier: ^5.1.3
-        version: 5.1.3
+        version: 5.2.2
       vitest:
         specifier: ^0.33.0
         version: 0.33.0(happy-dom@9.20.3)(jsdom@22.0.0)(playwright@1.35.1)
@@ -143,7 +143,7 @@ importers:
     devDependencies:
       rollup:
         specifier: ^3.25.1
-        version: 3.26.2
+        version: 3.27.1
       rollup-plugin-serve:
         specifier: ^2.0.2
         version: 2.0.2
@@ -161,7 +161,7 @@ importers:
         version: 2.33.2
       '@sveltejs/repl':
         specifier: 0.6.0
-        version: 0.6.0(@codemirror/lang-html@6.4.6)(@codemirror/search@6.5.4)(@lezer/common@1.1.0)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13)(@sveltejs/kit@1.26.0)(svelte@packages+svelte)
+        version: 0.6.0(@codemirror/lang-html@6.4.5)(@codemirror/search@6.5.0)(@lezer/common@1.1.1)(@lezer/javascript@1.4.5)(@lezer/lr@1.3.9)(@sveltejs/kit@1.27.1)(svelte@packages+svelte)
       cookie:
         specifier: ^0.5.0
         version: 0.5.0
@@ -183,13 +183,13 @@ importers:
         version: 2.4.1
       '@sveltejs/adapter-vercel':
         specifier: ^3.0.3
-        version: 3.0.3(@sveltejs/kit@1.26.0)
+        version: 3.0.3(@sveltejs/kit@1.27.1)
       '@sveltejs/kit':
         specifier: ^1.26.0
-        version: 1.26.0(svelte@packages+svelte)(vite@4.4.9)
+        version: 1.27.1(svelte@packages+svelte)(vite@4.4.9)
       '@sveltejs/site-kit':
         specifier: 6.0.0-next.50
-        version: 6.0.0-next.50(@sveltejs/kit@1.26.0)(svelte@packages+svelte)
+        version: 6.0.0-next.50(@sveltejs/kit@1.27.1)(svelte@packages+svelte)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^2.4.6
         version: 2.4.6(svelte@packages+svelte)(vite@4.4.9)
@@ -198,7 +198,7 @@ importers:
         version: 0.5.2
       '@types/node':
         specifier: ^20.5.9
-        version: 20.6.1
+        version: 20.5.9
       browserslist:
         specifier: ^4.21.10
         version: 4.21.10
@@ -249,10 +249,10 @@ importers:
         version: link:../../packages/svelte
       svelte-check:
         specifier: ^3.5.1
-        version: 3.5.1(postcss@8.4.31)(sass@1.67.0)(svelte@packages+svelte)
+        version: 3.5.1(postcss@8.4.27)(sass@1.67.0)(svelte@packages+svelte)
       svelte-preprocess:
         specifier: ^5.0.4
-        version: 5.0.4(postcss@8.4.31)(sass@1.67.0)(svelte@packages+svelte)(typescript@5.2.2)
+        version: 5.0.4(postcss@8.4.27)(sass@1.67.0)(svelte@packages+svelte)(typescript@5.2.2)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -261,7 +261,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^4.4.9
-        version: 4.4.9(@types/node@20.6.1)(lightningcss@1.21.8)(sass@1.67.0)
+        version: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
       vite-imagetools:
         specifier: ^5.0.8
         version: 5.0.8
@@ -278,7 +278,7 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.18
+      '@jridgewell/trace-mapping': 0.3.20
     dev: false
 
   /@babel/code-frame@7.22.5:
@@ -324,7 +324,7 @@ packages:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 5.7.2
+      semver: 5.7.1
     dev: true
 
   /@changesets/assemble-release-plan@5.2.3:
@@ -335,7 +335,7 @@ packages:
       '@changesets/get-dependents-graph': 1.3.5
       '@changesets/types': 5.2.1
       '@manypkg/get-packages': 1.1.3
-      semver: 5.7.2
+      semver: 5.7.1
     dev: true
 
   /@changesets/changelog-git@0.1.14:
@@ -377,7 +377,7 @@ packages:
       p-limit: 2.3.0
       preferred-pm: 3.0.3
       resolve-from: 5.0.0
-      semver: 5.7.2
+      semver: 5.7.1
       spawndamnit: 2.0.0
       term-size: 2.2.1
       tty-table: 4.2.1
@@ -408,7 +408,7 @@ packages:
       '@manypkg/get-packages': 1.1.3
       chalk: 2.4.2
       fs-extra: 7.0.1
-      semver: 5.7.2
+      semver: 5.7.1
     dev: true
 
   /@changesets/get-github-info@0.5.2:
@@ -502,51 +502,65 @@ packages:
       prettier: 2.8.8
     dev: true
 
-  /@codemirror/autocomplete@6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0):
-    resolution: {integrity: sha512-3dCL7b0j2GdtZzWN5j7HDpRAJ26ip07R4NGYz7QYthIYMiX8I4E4TNrYcdTayPJGeVQtd/xe7lWU4XL7THFb/w==}
+  /@codemirror/autocomplete@6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.0.3):
+    resolution: {integrity: sha512-LCPH3W+hl5vcO7OzEQgX6NpKuKVyiKFLGAy7FXROF6nUpsWUdQEgUb3fe/g7B0E1KZCRFfgzdKASt6Wly2UOBg==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.9.2
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.0.3
+    dev: false
+
+  /@codemirror/autocomplete@6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.1):
+    resolution: {integrity: sha512-LCPH3W+hl5vcO7OzEQgX6NpKuKVyiKFLGAy7FXROF6nUpsWUdQEgUb3fe/g7B0E1KZCRFfgzdKASt6Wly2UOBg==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
       '@codemirror/view': ^6.0.0
       '@lezer/common': ^1.0.0
     dependencies:
-      '@codemirror/language': 6.9.1
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
-      '@lezer/common': 1.1.0
+      '@codemirror/language': 6.9.2
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.1.1
     dev: false
 
   /@codemirror/commands@6.3.0:
     resolution: {integrity: sha512-tFfcxRIlOWiQDFhjBSWJ10MxcvbCIsRr6V64SgrcaY0MwNk32cUOcCuNlWo8VjV4qRQCgNgUAnIeo0svkk4R5Q==}
     dependencies:
-      '@codemirror/language': 6.9.1
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
-      '@lezer/common': 1.1.0
+      '@codemirror/language': 6.9.2
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.1.1
     dev: false
 
-  /@codemirror/lang-css@6.2.1(@codemirror/view@6.21.3):
+  /@codemirror/lang-css@6.2.1(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
-      '@codemirror/state': 6.3.1
-      '@lezer/common': 1.1.0
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.0.3)
+      '@codemirror/language': 6.9.2
+      '@codemirror/state': 6.2.1
+      '@lezer/common': 1.0.3
       '@lezer/css': 1.1.3
     transitivePeerDependencies:
       - '@codemirror/view'
     dev: false
 
-  /@codemirror/lang-html@6.4.6:
-    resolution: {integrity: sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==}
+  /@codemirror/lang-html@6.4.5:
+    resolution: {integrity: sha512-dUCSxkIw2G+chaUfw3Gfu5kkN83vJQN8gfQDp9iEHsIZluMJA0YJveT12zg/28BJx+uPsbQ6VimKCgx3oJrZxA==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.0.3)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
       '@codemirror/lang-javascript': 6.2.1
-      '@codemirror/language': 6.9.1
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
-      '@lezer/common': 1.1.0
+      '@codemirror/language': 6.9.2
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.0.3
       '@lezer/css': 1.1.3
       '@lezer/html': 1.3.6
     dev: false
@@ -554,106 +568,79 @@ packages:
   /@codemirror/lang-javascript@6.2.1:
     resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.0.3)
+      '@codemirror/language': 6.9.2
       '@codemirror/lint': 6.4.2
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
-      '@lezer/common': 1.1.0
-      '@lezer/javascript': 1.4.8
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.0.3
+      '@lezer/javascript': 1.4.5
     dev: false
 
   /@codemirror/lang-json@6.0.1:
     resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/json': 1.0.1
     dev: false
 
   /@codemirror/lang-markdown@6.2.2:
     resolution: {integrity: sha512-wmwM9Y5n/e4ndU51KcYDaQnb9goYdhXjU71dDW9goOc1VUTIPph6WKAPdJ6BzC0ZFy+UTsDwTXGWSP370RH69Q==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/lang-html': 6.4.6
-      '@codemirror/language': 6.9.1
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
-      '@lezer/common': 1.1.0
-      '@lezer/markdown': 1.1.0
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.0.3)
+      '@codemirror/lang-html': 6.4.5
+      '@codemirror/language': 6.9.2
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.0.3
+      '@lezer/markdown': 1.0.5
     dev: false
 
-  /@codemirror/language@6.9.1:
-    resolution: {integrity: sha512-lWRP3Y9IUdOms6DXuBpoWwjkR7yRmnS0hKYCbSfPz9v6Em1A1UCRujAkDiCrdYfs1Z0Eu4dGtwovNPStIfkgNA==}
+  /@codemirror/language@6.9.2:
+    resolution: {integrity: sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==}
     dependencies:
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
-      '@lezer/common': 1.1.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.1.1
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
-      style-mod: 4.1.0
+      '@lezer/lr': 1.3.9
+      style-mod: 4.0.3
     dev: false
 
   /@codemirror/lint@6.4.2:
     resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==}
     dependencies:
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
       crelt: 1.0.6
     dev: false
 
-  /@codemirror/search@6.5.4:
-    resolution: {integrity: sha512-YoTrvjv9e8EbPs58opjZKyJ3ewFrVSUzQ/4WXlULQLSDDr1nGPJ67mMXFNNVYwdFhybzhrzrtqgHmtpJwIF+8g==}
+  /@codemirror/search@6.5.0:
+    resolution: {integrity: sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==}
     dependencies:
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
       crelt: 1.0.6
     dev: false
 
-  /@codemirror/state@6.3.1:
-    resolution: {integrity: sha512-88e4HhMtKJyw6fKprGaN/yZfiaoGYOi2nM45YCUC6R/kex9sxFWBDGatS1vk4lMgnWmdIIB9tk8Gj1LmL8YfvA==}
+  /@codemirror/state@6.2.1:
+    resolution: {integrity: sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==}
     dev: false
 
-  /@codemirror/view@6.21.3:
-    resolution: {integrity: sha512-8l1aSQ6MygzL4Nx7GVYhucSXvW4jQd0F6Zm3v9Dg+6nZEfwzJVqi4C2zHfDljID+73gsQrWp9TgHc81xU15O4A==}
+  /@codemirror/view@6.22.0:
+    resolution: {integrity: sha512-6zLj4YIoIpfTGKrDMTbeZRpa8ih4EymMCKmddEDcJWrCdp/N1D46B38YEz4creTb4T177AVS9EyXkLeC/HL2jA==}
     dependencies:
-      '@codemirror/state': 6.3.1
+      '@codemirror/state': 6.2.1
       style-mod: 4.1.0
       w3c-keyname: 2.2.8
     dev: false
 
-  /@esbuild/android-arm64@0.18.11:
-    resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-arm64@0.18.17:
     resolution: {integrity: sha512-9np+YYdNDed5+Jgr1TdWBsozZ85U1Oa3xW0c7TWqH0y2aGghXtZsuT8nYRbzOMcl0bXZXjOGbksoTtVOlWrRZg==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/android-arm64@0.18.20:
-    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/android-arm@0.18.11:
-    resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm@0.18.17:
@@ -662,24 +649,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/android-arm@0.18.20:
-    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/android-x64@0.18.11:
-    resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.18.17:
@@ -688,24 +657,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/android-x64@0.18.20:
-    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/darwin-arm64@0.18.11:
-    resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.18.17:
@@ -714,24 +665,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/darwin-arm64@0.18.20:
-    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/darwin-x64@0.18.11:
-    resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.18.17:
@@ -740,24 +673,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/darwin-x64@0.18.20:
-    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/freebsd-arm64@0.18.11:
-    resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.18.17:
@@ -766,24 +681,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/freebsd-arm64@0.18.20:
-    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/freebsd-x64@0.18.11:
-    resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.18.17:
@@ -792,24 +689,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/freebsd-x64@0.18.20:
-    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-arm64@0.18.11:
-    resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.18.17:
@@ -818,24 +697,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-arm64@0.18.20:
-    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-arm@0.18.11:
-    resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.18.17:
@@ -844,24 +705,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-arm@0.18.20:
-    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-ia32@0.18.11:
-    resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.18.17:
@@ -870,24 +713,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-ia32@0.18.20:
-    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-loong64@0.18.11:
-    resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.18.17:
@@ -896,24 +721,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-loong64@0.18.20:
-    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-mips64el@0.18.11:
-    resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.18.17:
@@ -922,24 +729,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-mips64el@0.18.20:
-    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-ppc64@0.18.11:
-    resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.18.17:
@@ -948,24 +737,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-ppc64@0.18.20:
-    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-riscv64@0.18.11:
-    resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.18.17:
@@ -974,24 +745,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-riscv64@0.18.20:
-    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-s390x@0.18.11:
-    resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.18.17:
@@ -1000,24 +753,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-s390x@0.18.20:
-    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-x64@0.18.11:
-    resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.18.17:
@@ -1026,24 +761,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-x64@0.18.20:
-    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/netbsd-x64@0.18.11:
-    resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.18.17:
@@ -1052,24 +769,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/netbsd-x64@0.18.20:
-    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/openbsd-x64@0.18.11:
-    resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.18.17:
@@ -1078,24 +777,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/openbsd-x64@0.18.20:
-    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/sunos-x64@0.18.11:
-    resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.18.17:
@@ -1104,24 +785,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/sunos-x64@0.18.20:
-    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/win32-arm64@0.18.11:
-    resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.18.17:
@@ -1130,24 +793,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-arm64@0.18.20:
-    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/win32-ia32@0.18.11:
-    resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.18.17:
@@ -1156,24 +801,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-ia32@0.18.20:
-    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/win32-x64@0.18.11:
-    resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.18.17:
@@ -1182,72 +809,31 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-x64@0.18.20:
-    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.44.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.53.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.44.0
-      eslint-visitor-keys: 3.4.1
-    dev: true
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.51.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.51.0
-      eslint-visitor-keys: 3.4.1
-    dev: true
-
-  /@eslint-community/regexpp@4.5.1:
-    resolution: {integrity: sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+      eslint: 8.53.0
+      eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@eslint-community/regexpp@4.9.1:
-    resolution: {integrity: sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==}
+  /@eslint-community/regexpp@4.6.2:
+    resolution: {integrity: sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
-  /@eslint/eslintrc@2.1.0:
-    resolution: {integrity: sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.0
-      globals: 13.20.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@eslint/eslintrc@2.1.2:
-    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
+  /@eslint/eslintrc@2.1.3:
+    resolution: {integrity: sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
       debug: 4.3.4
       espree: 9.6.1
-      globals: 13.23.0
+      globals: 13.20.0
       ignore: 5.2.4
       import-fresh: 3.3.0
       js-yaml: 4.1.0
@@ -1257,13 +843,8 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/js@8.44.0:
-    resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
-  /@eslint/js@8.51.0:
-    resolution: {integrity: sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==}
+  /@eslint/js@8.53.0:
+    resolution: {integrity: sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -1271,22 +852,11 @@ packages:
     resolution: {integrity: sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==}
     engines: {node: '>=14'}
 
-  /@humanwhocodes/config-array@0.11.10:
-    resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@humanwhocodes/config-array@0.11.11:
-    resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
+  /@humanwhocodes/config-array@0.11.13:
+    resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
+      '@humanwhocodes/object-schema': 2.0.1
       debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
@@ -1298,8 +868,8 @@ packages:
     engines: {node: '>=12.22'}
     dev: true
 
-  /@humanwhocodes/object-schema@1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
+  /@humanwhocodes/object-schema@2.0.1:
+    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
   /@jest/schemas@29.6.0:
@@ -1661,96 +1231,85 @@ packages:
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.18
+      '@jridgewell/trace-mapping': 0.3.20
 
   /@jridgewell/resolve-uri@3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
 
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
-    engines: {node: '>=6.0.0'}
-    dev: true
-
   /@jridgewell/set-array@1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
 
-  /@jridgewell/source-map@0.3.3:
-    resolution: {integrity: sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==}
+  /@jridgewell/source-map@0.3.5:
+    resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.18
+      '@jridgewell/trace-mapping': 0.3.20
     dev: true
 
-  /@jridgewell/sourcemap-codec@1.4.14:
-    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
-  /@jridgewell/trace-mapping@0.3.18:
-    resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
+  /@jridgewell/trace-mapping@0.3.20:
+    resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
-      '@jridgewell/sourcemap-codec': 1.4.14
-
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
-  /@lezer/common@1.1.0:
-    resolution: {integrity: sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw==}
+  /@lezer/common@1.0.3:
+    resolution: {integrity: sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==}
+    dev: false
+
+  /@lezer/common@1.1.1:
+    resolution: {integrity: sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg==}
     dev: false
 
   /@lezer/css@1.1.3:
     resolution: {integrity: sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.9
     dev: false
 
   /@lezer/highlight@1.1.6:
     resolution: {integrity: sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==}
     dependencies:
-      '@lezer/common': 1.1.0
+      '@lezer/common': 1.0.3
     dev: false
 
   /@lezer/html@1.3.6:
     resolution: {integrity: sha512-Kk9HJARZTc0bAnMQUqbtuhFVsB4AnteR2BFUWfZV7L/x1H0aAKz6YabrfJ2gk/BEgjh9L3hg5O4y2IDZRBdzuQ==}
     dependencies:
-      '@lezer/common': 1.1.0
+      '@lezer/common': 1.0.3
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.9
     dev: false
 
-  /@lezer/javascript@1.4.8:
-    resolution: {integrity: sha512-QRmw/5xrcyRLyWr3JT3KCzn2XZr5NYNqQMGsqnYy+FghbQn9DZPuj6JDkE6uSXvfMLpdapu8KBIaeoJFaR4QVw==}
+  /@lezer/javascript@1.4.5:
+    resolution: {integrity: sha512-FmBUHz8K1V22DgjTd6SrIG9owbzOYZ1t3rY6vGEmw+e2RVBd7sqjM8uXEVRFmfxKFn1Mx2ABJehHjrN3G2ZpmA==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.9
     dev: false
 
   /@lezer/json@1.0.1:
     resolution: {integrity: sha512-nkVC27qiEZEjySbi6gQRuMwa2sDu2PtfjSgz0A4QF81QyRGm3kb2YRzLcOPcTEtmcwvrX/cej7mlhbwViA4WJw==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.9
     dev: false
 
-  /@lezer/lr@1.3.13:
-    resolution: {integrity: sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==}
+  /@lezer/lr@1.3.9:
+    resolution: {integrity: sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==}
     dependencies:
-      '@lezer/common': 1.1.0
+      '@lezer/common': 1.1.1
     dev: false
 
-  /@lezer/markdown@1.1.0:
-    resolution: {integrity: sha512-JYOI6Lkqbl83semCANkO3CKbKc0pONwinyagBufWBm+k4yhIcqfCF8B8fpEpvJLmIy7CAfwiq7dQ/PzUZA340g==}
+  /@lezer/markdown@1.0.5:
+    resolution: {integrity: sha512-J0LRA0l21Ec6ZroaOxjxsWWm+swCOFHcnOU85Z7aH9nj3eJx5ORmtzVkWzs9e21SZrdvyIzM1gt+YF/HnqbvnA==}
     dependencies:
-      '@lezer/common': 1.1.0
+      '@lezer/common': 1.0.3
       '@lezer/highlight': 1.1.6
     dev: false
 
@@ -1792,7 +1351,7 @@ packages:
       - supports-color
     dev: true
 
-  /@neocodemirror/svelte@0.0.15(@codemirror/autocomplete@6.10.2)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.1)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3):
+  /@neocodemirror/svelte@0.0.15(@codemirror/autocomplete@6.11.0)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.2)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.0)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-MCux+QCR40CboJu/TFwnqK7gYQ3fvtvHX8F/mk85DRH7vMoG3VDjJhqneAITX5IzohWKeP36hzcV+oHC2LYJqA==}
     peerDependencies:
       '@codemirror/autocomplete': ^6.7.1
@@ -1803,13 +1362,13 @@ packages:
       '@codemirror/state': ^6.2.0
       '@codemirror/view': ^6.12.0
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.1)
       '@codemirror/commands': 6.3.0
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/lint': 6.4.2
-      '@codemirror/search': 6.5.4
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/search': 6.5.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
       csstype: 3.1.2
       nanostores: 0.8.1
     dev: false
@@ -1840,7 +1399,7 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      '@types/node': 14.18.51
+      '@types/node': 20.5.9
       playwright-core: 1.35.1
     optionalDependencies:
       fsevents: 2.3.2
@@ -1849,7 +1408,7 @@ packages:
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 
-  /@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.10.2)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.6)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13):
+  /@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.11.0)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.5)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.1)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.5)(@lezer/lr@1.3.9):
     resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==}
     peerDependencies:
       '@codemirror/autocomplete': ^6.0.0
@@ -1864,20 +1423,20 @@ packages:
       '@lezer/javascript': ^1.2.0
       '@lezer/lr': ^1.0.0
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
-      '@codemirror/lang-html': 6.4.6
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.1)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
+      '@codemirror/lang-html': 6.4.5
       '@codemirror/lang-javascript': 6.2.1
-      '@codemirror/language': 6.9.1
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
-      '@lezer/common': 1.1.0
+      '@codemirror/language': 6.9.2
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
+      '@lezer/common': 1.1.1
       '@lezer/highlight': 1.1.6
-      '@lezer/javascript': 1.4.8
-      '@lezer/lr': 1.3.13
+      '@lezer/javascript': 1.4.5
+      '@lezer/lr': 1.3.9
     dev: false
 
-  /@replit/codemirror-vim@6.0.14(@codemirror/commands@6.3.0)(@codemirror/language@6.9.1)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3):
+  /@replit/codemirror-vim@6.0.14(@codemirror/commands@6.3.0)(@codemirror/language@6.9.2)(@codemirror/search@6.5.0)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-wwhqhvL76FdRTdwfUWpKCbv0hkp2fvivfMosDVlL/popqOiNLtUhL02ThgHZH8mus/NkVr5Mj582lyFZqQrjOA==}
     peerDependencies:
       '@codemirror/commands': ^6.0.0
@@ -1887,10 +1446,10 @@ packages:
       '@codemirror/view': ^6.0.3
     dependencies:
       '@codemirror/commands': 6.3.0
-      '@codemirror/language': 6.9.1
-      '@codemirror/search': 6.5.4
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/language': 6.9.2
+      '@codemirror/search': 6.5.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
     dev: false
 
   /@resvg/resvg-js-android-arm-eabi@2.4.1:
@@ -2031,7 +1590,7 @@ packages:
     resolution: {integrity: sha512-qkWkilNBn+90/9Xn2stuwFpXYhG/mZVPlDkTIPdQSEtJES0NS4o4atceEqeGeHOjQREY2jaIv7ld3IajA/Bmfw==}
     dev: false
 
-  /@rollup/plugin-commonjs@24.1.0(rollup@3.26.2):
+  /@rollup/plugin-commonjs@24.1.0(rollup@3.27.1):
     resolution: {integrity: sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -2040,56 +1599,56 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.26.2)
+      '@rollup/pluginutils': 5.0.2(rollup@3.27.1)
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.1.0
       is-reference: 1.2.1
       magic-string: 0.27.0
-      rollup: 3.26.2
+      rollup: 3.27.1
     dev: true
 
-  /@rollup/plugin-json@6.0.0(rollup@3.26.2):
-    resolution: {integrity: sha512-i/4C5Jrdr1XUarRhVu27EEwjt4GObltD7c+MkCIpO2QIbojw8MUs+CCTqOphQi3Qtg1FLmYt+l+6YeoIf51J7w==}
+  /@rollup/plugin-json@6.0.1(rollup@3.27.1):
+    resolution: {integrity: sha512-RgVfl5hWMkxN1h/uZj8FVESvPuBJ/uf6ly6GTj0GONnkfoBN5KC0MSz+PN2OLDgYXMhtG0mWpTrkiOjoxAIevw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.26.2)
-      rollup: 3.26.2
+      '@rollup/pluginutils': 5.0.2(rollup@3.27.1)
+      rollup: 3.27.1
     dev: true
 
-  /@rollup/plugin-node-resolve@15.1.0(rollup@3.26.2):
-    resolution: {integrity: sha512-xeZHCgsiZ9pzYVgAo9580eCGqwh/XCEUM9q6iQfGNocjgkufHAqC3exA+45URvhiYV8sBF9RlBai650eNs7AsA==}
+  /@rollup/plugin-node-resolve@15.2.3(rollup@3.27.1):
+    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^2.78.0||^3.0.0
+      rollup: ^2.78.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.26.2)
+      '@rollup/pluginutils': 5.0.2(rollup@3.27.1)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
       is-module: 1.0.0
       resolve: 1.22.2
-      rollup: 3.26.2
+      rollup: 3.27.1
     dev: true
 
-  /@rollup/plugin-virtual@3.0.1(rollup@3.28.0):
-    resolution: {integrity: sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og==}
+  /@rollup/plugin-virtual@3.0.2(rollup@3.27.1):
+    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
     dependencies:
-      rollup: 3.28.0
+      rollup: 3.27.1
     dev: true
 
   /@rollup/pluginutils@4.2.1:
@@ -2100,7 +1659,7 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils@5.0.2(rollup@3.26.2):
+  /@rollup/pluginutils@5.0.2(rollup@3.27.1):
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -2109,24 +1668,10 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@types/estree': 1.0.1
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 3.26.2
-    dev: true
-
-  /@rollup/pluginutils@5.0.3:
-    resolution: {integrity: sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
+      rollup: 3.27.1
     dev: true
 
   /@shuding/opentype.js@1.4.0-beta.0:
@@ -2170,8 +1715,8 @@ packages:
   /@supabase/realtime-js@2.7.4:
     resolution: {integrity: sha512-FzSzs1k9ruh/uds5AJ95Nc3beiMCCIhougExJ3O98CX1LMLAKUKFy5FivKLvcNhXnNfUEL0XUfGMb4UH2J7alg==}
     dependencies:
-      '@types/phoenix': 1.6.1
-      '@types/websocket': 1.0.6
+      '@types/phoenix': 1.6.0
+      '@types/websocket': 1.0.5
       websocket: 1.0.34
     transitivePeerDependencies:
       - supports-color
@@ -2196,12 +1741,12 @@ packages:
       - supports-color
     dev: false
 
-  /@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.26.0):
+  /@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.27.1):
     resolution: {integrity: sha512-0FQMjR6klW4627ewdclSr0lUe/DqiiyOaRTfgb5cXgNbVMsZMOA2fQ77TYQnJdvMfSEWe6y8uznV48XqKh9+vA==}
     peerDependencies:
       '@sveltejs/kit': ^1.5.0
     dependencies:
-      '@sveltejs/kit': 1.26.0(svelte@packages+svelte)(vite@4.4.9)
+      '@sveltejs/kit': 1.27.1(svelte@packages+svelte)(vite@4.4.9)
       '@vercel/nft': 0.23.0
       esbuild: 0.18.17
     transitivePeerDependencies:
@@ -2209,7 +1754,7 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/eslint-config@6.0.4(@typescript-eslint/eslint-plugin@5.60.0)(@typescript-eslint/parser@6.8.0)(eslint-config-prettier@9.0.0)(eslint-plugin-svelte@2.34.0)(eslint-plugin-unicorn@47.0.0)(eslint@8.51.0)(typescript@5.1.3):
+  /@sveltejs/eslint-config@6.0.4(@typescript-eslint/eslint-plugin@5.60.0)(@typescript-eslint/parser@5.62.0)(eslint-config-prettier@8.10.0)(eslint-plugin-svelte@2.32.2)(eslint-plugin-unicorn@47.0.0)(eslint@8.53.0)(typescript@5.2.2):
     resolution: {integrity: sha512-U9pwmDs+DbmsnCgTfu6Bacdwqn0DuI1IQNSiQqTgzVyYfaaj+zy9ZoQCiJfxFBGXHkklyXuRHp0KMx346N0lcQ==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': '>= 5'
@@ -2220,17 +1765,17 @@ packages:
       eslint-plugin-unicorn: '>= 47'
       typescript: '>= 4'
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.60.0(@typescript-eslint/parser@6.8.0)(eslint@8.51.0)(typescript@5.1.3)
-      '@typescript-eslint/parser': 6.8.0(eslint@8.51.0)(typescript@5.1.3)
-      eslint: 8.51.0
-      eslint-config-prettier: 9.0.0(eslint@8.51.0)
-      eslint-plugin-svelte: 2.34.0(eslint@8.51.0)(svelte@packages+svelte)
-      eslint-plugin-unicorn: 47.0.0(eslint@8.51.0)
-      typescript: 5.1.3
+      '@typescript-eslint/eslint-plugin': 5.60.0(@typescript-eslint/parser@5.62.0)(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
+      eslint: 8.53.0
+      eslint-config-prettier: 8.10.0(eslint@8.53.0)
+      eslint-plugin-svelte: 2.32.2(eslint@8.53.0)(svelte@packages+svelte)
+      eslint-plugin-unicorn: 47.0.0(eslint@8.53.0)
+      typescript: 5.2.2
     dev: true
 
-  /@sveltejs/kit@1.26.0(svelte@packages+svelte)(vite@4.4.9):
-    resolution: {integrity: sha512-CV/AlTziC05yrz7UjVqEd0pH6+2dnrbmcnHGr2d3jXtmOgzNnlDkXtX8g3BfJ6nntsPD+0jtS2PzhvRHblRz4A==}
+  /@sveltejs/kit@1.27.1(svelte@packages+svelte)(vite@4.4.9):
+    resolution: {integrity: sha512-nYkOUJKbeI8fcwvt/cyhTdz6VG4kT6XVprNnzfIwif+IZ8RvxvJuPhPhYjz14ASIcMLpq8xC6D3X4xH3bvWi+Q==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     requiresBuild: true
@@ -2238,7 +1783,7 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@packages+svelte)(vite@4.4.9)
+      '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@packages+svelte)(vite@4.4.9)
       '@types/cookie': 0.5.2
       cookie: 0.5.0
       devalue: 4.3.2
@@ -2251,42 +1796,42 @@ packages:
       sirv: 2.0.3
       svelte: link:packages/svelte
       tiny-glob: 0.2.9
-      undici: 5.26.4
-      vite: 4.4.9(@types/node@20.6.1)(lightningcss@1.21.8)(sass@1.67.0)
+      undici: 5.26.5
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
     transitivePeerDependencies:
       - supports-color
 
-  /@sveltejs/repl@0.6.0(@codemirror/lang-html@6.4.6)(@codemirror/search@6.5.4)(@lezer/common@1.1.0)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13)(@sveltejs/kit@1.26.0)(svelte@packages+svelte):
+  /@sveltejs/repl@0.6.0(@codemirror/lang-html@6.4.5)(@codemirror/search@6.5.0)(@lezer/common@1.1.1)(@lezer/javascript@1.4.5)(@lezer/lr@1.3.9)(@sveltejs/kit@1.27.1)(svelte@packages+svelte):
     resolution: {integrity: sha512-NADKN0NZhLlSatTSh5CCsdzgf2KHJFRef/8krA/TVWAWos5kSwmZ5fF0UImuqs61Pu/SiMXksaWNTGTiOtr4fQ==}
     peerDependencies:
       svelte: ^3.54.0 || ^4.0.0-next.0 || ^4.0.0
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.1)
       '@codemirror/commands': 6.3.0
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
       '@codemirror/lang-javascript': 6.2.1
       '@codemirror/lang-json': 6.0.1
       '@codemirror/lang-markdown': 6.2.2
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/lint': 6.4.2
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
       '@jridgewell/sourcemap-codec': 1.4.15
       '@lezer/highlight': 1.1.6
-      '@neocodemirror/svelte': 0.0.15(@codemirror/autocomplete@6.10.2)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.1)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)
-      '@replit/codemirror-lang-svelte': 6.0.0(@codemirror/autocomplete@6.10.2)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.6)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13)
-      '@replit/codemirror-vim': 6.0.14(@codemirror/commands@6.3.0)(@codemirror/language@6.9.1)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)
+      '@neocodemirror/svelte': 0.0.15(@codemirror/autocomplete@6.11.0)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.2)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.0)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)
+      '@replit/codemirror-lang-svelte': 6.0.0(@codemirror/autocomplete@6.11.0)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.5)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.1)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.5)(@lezer/lr@1.3.9)
+      '@replit/codemirror-vim': 6.0.14(@codemirror/commands@6.3.0)(@codemirror/language@6.9.2)(@codemirror/search@6.5.0)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)
       '@rich_harris/svelte-split-pane': 1.1.1(svelte@packages+svelte)
       '@rollup/browser': 3.29.4
-      '@sveltejs/site-kit': 5.2.2(@sveltejs/kit@1.26.0)(svelte@packages+svelte)
+      '@sveltejs/site-kit': 5.2.2(@sveltejs/kit@1.27.1)(svelte@packages+svelte)
       acorn: 8.10.0
-      codemirror: 6.0.1(@lezer/common@1.1.0)
+      codemirror: 6.0.1(@lezer/common@1.1.1)
       esm-env: 1.0.0
       estree-walker: 3.0.3
       marked: 5.1.2
       resolve.exports: 2.0.2
       svelte: link:packages/svelte
-      svelte-json-tree: 2.2.0(svelte@packages+svelte)
+      svelte-json-tree: 2.1.0(svelte@packages+svelte)
     transitivePeerDependencies:
       - '@codemirror/lang-html'
       - '@codemirror/search'
@@ -2296,25 +1841,25 @@ packages:
       - '@sveltejs/kit'
     dev: false
 
-  /@sveltejs/site-kit@5.2.2(@sveltejs/kit@1.26.0)(svelte@packages+svelte):
+  /@sveltejs/site-kit@5.2.2(@sveltejs/kit@1.27.1)(svelte@packages+svelte):
     resolution: {integrity: sha512-XLLxVUV/dYytCsUeODAkjtzlaIBSn1kdcH5U36OuN7gMsPEHDy5L/dsWjf1/vDln3JStH5lqZPEN8Fovm33KhA==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
       svelte: ^3.54.0
     dependencies:
-      '@sveltejs/kit': 1.26.0(svelte@packages+svelte)(vite@4.4.9)
+      '@sveltejs/kit': 1.27.1(svelte@packages+svelte)(vite@4.4.9)
       esm-env: 1.0.0
       svelte: link:packages/svelte
       svelte-local-storage-store: 0.4.0(svelte@packages+svelte)
     dev: false
 
-  /@sveltejs/site-kit@6.0.0-next.50(@sveltejs/kit@1.26.0)(svelte@packages+svelte):
+  /@sveltejs/site-kit@6.0.0-next.50(@sveltejs/kit@1.27.1)(svelte@packages+svelte):
     resolution: {integrity: sha512-kgJVREVGuhhNO1YfQwJelFsBqfJiPhP7J4ytGUg05FaYlNQn3jb+BMUo027fSRpLgAjCqoo0IzIwX6CSSqqyJg==}
     peerDependencies:
       '@sveltejs/kit': ^1.20.0
       svelte: ^4.0.0
     dependencies:
-      '@sveltejs/kit': 1.26.0(svelte@packages+svelte)(vite@4.4.9)
+      '@sveltejs/kit': 1.27.1(svelte@packages+svelte)(vite@4.4.9)
       esm-env: 1.0.0
       svelte: link:packages/svelte
       svelte-local-storage-store: 0.6.0(svelte@packages+svelte)
@@ -2331,7 +1876,23 @@ packages:
       '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@packages+svelte)(vite@4.4.9)
       debug: 4.3.4
       svelte: link:packages/svelte
-      vite: 4.4.9(@types/node@20.6.1)(lightningcss@1.21.8)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@packages+svelte)(vite@4.4.9):
+    resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^2.2.0
+      svelte: ^3.54.0 || ^4.0.0
+      vite: ^4.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@packages+svelte)(vite@4.4.9)
+      debug: 4.3.4
+      svelte: link:packages/svelte
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -2349,7 +1910,27 @@ packages:
       magic-string: 0.30.4
       svelte: link:packages/svelte
       svelte-hmr: 0.15.3(svelte@packages+svelte)
-      vite: 4.4.9(@types/node@20.6.1)(lightningcss@1.21.8)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
+      vitefu: 0.2.4(vite@4.4.9)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@sveltejs/vite-plugin-svelte@2.5.2(svelte@packages+svelte)(vite@4.4.9):
+    resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
+      vite: ^4.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@packages+svelte)(vite@4.4.9)
+      debug: 4.3.4
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.4
+      svelte: link:packages/svelte
+      svelte-hmr: 0.15.3(svelte@packages+svelte)
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
       vitefu: 0.2.4(vite@4.4.9)
     transitivePeerDependencies:
       - supports-color
@@ -2373,8 +1954,8 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
-  /@types/aria-query@5.0.1:
-    resolution: {integrity: sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==}
+  /@types/aria-query@5.0.4:
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
     dev: true
 
   /@types/chai-subset@1.3.3:
@@ -2390,8 +1971,8 @@ packages:
   /@types/cookie@0.5.2:
     resolution: {integrity: sha512-DBpRoJGKJZn7RY92dPrgoMew8xCWc2P71beqsjyhEI/Ds9mOyVmBwtekyfhpwFIVt1WrxTonFifiOZ62V8CnNA==}
 
-  /@types/estree@1.0.1:
-    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
   /@types/is-ci@3.0.0:
     resolution: {integrity: sha512-Q0Op0hdWbYd1iahB+IFNQcWXFq4O0Q5MwQP7uN0souuQ4rPg1vEYcnIOfr1gY+M+6rc8FGoRaBO1mOOvL29sEQ==}
@@ -2419,15 +2000,15 @@ packages:
     resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
     dev: true
 
-  /@types/node@20.6.1:
-    resolution: {integrity: sha512-4LcJvuXQlv4lTHnxwyHQZ3uR9Zw2j7m1C9DfuwoTFQQP4Pmu04O6IfLYgMmHoOCt0nosItLLZAH+sOrRE0Bo8g==}
+  /@types/node@20.5.9:
+    resolution: {integrity: sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==}
 
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
-  /@types/phoenix@1.6.1:
-    resolution: {integrity: sha512-g2/8Ogi2zfiS25jdGT5iDSo5yjruhhXaOuOJCkOxMW28w16VxFvjtAXjBNRo7WlRS4+UXAMj3mK46UwieNM/5g==}
+  /@types/phoenix@1.6.0:
+    resolution: {integrity: sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g==}
     dev: false
 
   /@types/pug@2.0.6:
@@ -2446,13 +2027,13 @@ packages:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
 
-  /@types/websocket@1.0.6:
-    resolution: {integrity: sha512-JXkliwz93B2cMWOI1ukElQBPN88vMg3CruvW4KVSKpflt3NyNCJImnhIuB/f97rG7kakqRJGFiwkA895Kn02Dg==}
+  /@types/websocket@1.0.5:
+    resolution: {integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==}
     dependencies:
-      '@types/node': 20.6.1
+      '@types/node': 20.5.9
     dev: false
 
-  /@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.62.0)(eslint@8.44.0)(typescript@5.2.2):
+  /@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.62.0)(eslint@8.53.0)(typescript@5.2.2):
     resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2463,13 +2044,13 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@eslint-community/regexpp': 4.5.1
-      '@typescript-eslint/parser': 5.62.0(eslint@8.44.0)(typescript@5.2.2)
+      '@eslint-community/regexpp': 4.6.2
+      '@typescript-eslint/parser': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
       '@typescript-eslint/scope-manager': 5.60.0
-      '@typescript-eslint/type-utils': 5.60.0(eslint@8.44.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 5.60.0(eslint@8.44.0)(typescript@5.2.2)
+      '@typescript-eslint/type-utils': 5.60.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 5.60.0(eslint@8.53.0)(typescript@5.2.2)
       debug: 4.3.4
-      eslint: 8.44.0
+      eslint: 8.53.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
       natural-compare-lite: 1.4.0
@@ -2480,35 +2061,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@6.8.0)(eslint@8.51.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^5.0.0
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@eslint-community/regexpp': 4.5.1
-      '@typescript-eslint/parser': 6.8.0(eslint@8.51.0)(typescript@5.1.3)
-      '@typescript-eslint/scope-manager': 5.60.0
-      '@typescript-eslint/type-utils': 5.60.0(eslint@8.51.0)(typescript@5.1.3)
-      '@typescript-eslint/utils': 5.60.0(eslint@8.51.0)(typescript@5.1.3)
-      debug: 4.3.4
-      eslint: 8.51.0
-      grapheme-splitter: 1.0.4
-      ignore: 5.2.4
-      natural-compare-lite: 1.4.0
-      semver: 7.5.4
-      tsutils: 3.21.0(typescript@5.1.3)
-      typescript: 5.1.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@typescript-eslint/parser@5.62.0(eslint@8.44.0)(typescript@5.2.2):
+  /@typescript-eslint/parser@5.62.0(eslint@8.53.0)(typescript@5.2.2):
     resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2522,33 +2075,12 @@ packages:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
       debug: 4.3.4
-      eslint: 8.44.0
+      eslint: 8.53.0
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.8.0(eslint@8.51.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-5tNs6Bw0j6BdWuP8Fx+VH4G9fEPDxnVI7yH1IAPkQH5RUtvKwRoqdecAPdQXv4rSOADAaz1LFBZvZG7VbXivSg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.8.0
-      '@typescript-eslint/types': 6.8.0
-      '@typescript-eslint/typescript-estree': 6.8.0(typescript@5.1.3)
-      '@typescript-eslint/visitor-keys': 6.8.0
-      debug: 4.3.4
-      eslint: 8.51.0
-      typescript: 5.1.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/scope-manager@5.60.0:
     resolution: {integrity: sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2565,15 +2097,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.62.0
     dev: true
 
-  /@typescript-eslint/scope-manager@6.8.0:
-    resolution: {integrity: sha512-xe0HNBVwCph7rak+ZHcFD6A+q50SMsFwcmfdjs9Kz4qDh5hWhaPhFjRs/SODEhroBI5Ruyvyz9LfwUJ624O40g==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.8.0
-      '@typescript-eslint/visitor-keys': 6.8.0
-    dev: true
-
-  /@typescript-eslint/type-utils@5.60.0(eslint@8.44.0)(typescript@5.2.2):
+  /@typescript-eslint/type-utils@5.60.0(eslint@8.53.0)(typescript@5.2.2):
     resolution: {integrity: sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2584,69 +2108,23 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.2.2)
-      '@typescript-eslint/utils': 5.60.0(eslint@8.44.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 5.60.0(eslint@8.53.0)(typescript@5.2.2)
       debug: 4.3.4
-      eslint: 8.44.0
+      eslint: 8.53.0
       tsutils: 3.21.0(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils@5.60.0(eslint@8.51.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3)
-      '@typescript-eslint/utils': 5.60.0(eslint@8.51.0)(typescript@5.1.3)
-      debug: 4.3.4
-      eslint: 8.51.0
-      tsutils: 3.21.0(typescript@5.1.3)
-      typescript: 5.1.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/types@5.60.0:
     resolution: {integrity: sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
-  /@typescript-eslint/types@5.62.0:
-    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
-  /@typescript-eslint/types@6.8.0:
-    resolution: {integrity: sha512-p5qOxSum7W3k+llc7owEStXlGmSl8FcGvhYt8Vjy7FqEnmkCVlM3P57XQEGj58oqaBWDQXbJDZxwUWMS/EAPNQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: true
-
-  /@typescript-eslint/typescript-estree@5.60.0(typescript@5.1.3):
-    resolution: {integrity: sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 5.60.0
-      '@typescript-eslint/visitor-keys': 5.60.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      tsutils: 3.21.0(typescript@5.1.3)
-      typescript: 5.1.3
-    transitivePeerDependencies:
-      - supports-color
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@typescript-eslint/types@5.62.0:
+    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
   /@typescript-eslint/typescript-estree@5.60.0(typescript@5.2.2):
@@ -2691,60 +2169,19 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.8.0(typescript@5.1.3):
-    resolution: {integrity: sha512-ISgV0lQ8XgW+mvv5My/+iTUdRmGspducmQcDw5JxznasXNnZn3SKNrTRuMsEXv+V/O+Lw9AGcQCfVaOPCAk/Zg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.8.0
-      '@typescript-eslint/visitor-keys': 6.8.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.1.3)
-      typescript: 5.1.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@typescript-eslint/utils@5.60.0(eslint@8.44.0)(typescript@5.2.2):
+  /@typescript-eslint/utils@5.60.0(eslint@8.53.0)(typescript@5.2.2):
     resolution: {integrity: sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
       '@types/json-schema': 7.0.12
       '@types/semver': 7.5.0
       '@typescript-eslint/scope-manager': 5.60.0
       '@typescript-eslint/types': 5.60.0
       '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.2.2)
-      eslint: 8.44.0
-      eslint-scope: 5.1.1
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
-
-  /@typescript-eslint/utils@5.60.0(eslint@8.51.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.51.0)
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.0
-      '@typescript-eslint/scope-manager': 5.60.0
-      '@typescript-eslint/types': 5.60.0
-      '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3)
-      eslint: 8.51.0
+      eslint: 8.53.0
       eslint-scope: 5.1.1
       semver: 7.5.4
     transitivePeerDependencies:
@@ -2757,7 +2194,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       '@typescript-eslint/types': 5.60.0
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
     dev: true
 
   /@typescript-eslint/visitor-keys@5.62.0:
@@ -2768,14 +2205,6 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.8.0:
-    resolution: {integrity: sha512-oqAnbA7c+pgOhW2OhGvxm0t1BULX5peQI/rLsNDpGM78EebV3C9IGbX5HNZabuZ6UQrYveCLjKo8Iy/lLlBkkg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.8.0
-      eslint-visitor-keys: 3.4.3
-    dev: true
-
   /@typescript/twoslash@3.1.0:
     resolution: {integrity: sha512-kTwMUQ8xtAZaC4wb2XuLkPqFVBj2dNBueMQ89NWEuw87k2nLBbuafeG5cob/QEr6YduxIdTVUjix0MtC7mPlmg==}
     dependencies:
@@ -2802,6 +2231,10 @@ packages:
       - supports-color
     dev: true
 
+  /@ungap/structured-clone@1.2.0:
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    dev: true
+
   /@vercel/nft@0.23.0:
     resolution: {integrity: sha512-1iuPjyltiPqyZrvc/bW1CyICRdng8bVhpJT8MsIXV7Wj+mRFyJs9krsHbVy2pZwu7BMAgforQsT5TCY1JoBDxw==}
     engines: {node: '>=14'}
@@ -2828,7 +2261,7 @@ packages:
     dependencies:
       '@vitest/spy': 0.33.0
       '@vitest/utils': 0.33.0
-      chai: 4.3.7
+      chai: 4.3.10
     dev: true
 
   /@vitest/runner@0.33.0:
@@ -2877,14 +2310,6 @@ packages:
       acorn: 8.10.0
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.9.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.9.0
-    dev: true
-
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
@@ -2895,18 +2320,13 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  /acorn@8.9.0:
-    resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   /agadoo@3.0.0:
     resolution: {integrity: sha512-gq+fjT3Ilrhb88Jf+vYMjdO/+3znYfa7vJ4IMLPFsBPUxglnr40Ed3yCLrW6IABdJAedB94b2BkqR6I04lh3dg==}
     hasBin: true
     dependencies:
-      '@rollup/plugin-virtual': 3.0.1(rollup@3.28.0)
-      acorn: 8.9.0
-      rollup: 3.28.0
+      '@rollup/plugin-virtual': 3.0.2(rollup@3.27.1)
+      acorn: 8.10.0
+      rollup: 3.27.1
     dev: true
 
   /agent-base@6.0.2:
@@ -3152,7 +2572,7 @@ packages:
     engines: {node: '>=6.14.2'}
     requiresBuild: true
     dependencies:
-      node-gyp-build: 4.6.1
+      node-gyp-build: 4.6.0
     dev: false
 
   /builtin-modules@3.3.0:
@@ -3199,14 +2619,14 @@ packages:
     resolution: {integrity: sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==}
     dev: true
 
-  /chai@4.3.7:
-    resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
+  /chai@4.3.10:
+    resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
     engines: {node: '>=4'}
     dependencies:
       assertion-error: 1.1.0
-      check-error: 1.0.2
+      check-error: 1.0.3
       deep-eql: 4.1.3
-      get-func-name: 2.0.0
+      get-func-name: 2.0.2
       loupe: 2.3.6
       pathval: 1.1.1
       type-detect: 4.0.8
@@ -3233,8 +2653,10 @@ packages:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
     dev: true
 
-  /check-error@1.0.2:
-    resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
+  /check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+    dependencies:
+      get-func-name: 2.0.2
     dev: true
 
   /chokidar@3.5.3:
@@ -3249,7 +2671,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.3
+      fsevents: 2.3.2
 
   /chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
@@ -3298,22 +2720,22 @@ packages:
     resolution: {integrity: sha512-kVwJELqiILQyG5aeuyKFbdsI1fmQy1Cmf7dQ8eGmVuJoaRVdwey7WaMknr2ZFeVSYSKT0rExsa8EGw0aoI/1QQ==}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@types/estree': 1.0.1
-      acorn: 8.9.0
+      '@types/estree': 1.0.5
+      acorn: 8.10.0
       estree-walker: 3.0.3
       periscopic: 3.1.0
     dev: false
 
-  /codemirror@6.0.1(@lezer/common@1.1.0):
+  /codemirror@6.0.1(@lezer/common@1.1.1):
     resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/autocomplete': 6.11.0(@codemirror/language@6.9.2)(@codemirror/state@6.2.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.1)
       '@codemirror/commands': 6.3.0
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/lint': 6.4.2
-      '@codemirror/search': 6.5.4
-      '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/search': 6.5.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.22.0
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
@@ -3652,11 +3074,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /dts-buddy@0.1.7:
-    resolution: {integrity: sha512-zqKumjFt/RXVTPV3DT/L7NBDuc763NeAZEIJATicoSvxDnOnCFzV0WUc4JV8KZB3cwMCAktmEtL6ERXz+jJMrA==}
+  /dts-buddy@0.1.14:
+    resolution: {integrity: sha512-5ckMwd5mVHwPBDXZ6ajhY83jBwcXEaqkHhM67XgauIRXgFrawKWkzBiG2JEt/KyKXo536z9ceB/QhHL8ri3QqQ==}
     hasBin: true
     dependencies:
-      '@jridgewell/source-map': 0.3.3
+      '@jridgewell/source-map': 0.3.5
       '@jridgewell/sourcemap-codec': 1.4.15
       globrex: 0.1.2
       kleur: 4.1.5
@@ -3664,8 +3086,8 @@ packages:
       magic-string: 0.30.4
       sade: 1.8.1
       tiny-glob: 0.2.9
-      ts-api-utils: 0.0.46(typescript@5.1.3)
-      typescript: 5.1.3
+      ts-api-utils: 1.0.3(typescript@5.0.4)
+      typescript: 5.0.4
     dev: true
 
   /electron-to-chromium@1.4.484:
@@ -3797,36 +3219,6 @@ packages:
       ext: 1.7.0
     dev: false
 
-  /esbuild@0.18.11:
-    resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.18.11
-      '@esbuild/android-arm64': 0.18.11
-      '@esbuild/android-x64': 0.18.11
-      '@esbuild/darwin-arm64': 0.18.11
-      '@esbuild/darwin-x64': 0.18.11
-      '@esbuild/freebsd-arm64': 0.18.11
-      '@esbuild/freebsd-x64': 0.18.11
-      '@esbuild/linux-arm': 0.18.11
-      '@esbuild/linux-arm64': 0.18.11
-      '@esbuild/linux-ia32': 0.18.11
-      '@esbuild/linux-loong64': 0.18.11
-      '@esbuild/linux-mips64el': 0.18.11
-      '@esbuild/linux-ppc64': 0.18.11
-      '@esbuild/linux-riscv64': 0.18.11
-      '@esbuild/linux-s390x': 0.18.11
-      '@esbuild/linux-x64': 0.18.11
-      '@esbuild/netbsd-x64': 0.18.11
-      '@esbuild/openbsd-x64': 0.18.11
-      '@esbuild/sunos-x64': 0.18.11
-      '@esbuild/win32-arm64': 0.18.11
-      '@esbuild/win32-ia32': 0.18.11
-      '@esbuild/win32-x64': 0.18.11
-    dev: true
-
   /esbuild@0.18.17:
     resolution: {integrity: sha512-1GJtYnUxsJreHYA0Y+iQz2UEykonY66HNWOb0yXYZi9/kNrORUEHVg87eQsCtqh59PEJ5YVZJO98JHznMJSWjg==}
     engines: {node: '>=12'}
@@ -3855,36 +3247,6 @@ packages:
       '@esbuild/win32-arm64': 0.18.17
       '@esbuild/win32-ia32': 0.18.17
       '@esbuild/win32-x64': 0.18.17
-    dev: true
-
-  /esbuild@0.18.20:
-    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.18.20
-      '@esbuild/android-arm64': 0.18.20
-      '@esbuild/android-x64': 0.18.20
-      '@esbuild/darwin-arm64': 0.18.20
-      '@esbuild/darwin-x64': 0.18.20
-      '@esbuild/freebsd-arm64': 0.18.20
-      '@esbuild/freebsd-x64': 0.18.20
-      '@esbuild/linux-arm': 0.18.20
-      '@esbuild/linux-arm64': 0.18.20
-      '@esbuild/linux-ia32': 0.18.20
-      '@esbuild/linux-loong64': 0.18.20
-      '@esbuild/linux-mips64el': 0.18.20
-      '@esbuild/linux-ppc64': 0.18.20
-      '@esbuild/linux-riscv64': 0.18.20
-      '@esbuild/linux-s390x': 0.18.20
-      '@esbuild/linux-x64': 0.18.20
-      '@esbuild/netbsd-x64': 0.18.20
-      '@esbuild/openbsd-x64': 0.18.20
-      '@esbuild/sunos-x64': 0.18.20
-      '@esbuild/win32-arm64': 0.18.20
-      '@esbuild/win32-ia32': 0.18.20
-      '@esbuild/win32-x64': 0.18.20
 
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -3905,22 +3267,22 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-prettier@9.0.0(eslint@8.51.0):
-    resolution: {integrity: sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==}
+  /eslint-config-prettier@8.10.0(eslint@8.53.0):
+    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.51.0
+      eslint: 8.53.0
     dev: true
 
   /eslint-plugin-lube@0.1.7:
     resolution: {integrity: sha512-jqeRZAG3vQWZR6Hue2tSx4bQUfpDYqeSOFf3MlqpUycb5q6av1bhnmfDkxHgsLQoK4Pt7H+puI0cYc/iEvFwfw==}
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
     dev: true
 
-  /eslint-plugin-svelte@2.32.2(eslint@8.44.0)(svelte@packages+svelte):
+  /eslint-plugin-svelte@2.32.2(eslint@8.53.0)(svelte@packages+svelte):
     resolution: {integrity: sha512-Jgbop2fNZsoxxkklZAIbDNhwAPynvnCtUXLsEC6O2qax7N/pfe2cNqT0ZoBbubXKJitQQDEyVDQ1rZs4ZWcrTA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3930,15 +3292,15 @@ packages:
       svelte:
         optional: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
       '@jridgewell/sourcemap-codec': 1.4.15
       debug: 4.3.4
-      eslint: 8.44.0
+      eslint: 8.53.0
       esutils: 2.0.3
       known-css-properties: 0.27.0
-      postcss: 8.4.31
-      postcss-load-config: 3.1.4(postcss@8.4.31)
-      postcss-safe-parser: 6.0.0(postcss@8.4.31)
+      postcss: 8.4.27
+      postcss-load-config: 3.1.4(postcss@8.4.27)
+      postcss-safe-parser: 6.0.0(postcss@8.4.27)
       postcss-selector-parser: 6.0.13
       semver: 7.5.4
       svelte: link:packages/svelte
@@ -3948,70 +3310,17 @@ packages:
       - ts-node
     dev: true
 
-  /eslint-plugin-svelte@2.34.0(eslint@8.51.0)(svelte@packages+svelte):
-    resolution: {integrity: sha512-4RYUgNai7wr0v+T/kljMiYSjC/oqwgq5i+cPppawryAayj4C7WK1ixFlWCGmNmBppnoKCl4iA4ZPzPtlHcb4CA==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0-0
-      svelte: ^3.37.0 || ^4.0.0
-    peerDependenciesMeta:
-      svelte:
-        optional: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.51.0)
-      '@jridgewell/sourcemap-codec': 1.4.15
-      debug: 4.3.4
-      eslint: 8.51.0
-      esutils: 2.0.3
-      known-css-properties: 0.28.0
-      postcss: 8.4.31
-      postcss-load-config: 3.1.4(postcss@8.4.31)
-      postcss-safe-parser: 6.0.0(postcss@8.4.31)
-      postcss-selector-parser: 6.0.13
-      semver: 7.5.4
-      svelte: link:packages/svelte
-      svelte-eslint-parser: 0.33.1(svelte@packages+svelte)
-    transitivePeerDependencies:
-      - supports-color
-      - ts-node
-    dev: true
-
-  /eslint-plugin-unicorn@47.0.0(eslint@8.44.0):
-    resolution: {integrity: sha512-ivB3bKk7fDIeWOUmmMm9o3Ax9zbMz1Bsza/R2qm46ufw4T6VBFBaJIR1uN3pCKSmSXm8/9Nri8V+iUut1NhQGA==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      eslint: '>=8.38.0'
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.5
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
-      ci-info: 3.8.0
-      clean-regexp: 1.0.0
-      eslint: 8.44.0
-      esquery: 1.5.0
-      indent-string: 4.0.0
-      is-builtin-module: 3.2.1
-      jsesc: 3.0.2
-      lodash: 4.17.21
-      pluralize: 8.0.0
-      read-pkg-up: 7.0.1
-      regexp-tree: 0.1.27
-      regjsparser: 0.10.0
-      safe-regex: 2.1.1
-      semver: 7.5.4
-      strip-indent: 3.0.0
-    dev: true
-
-  /eslint-plugin-unicorn@47.0.0(eslint@8.51.0):
+  /eslint-plugin-unicorn@47.0.0(eslint@8.53.0):
     resolution: {integrity: sha512-ivB3bKk7fDIeWOUmmMm9o3Ax9zbMz1Bsza/R2qm46ufw4T6VBFBaJIR1uN3pCKSmSXm8/9Nri8V+iUut1NhQGA==}
     engines: {node: '>=16'}
     peerDependencies:
       eslint: '>=8.38.0'
     dependencies:
       '@babel/helper-validator-identifier': 7.22.5
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.51.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
       ci-info: 3.8.0
       clean-regexp: 1.0.0
-      eslint: 8.51.0
+      eslint: 8.53.0
       esquery: 1.5.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
@@ -4034,14 +3343,6 @@ packages:
       estraverse: 4.3.0
     dev: true
 
-  /eslint-scope@7.2.0:
-    resolution: {integrity: sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
   /eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4050,76 +3351,24 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-visitor-keys@3.4.1:
-    resolution: {integrity: sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
   /eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint@8.44.0:
-    resolution: {integrity: sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
-      '@eslint-community/regexpp': 4.5.1
-      '@eslint/eslintrc': 2.1.0
-      '@eslint/js': 8.44.0
-      '@humanwhocodes/config-array': 0.11.10
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.0
-      eslint-visitor-keys: 3.4.1
-      espree: 9.6.0
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.20.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      strip-json-comments: 3.1.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /eslint@8.51.0:
-    resolution: {integrity: sha512-2WuxRZBrlwnXi+/vFSJyjMqrNjtJqiasMzehF0shoLaW7DzS3/9Yvrmq5JiT66+pNjiX4UBnLDiKHcWAr/OInA==}
+  /eslint@8.53.0:
+    resolution: {integrity: sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.51.0)
-      '@eslint-community/regexpp': 4.9.1
-      '@eslint/eslintrc': 2.1.2
-      '@eslint/js': 8.51.0
-      '@humanwhocodes/config-array': 0.11.11
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
+      '@eslint-community/regexpp': 4.6.2
+      '@eslint/eslintrc': 2.1.3
+      '@eslint/js': 8.53.0
+      '@humanwhocodes/config-array': 0.11.13
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.2.0
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
@@ -4135,7 +3384,7 @@ packages:
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.23.0
+      globals: 13.20.0
       graphemer: 1.4.0
       ignore: 5.2.4
       imurmurhash: 0.1.4
@@ -4157,15 +3406,6 @@ packages:
   /esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
 
-  /espree@9.6.0:
-    resolution: {integrity: sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.9.0
-      acorn-jsx: 5.3.2(acorn@8.9.0)
-      eslint-visitor-keys: 3.4.1
-    dev: true
-
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4212,7 +3452,7 @@ packages:
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
     dev: false
 
   /esutils@2.0.3:
@@ -4424,14 +3664,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
     optional: true
 
   /function-bind@1.1.1:
@@ -4472,8 +3704,8 @@ packages:
     engines: {node: 6.* || 8.* || >= 10.*}
     dev: true
 
-  /get-func-name@2.0.0:
-    resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==}
+  /get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
     dev: true
 
   /get-intrinsic@1.2.1:
@@ -4553,13 +3785,6 @@ packages:
       type-fest: 0.20.2
     dev: true
 
-  /globals@13.23.0:
-    resolution: {integrity: sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: true
-
   /globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
@@ -4741,11 +3966,11 @@ packages:
     resolution: {integrity: sha512-sNRVfUwkUcsVWNn5inTHDXWzpPRWPWbSgGkuQmlsFCWXAR2+K5R5vG5tC3Qs4LeJaMugKB8hGVm6rvZjFHQrUw==}
     engines: {node: '>=12.0.0'}
     dependencies:
-      sharp: 0.32.5
+      sharp: 0.32.4
     dev: true
 
-  /immutable@4.3.4:
-    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+  /immutable@4.3.2:
+    resolution: {integrity: sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==}
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -4918,13 +4143,13 @@ packages:
   /is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
     dev: true
 
   /is-reference@3.0.1:
     resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==}
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
     dev: false
 
   /is-regex@1.1.4:
@@ -5119,10 +4344,6 @@ packages:
     resolution: {integrity: sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==}
     dev: true
 
-  /known-css-properties@0.28.0:
-    resolution: {integrity: sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==}
-    dev: true
-
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -5295,7 +4516,7 @@ packages:
   /loupe@2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
-      get-func-name: 2.0.0
+      get-func-name: 2.0.2
     dev: true
 
   /lru-cache@4.1.5:
@@ -5511,7 +4732,7 @@ packages:
   /mlly@1.4.0:
     resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
     dependencies:
-      acorn: 8.9.0
+      acorn: 8.10.0
       pathe: 1.1.1
       pkg-types: 1.0.3
       ufo: 1.1.2
@@ -5558,8 +4779,8 @@ packages:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
     dev: false
 
-  /node-abi@3.47.0:
-    resolution: {integrity: sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==}
+  /node-abi@3.45.0:
+    resolution: {integrity: sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==}
     engines: {node: '>=10'}
     dependencies:
       semver: 7.5.4
@@ -5596,12 +4817,6 @@ packages:
   /node-gyp-build@4.6.0:
     resolution: {integrity: sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==}
     hasBin: true
-    dev: true
-
-  /node-gyp-build@4.6.1:
-    resolution: {integrity: sha512-24vnklJmyRS8ViBNI8KbtK/r/DmXQMRiOMXTNz2nrTnAYUwjmEEbnnpB/+kt+yWRv73bPsSPRFddrcIbAxSiMQ==}
-    hasBin: true
-    dev: false
 
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
@@ -5620,7 +4835,7 @@ packages:
     dependencies:
       hosted-git-info: 2.8.9
       resolve: 1.22.2
-      semver: 5.7.2
+      semver: 5.7.1
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -5850,7 +5065,7 @@ packages:
   /periscopic@3.1.0:
     resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
       estree-walker: 3.0.3
       is-reference: 3.0.1
     dev: false
@@ -5923,7 +5138,7 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /postcss-load-config@3.1.4(postcss@8.4.31):
+  /postcss-load-config@3.1.4(postcss@8.4.27):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -5936,35 +5151,26 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.31
+      postcss: 8.4.27
       yaml: 1.10.2
     dev: true
 
-  /postcss-safe-parser@6.0.0(postcss@8.4.31):
+  /postcss-safe-parser@6.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.3.3
     dependencies:
-      postcss: 8.4.31
+      postcss: 8.4.27
     dev: true
 
-  /postcss-scss@4.0.6(postcss@8.4.31):
+  /postcss-scss@4.0.6(postcss@8.4.27):
     resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.19
     dependencies:
-      postcss: 8.4.31
-    dev: true
-
-  /postcss-scss@4.0.9(postcss@8.4.31):
-    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.4.29
-    dependencies:
-      postcss: 8.4.31
+      postcss: 8.4.27
     dev: true
 
   /postcss-selector-parser@6.0.13:
@@ -5979,8 +5185,8 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+  /postcss@8.4.27:
+    resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -5998,7 +5204,7 @@ packages:
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 1.0.2
-      node-abi: 3.47.0
+      node-abi: 3.45.0
       pump: 3.0.0
       rc: 1.2.8
       simple-get: 4.0.1
@@ -6272,20 +5478,12 @@ packages:
       opener: 1.5.2
     dev: true
 
-  /rollup@3.26.2:
-    resolution: {integrity: sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
-  /rollup@3.28.0:
-    resolution: {integrity: sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==}
+  /rollup@3.27.1:
+    resolution: {integrity: sha512-tXNDFwOkN6C2w5Blj1g6ForKeFw6c1mDu5jxoeDO3/pmYjgt+8yvIFjKzH5FQUq70OKZBkOt0zzv0THXL7vwzQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.3
+      fsevents: 2.3.2
 
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
@@ -6340,7 +5538,7 @@ packages:
     hasBin: true
     dependencies:
       chokidar: 3.5.3
-      immutable: 4.3.4
+      immutable: 4.3.2
       source-map-js: 1.0.2
 
   /satori-html@0.3.2:
@@ -6376,8 +5574,8 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
-  /semver@5.7.2:
-    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+  /semver@5.7.1:
+    resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true
     dev: true
 
@@ -6401,8 +5599,8 @@ packages:
   /set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
 
-  /sharp@0.32.5:
-    resolution: {integrity: sha512-0dap3iysgDkNaPOaOL4X/0akdu0ma62GcdC2NBQ+93eqpePdDdr2/LM0sFdDSMmN7yS+odyZtPsb7tx/cYBKnQ==}
+  /sharp@0.32.4:
+    resolution: {integrity: sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==}
     engines: {node: '>=14.15.0'}
     requiresBuild: true
     dependencies:
@@ -6607,8 +5805,8 @@ packages:
       mixme: 0.5.9
     dev: true
 
-  /streamx@2.15.1:
-    resolution: {integrity: sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==}
+  /streamx@2.15.0:
+    resolution: {integrity: sha512-HcxY6ncGjjklGs1xsP1aR71INYcsXFJet5CU1CHqihQ2J5nOsbd4OjgjHO42w/4QNv9gZb3BueV+Vxok5pLEXg==}
     dependencies:
       fast-fifo: 1.3.0
       queue-tick: 1.0.1
@@ -6690,7 +5888,7 @@ packages:
   /strip-literal@1.0.1:
     resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==}
     dependencies:
-      acorn: 8.9.0
+      acorn: 8.10.0
     dev: true
 
   /strtok3@6.3.0:
@@ -6701,6 +5899,10 @@ packages:
       peek-readable: 4.1.0
     dev: true
 
+  /style-mod@4.0.3:
+    resolution: {integrity: sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==}
+    dev: false
+
   /style-mod@4.1.0:
     resolution: {integrity: sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==}
     dev: false
@@ -6724,20 +5926,20 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /svelte-check@3.5.1(postcss@8.4.31)(sass@1.67.0)(svelte@packages+svelte):
+  /svelte-check@3.5.1(postcss@8.4.27)(sass@1.67.0)(svelte@packages+svelte):
     resolution: {integrity: sha512-+Zb4iHxAhdUtcUg/WJPRjlS1RJalIsWAe9Mz6G1zyznSs7dDkT7VUBdXc3q7Iwg49O/VrZgyJRvOJkjuBfKjFA==}
     hasBin: true
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.20
       chokidar: 3.5.3
       fast-glob: 3.3.1
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: link:packages/svelte
-      svelte-preprocess: 5.0.4(postcss@8.4.31)(sass@1.67.0)(svelte@packages+svelte)(typescript@5.2.2)
+      svelte-preprocess: 5.0.4(postcss@8.4.27)(sass@1.67.0)(svelte@packages+svelte)(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
       - '@babel/core'
@@ -6754,23 +5956,6 @@ packages:
   /svelte-eslint-parser@0.32.0(svelte@packages+svelte):
     resolution: {integrity: sha512-Q8Nh3GHHoWZMv3Ej4zw+3+gyWPR8I5pPTJXEOvW+JOgwhGXqGKh7mOKNlVcEPtk+PCGiK9TPaRtvRkKoJR327A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      svelte: ^3.37.0 || ^4.0.0
-    peerDependenciesMeta:
-      svelte:
-        optional: true
-    dependencies:
-      eslint-scope: 7.2.0
-      eslint-visitor-keys: 3.4.1
-      espree: 9.6.0
-      postcss: 8.4.31
-      postcss-scss: 4.0.6(postcss@8.4.31)
-      svelte: link:packages/svelte
-    dev: true
-
-  /svelte-eslint-parser@0.33.1(svelte@packages+svelte):
-    resolution: {integrity: sha512-vo7xPGTlKBGdLH8T5L64FipvTrqv3OQRx9d2z5X05KKZDlF4rQk8KViZO4flKERY+5BiVdOh7zZ7JGJWo5P0uA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0
     peerDependenciesMeta:
@@ -6780,8 +5965,8 @@ packages:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      postcss: 8.4.31
-      postcss-scss: 4.0.9(postcss@8.4.31)
+      postcss: 8.4.27
+      postcss-scss: 4.0.6(postcss@8.4.27)
       svelte: link:packages/svelte
     dev: true
 
@@ -6793,8 +5978,8 @@ packages:
     dependencies:
       svelte: link:packages/svelte
 
-  /svelte-json-tree@2.2.0(svelte@packages+svelte):
-    resolution: {integrity: sha512-zcfepTrJ6xhpdgRZEujmiFh+ainRw7HO4Bsoh8PMAsm7fkgUPtnrZi3An8tmCFY8jajYhMrauHsd1S1XTeuiCw==}
+  /svelte-json-tree@2.1.0(svelte@packages+svelte):
+    resolution: {integrity: sha512-IAU//hE5bIA0SoM9AuP7xOoD9PUcMh4fio0oI52r0XJ7iNDytW7AnBdkIn1QSYLUyWzvQX3tp59JfLYfhd7lTw==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
@@ -6819,7 +6004,7 @@ packages:
       svelte: link:packages/svelte
     dev: true
 
-  /svelte-preprocess@5.0.4(postcss@8.4.31)(sass@1.67.0)(svelte@packages+svelte)(typescript@5.2.2):
+  /svelte-preprocess@5.0.4(postcss@8.4.27)(sass@1.67.0)(svelte@packages+svelte)(typescript@5.2.2):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -6860,7 +6045,7 @@ packages:
       '@types/pug': 2.0.6
       detect-indent: 6.1.0
       magic-string: 0.27.0
-      postcss: 8.4.31
+      postcss: 8.4.27
       sass: 1.67.0
       sorcery: 0.11.0
       strip-indent: 3.0.0
@@ -6905,7 +6090,7 @@ packages:
     dependencies:
       b4a: 1.6.4
       fast-fifo: 1.3.0
-      streamx: 2.15.1
+      streamx: 2.15.0
     dev: true
 
   /tar@6.1.15:
@@ -7011,38 +6196,19 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /ts-api-utils@0.0.46(typescript@5.1.3):
-    resolution: {integrity: sha512-YKJeSx39n0mMk+hrpyHKyTgxA3s7Pz/j1cXYR+t8HcwwZupzOR5xDGKnOEw3gmLaUeFUQt3FJD39AH9Ajn/mdA==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.1.3
-    dev: true
-
-  /ts-api-utils@1.0.3(typescript@5.1.3):
+  /ts-api-utils@1.0.3(typescript@5.0.4):
     resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
     engines: {node: '>=16.13.0'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.1.3
+      typescript: 5.0.4
     dev: true
 
   /tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
-  /tsutils@3.21.0(typescript@5.1.3):
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    peerDependencies:
-      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
-    dependencies:
-      tslib: 1.14.1
-      typescript: 5.1.3
-    dev: true
-
   /tsutils@3.21.0(typescript@5.2.2):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -7127,9 +6293,9 @@ packages:
       is-typedarray: 1.0.0
     dev: false
 
-  /typescript@5.1.3:
-    resolution: {integrity: sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==}
-    engines: {node: '>=14.17'}
+  /typescript@5.0.4:
+    resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
+    engines: {node: '>=12.20'}
     hasBin: true
     dev: true
 
@@ -7156,8 +6322,8 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
-  /undici@5.26.4:
-    resolution: {integrity: sha512-OG+QOf0fTLtazL9P9X7yqWxQ+Z0395Wk6DSkyTxtaq3wQEjIroVe7Y4asCX/vcCxYpNGMnwz8F0qbRYUoaQVMw==}
+  /undici@5.26.5:
+    resolution: {integrity: sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==}
     engines: {node: '>=14.0'}
     dependencies:
       '@fastify/busboy': 2.0.0
@@ -7208,7 +6374,7 @@ packages:
     engines: {node: '>=6.14.2'}
     requiresBuild: true
     dependencies:
-      node-gyp-build: 4.6.1
+      node-gyp-build: 4.6.0
     dev: false
 
   /utif2@4.1.0:
@@ -7232,13 +6398,13 @@ packages:
     resolution: {integrity: sha512-oFNfc58iLz1lHFsIKQy+wp0RNcZjiaDeHYTexYowpf4RYx9tZ97eWEcw8lQ1jDT8AnOso6XZi5iGjLNAeTR9Tw==}
     engines: {node: '>=12.0.0'}
     dependencies:
-      '@rollup/pluginutils': 5.0.3
+      '@rollup/pluginutils': 5.0.2(rollup@3.27.1)
       imagetools-core: 4.0.5
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /vite-node@0.33.0(@types/node@14.18.51):
+  /vite-node@0.33.0(@types/node@20.5.9):
     resolution: {integrity: sha512-19FpHYbwWWxDr73ruNahC+vtEdza52kA90Qb3La98yZ0xULqV8A5JLNPUff0f5zID4984tW7l3DH2przTJUZSw==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -7248,7 +6414,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.9(@types/node@14.18.51)
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -7260,43 +6426,7 @@ packages:
       - terser
     dev: true
 
-  /vite@4.4.9(@types/node@14.18.51):
-    resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 14.18.51
-      esbuild: 0.18.20
-      postcss: 8.4.31
-      rollup: 3.28.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
-  /vite@4.4.9(@types/node@20.6.1)(lightningcss@1.21.8)(sass@1.67.0):
+  /vite@4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0):
     resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -7324,14 +6454,14 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.6.1
-      esbuild: 0.18.20
+      '@types/node': 20.5.9
+      esbuild: 0.18.17
       lightningcss: 1.21.8
-      postcss: 8.4.31
-      rollup: 3.28.0
+      postcss: 8.4.27
+      rollup: 3.27.1
       sass: 1.67.0
     optionalDependencies:
-      fsevents: 2.3.3
+      fsevents: 2.3.2
 
   /vitefu@0.2.4(vite@4.4.9):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
@@ -7341,7 +6471,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.4.9(@types/node@20.6.1)(lightningcss@1.21.8)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
 
   /vitest@0.33.0(happy-dom@9.20.3)(jsdom@22.0.0)(playwright@1.35.1):
     resolution: {integrity: sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==}
@@ -7376,16 +6506,16 @@ packages:
     dependencies:
       '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
-      '@types/node': 14.18.51
+      '@types/node': 20.5.9
       '@vitest/expect': 0.33.0
       '@vitest/runner': 0.33.0
       '@vitest/snapshot': 0.33.0
       '@vitest/spy': 0.33.0
       '@vitest/utils': 0.33.0
-      acorn: 8.9.0
+      acorn: 8.10.0
       acorn-walk: 8.2.0
       cac: 6.7.14
-      chai: 4.3.7
+      chai: 4.3.10
       debug: 4.3.4
       happy-dom: 9.20.3
       jsdom: 22.0.0
@@ -7398,8 +6528,8 @@ packages:
       strip-literal: 1.0.1
       tinybench: 2.5.0
       tinypool: 0.6.0
-      vite: 4.4.9(@types/node@14.18.51)
-      vite-node: 0.33.0(@types/node@14.18.51)
+      vite: 4.4.9(@types/node@20.5.9)(lightningcss@1.21.8)(sass@1.67.0)
+      vite-node: 0.33.0(@types/node@20.5.9)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
diff --git a/sites/svelte.dev/.env b/sites/svelte.dev/.env
index 6dfd293254..fe28141641 100644
--- a/sites/svelte.dev/.env
+++ b/sites/svelte.dev/.env
@@ -15,3 +15,8 @@ SUPABASE_KEY=
 
 # client-side
 VITE_MAPBOX_ACCESS_TOKEN=
+
+PUBLIC_KIT_SITE_URL=https://kit.sveltefr.dev/
+PUBLIC_SVELTE_SITE_URL=https://sveltefr.dev/
+PUBLIC_LEARN_SITE_URL=https://apprendre.sveltefr.dev/
+PUBLIC_GITHUB_ORG=svelte-society-fr
diff --git a/sites/svelte.dev/scripts/get_contributors.js b/sites/svelte.dev/scripts/get_contributors.js
index cc2b9d4ae7..afeb37b252 100644
--- a/sites/svelte.dev/scripts/get_contributors.js
+++ b/sites/svelte.dev/scripts/get_contributors.js
@@ -5,6 +5,8 @@ import { stat, writeFile } from 'node:fs/promises';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+const { PUBLIC_GITHUB_ORG } = process.env;
+
 const force = process.env.FORCE_UPDATE === 'true';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -19,7 +21,7 @@ try {
 		process.exit(0);
 	}
 } catch {
-	const base = `https://api.github.com/repos/sveltejs/svelte/contributors`;
+	const base = `https://api.github.com/repos/${PUBLIC_GITHUB_ORG}/svelte/contributors`;
 	const { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } = process.env;
 
 	const MAX = 24;
diff --git a/sites/svelte.dev/src/app.html b/sites/svelte.dev/src/app.html
index bc2a51cc82..9376cd0c5f 100644
--- a/sites/svelte.dev/src/app.html
+++ b/sites/svelte.dev/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="theme-default typo-default">
+<html lang="fr" class="theme-default typo-default">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width,initial-scale=1" />
diff --git a/sites/svelte.dev/src/lib/server/docs/index.js b/sites/svelte.dev/src/lib/server/docs/index.js
index 486662553c..4adf09af1d 100644
--- a/sites/svelte.dev/src/lib/server/docs/index.js
+++ b/sites/svelte.dev/src/lib/server/docs/index.js
@@ -9,6 +9,13 @@ import {
 import { CONTENT_BASE_PATHS } from '../../../constants.js';
 import { render_content } from '../renderer';
 
+import {
+	PUBLIC_KIT_SITE_URL,
+	PUBLIC_SVELTE_SITE_URL,
+	PUBLIC_LEARN_SITE_URL,
+	PUBLIC_GITHUB_ORG
+} from '$env/static/public';
+
 /**
  * @param {import('./types').DocsData} docs_data
  * @param {string} slug
@@ -74,7 +81,11 @@ export async function get_docs_data(base = CONTENT_BASE_PATHS.DOCS) {
 			category.pages.push({
 				title: page_title,
 				slug: page_slug,
-				content: page_content,
+				content: page_content
+					.replace(/PUBLIC_KIT_SITE_URL/g, PUBLIC_KIT_SITE_URL)
+					.replace(/PUBLIC_SVELTE_SITE_URL/g, PUBLIC_SVELTE_SITE_URL)
+					.replace(/PUBLIC_LEARN_SITE_URL/g, PUBLIC_LEARN_SITE_URL)
+					.replace(/PUBLIC_GITHUB_ORG/g, PUBLIC_GITHUB_ORG),
 				category: category_title,
 				sections: await get_sections(page_content),
 				path: `${app_base}/docs/${page_slug}`,
@@ -102,7 +113,11 @@ export function get_docs_list(docs_data) {
 /** @param {string} str */
 const titled = async (str) =>
 	removeMarkdown(
-		escape(await markedTransform(str, { paragraph: (txt) => txt }))
+		escape(
+			await markedTransform(str, {
+				paragraph: (txt) => txt
+			})
+		)
 			.replace(/<\/?code>/g, '')
 			.replace(/&#39;/g, "'")
 			.replace(/&quot;/g, '"')
diff --git a/sites/svelte.dev/src/lib/time.js b/sites/svelte.dev/src/lib/time.js
index 53f4660ffd..118cf8382f 100644
--- a/sites/svelte.dev/src/lib/time.js
+++ b/sites/svelte.dev/src/lib/time.js
@@ -1,4 +1,4 @@
-const formatter = new Intl.RelativeTimeFormat(undefined, {
+const formatter = new Intl.RelativeTimeFormat('fr', {
 	numeric: 'auto'
 });
 
diff --git a/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte b/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 64a6c1d6a1..e8a740f19e 100644
--- a/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -14,9 +14,9 @@
 
 	async function destroy_selected() {
 		const confirmed = confirm(
-			`Are you sure you want to delete ${selected.length} ${
-				selected.length === 1 ? 'app' : 'apps'
-			}?`
+			`Êtes vous sûr.e de vouloir supprimer ${selected.length} ${
+				selected.length === 1 ? 'application' : 'applications'
+			} ?`
 		);
 		if (!confirmed) return;
 
@@ -40,7 +40,7 @@
 			// TODO raise an issue
 			// location.reload();
 		} else {
-			alert('Deletion failed');
+			alert('La suppression a échoué');
 		}
 
 		destroying = false;
@@ -51,13 +51,13 @@
 </script>
 
 <svelte:head>
-	<title>Your apps • Svelte</title>
+	<title>Vos applications • Svelte</title>
 </svelte:head>
 
 <div class="apps">
 	{#if data.user}
 		<header>
-			<h1>Your apps</h1>
+			<h1>Vos applications</h1>
 			<div class="user">
 				<img
 					class="avatar"
@@ -66,7 +66,7 @@
 				/>
 				<span>
 					{data.user.github_name || data.user.github_login}
-					(<a on:click|preventDefault={logout} href="/auth/logout">log out</a>)
+					(<a on:click|preventDefault={logout} href="/auth/logout">Se déconnecter</a>)
 				</span>
 			</div>
 		</header>
@@ -75,11 +75,11 @@
 			{#if selected.length > 0}
 				<button class="delete" on:click={() => destroy_selected()} disabled={destroying}>
 					<Icon name="delete" />
-					Delete {selected.length}
-					{selected.length === 1 ? 'app' : 'apps'}
+					Supprimer {selected.length}
+					{selected.length === 1 ? 'application' : 'applications'}
 				</button>
 
-				<button on:click={() => (selected = [])}>Clear selection</button>
+				<button on:click={() => (selected = [])}>Désélectionner les applications</button>
 			{:else}
 				<form
 					on:submit|preventDefault={(e) => {
@@ -89,8 +89,8 @@
 				>
 					<input
 						type="search"
-						placeholder="Search"
-						aria-label="Search"
+						placeholder="Chercher"
+						aria-label="Chercher"
 						name="search"
 						value={data.search}
 					/>
@@ -104,12 +104,12 @@
 					<li class:selected={selected.includes(gist.id)}>
 						<a href={selecting ? undefined : `/repl/${gist.id}`}>
 							<h2>{gist.name}</h2>
-							<span>updated {format(gist.updated_at || gist.created_at)}</span>
+							<span>Mis à jour {format(gist.updated_at || gist.created_at)}</span>
 						</a>
 
 						<label>
 							<input
-								aria-label="Select for delection"
+								aria-label="Sélectionner pour suppression"
 								type="checkbox"
 								bind:group={selected}
 								value={gist.id}
@@ -125,16 +125,17 @@
 					<a
 						href="/apps?offset={data.next}{data.search
 							? `&search=${encodeURIComponent(data.search)}`
-							: ''}">Next page...</a
+							: ''}">Page suivante...</a
 					>
 				{/if}
 			</div>
 		{:else}
-			<p>No apps here. <a href="/repl">Go make one!</a></p>
+			<p>Vous n'avez pas d'application. <a href="/repl">En créer une !</a></p>
 		{/if}
 	{:else}
 		<p>
-			Please <a on:click|preventDefault={login} href="/auth/login">log in</a> to see your saved apps.
+			Merci de <a on:click|preventDefault={login} href="/auth/login">vous connecter</a> pour voir vos
+			applications sauvegardées.
 		</p>
 	{/if}
 </div>
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
index c867ff332f..e10aa2bc80 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
@@ -70,7 +70,7 @@
 
 	<meta name="twitter:title" content="{data.gist.name} • REPL • Svelte" />
 	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
-	<meta name="Description" content="Interactive Svelte playground" />
+	<meta name="Description" content="Bac à sable Svelte interactif" />
 </svelte:head>
 
 <div class="repl-outer {zen_mode ? 'zen-mode' : ''}">
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
index 0a8ef19ea7..87d2a36ae9 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
@@ -82,7 +82,7 @@
 			if (navigator.onLine) {
 				alert(err.message);
 			} else {
-				alert(`It looks like you're offline! Find the internet and try again`);
+				alert(`Vous semblez être hors ligne ! Connectez-vous et réessayez`);
 			}
 		}
 
@@ -91,7 +91,7 @@
 
 	async function save() {
 		if (!user) {
-			alert('Please log in before saving your app');
+			alert('Merci de vous connecter pour sauvegarder votre application');
 			return;
 		}
 		if (saving) return;
@@ -137,7 +137,7 @@
 			if (navigator.onLine) {
 				alert(err.message);
 			} else {
-				alert(`It looks like you're offline! Find the internet and try again`);
+				alert('Merci de vous connecter pour sauvegarder votre application');
 			}
 		}
 
@@ -192,7 +192,7 @@ export default app;`
 	<input bind:value={name} on:focus={(e) => e.target.select()} use:enter={(e) => /** @type {HTMLInputElement} */ (e.target).blur()} />
 
 	<div class="buttons">
-		<button class="icon" on:click={() => (zen_mode = !zen_mode)} title="fullscreen editor">
+		<button class="icon fullscreen" on:click={() => (zen_mode = !zen_mode)} title="Plein écran">
 			{#if zen_mode}
 				<Icon name="close" />
 			{:else}
@@ -200,7 +200,12 @@ export default app;`
 			{/if}
 		</button>
 
-		<button class="icon" disabled={downloading} on:click={download} title="download zip file">
+		<button
+			class="icon"
+			disabled={downloading}
+			on:click={download}
+			title="Télécharger le fichier zip"
+		>
 			<Icon name="download" />
 		</button>
 
@@ -212,7 +217,7 @@ export default app;`
 			{/if}
 		</button>
 
-		<button class="icon" disabled={saving || !user} on:click={save} title="save">
+		<button class="icon" disabled={saving || !user} on:click={save} title="Sauvegarder">
 			{#if justSaved}
 				<Icon name="check" />
 			{:else}
@@ -228,7 +233,7 @@ export default app;`
 		{:else}
 			<button class="icon" on:click|preventDefault={login}>
 				<Icon name="log-in" />
-				<span>&nbsp;Log in to save</span>
+				<span>&nbsp;Se connecter pour sauvegarder</span>
 			</button>
 		{/if}
 	</div>
@@ -279,7 +284,7 @@ export default app;`
 		opacity: 0.3;
 	}
 
-	.icon[title^='fullscreen'] {
+	.icon.fullscreen {
 		display: none;
 	}
 
@@ -324,7 +329,7 @@ export default app;`
 	}
 
 	@media (min-width: 600px) {
-		.icon[title^='fullscreen'] {
+		.icon.fullscreen {
 			display: inline;
 		}
 
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
index 5449191a30..128d7a4201 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
@@ -30,8 +30,8 @@
 
 	{#if showMenu}
 		<div class="menu">
-			<a href="/apps">Your saved apps</a>
-			<button on:click={logout}>Log out</button>
+			<a href="/apps">Vos applications sauvegardées</a>
+			<button on:click={logout}>Se déconnecter</button>
 		</div>
 	{/if}
 </div>
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js b/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js
index 2f9ecca8db..3291ccfc51 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js
+++ b/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js
@@ -5,6 +5,8 @@ import examples_data from '$lib/generated/examples-data.js';
 import { get_example, get_examples_list } from '$lib/server/examples/index.js';
 import { error, json } from '@sveltejs/kit';
 
+import { PUBLIC_SVELTE_SITE_URL } from '$env/static/public';
+
 export const prerender = 'auto';
 
 const UUID_REGEX = /^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/;
@@ -60,7 +62,7 @@ export async function GET({ params }) {
 	if (dev && !client) {
 		// in dev with no local Supabase configured, proxy to production
 		// this lets us at least load saved REPLs
-		const res = await fetch(`https://svelte.dev/repl/api/${params.id}.json`);
+		const res = await fetch(`${PUBLIC_SVELTE_SITE_URL}/repl/api/${params.id}.json`);
 
 		// returning the response directly results in a bizarre
 		// content encoding error, so we create a new one
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
index 43fed8a1cb..9ce9eb760b 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
@@ -8,9 +8,9 @@
 <svelte:head>
 	<title>REPL • Svelte</title>
 
-	<meta name="twitter:title" content="Svelte REPL" />
+	<meta name="twitter:title" content="REPL • Svelte" />
 	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
-	<meta name="Description" content="Interactive Svelte playground" />
+	<meta name="Description" content="Bac à sable Svelte interactif" />
 </svelte:head>
 
 <div class="repl-outer">
diff --git a/sites/svelte.dev/src/routes/+layout.server.js b/sites/svelte.dev/src/routes/+layout.server.js
index 6e9a0cea60..8bcb91c5d3 100644
--- a/sites/svelte.dev/src/routes/+layout.server.js
+++ b/sites/svelte.dev/src/routes/+layout.server.js
@@ -10,13 +10,13 @@ export const load = async ({ url, fetch }) => {
 /** @param {URL} url */
 function get_nav_title(url) {
 	const list = new Map([
-		[/^docs/, 'Docs'],
+		[/^docs/, 'Documentation'],
 		[/^repl/, 'REPL'],
 		[/^blog/, 'Blog'],
-		[/^faq/, 'FAQ'],
-		[/^tutorial/, 'Tutorial'],
-		[/^search/, 'Search'],
-		[/^examples/, 'Examples']
+		[/^faq/, 'FÀQ'],
+		[/^tutorial/, 'Tutoriel'],
+		[/^search/, 'Recherche'],
+		[/^examples/, 'Exemples']
 	]);
 
 	for (const [regex, title] of list) {
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index e8b8ca562c..83d6615114 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
+	import { PUBLIC_KIT_SITE_URL, PUBLIC_LEARN_SITE_URL } from '$env/static/public';
 	import { Icon, Shell } from '@sveltejs/site-kit/components';
 	import { Nav, Separator } from '@sveltejs/site-kit/nav';
 	import { Search, SearchBox } from '@sveltejs/site-kit/search';
@@ -38,6 +39,7 @@
 		banner_bottom_height="42px"
 	>
 		<Nav slot="top-nav" title={data.nav_title} links={data.nav_links}>
+			<svelte:fragment slot="theme-label">Thème</svelte:fragment>
 			<svelte:fragment slot="home-large">
 				<strong>svelte</strong>.dev
 			</svelte:fragment>
@@ -48,14 +50,14 @@
 
 			<svelte:fragment slot="search">
 				{#if $page.url.pathname !== '/search'}
-					<Search />
+					<Search label="Recherche" />
 				{/if}
 			</svelte:fragment>
 
 			<svelte:fragment slot="external-links">
-				<a href="https://learn.svelte.dev/">Tutorial</a>
+				<a href={PUBLIC_LEARN_SITE_URL}>Tutoriel</a>
 
-				<a href="https://kit.svelte.dev">SvelteKit</a>
+				<a href={PUBLIC_KIT_SITE_URL}>SvelteKit</a>
 
 				<Separator />
 
@@ -73,14 +75,20 @@
 
 		<slot />
 
-		<div slot="banner-bottom" class="banner-bottom">
-			<a href="https://www.sveltesummit.com/2023/fall" class="banner-bottom">Join us at Svelte Summit on Nov 11</a>
-		</div>
+		<div slot="banner-bottom" class="banner-bottom"></div>
 	</Shell>
 </div>
 
 {#if browser}
-	<SearchBox />
+	<SearchBox placeholder="Recherche">
+		<svelte:fragment slot="search-description">
+			Les résultats se mettent à jour quand vous écrivez
+		</svelte:fragment>
+		<svelte:fragment slot="idle" let:has_recent_searches>
+			{has_recent_searches ? 'Recherches récentes' : 'Aucune recherche récente'}
+		</svelte:fragment>
+		<svelte:fragment slot="no-results">Aucun résultat</svelte:fragment>
+	</SearchBox>
 {/if}
 
 <style>
@@ -100,4 +108,14 @@
 		text-decoration: underline;
 		padding: 8px;
 	}
+
+	:global(.text .vo a) {
+		color: var(--sk-text-1);
+		box-shadow: inset 0 -1px 0 0 var(--sk-text-4);
+		transition: color 0.2s ease-in-out;
+	}
+
+	:global(.text .vo a:hover) {
+		color: var(--sk-text-3);
+	}
 </style>
diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index 3a3463f712..1a0a23d5cb 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -4,6 +4,8 @@
 	import Hero from './_components/Hero.svelte';
 	import Supporters from './_components/Supporters/index.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
+
+	import { PUBLIC_LEARN_SITE_URL } from '$env/static/public';
 </script>
 
 <svelte:head>
@@ -20,31 +22,41 @@
 
 <Blurb --background="var(--sk-back-1)">
 	<div slot="one">
-		<h2>compiled</h2>
+		<h2>compilé</h2>
 		<p>
-			Svelte shifts as much work as possible out of the browser and into your build step. No more
-			manual optimisations — just faster, more efficient apps.
+			Svelte allège le travail du navigateur en déléguant un maximum de tâches au compilateur. Plus
+			besoin d'optimisations manuelles — vos apps sont simplement plus rapides et plus efficaces.
 		</p>
 	</div>
 
 	<div slot="two">
 		<h2>compact</h2>
 		<p>
-			Write breathtakingly concise components using languages you already know — HTML, CSS and
-			JavaScript. Oh, and your application bundles will be tiny as well.
+			Écrivez des composants vraiment plus concis en utilisant des langages que vous connaissez déjà
+			— HTML, CSS et JavaScript. Ah, et les bundles de vos applications seront également plus
+			légers.
 		</p>
 	</div>
 
 	<div slot="three">
-		<h2>complete</h2>
+		<h2>complet</h2>
 		<p>
-			Built-in scoped styling, state management, motion primitives, form bindings and more — don't
-			waste time trawling npm for the bare essentials. It's all here.
+			Styles scopés par défaut, gestion d'état, primitives d'animation, liaisons de formulaire et
+			bien d'autres — ne perdez plus votre temps à fouiller npm pour des fonctionnalités de bases.
+			Tout est inclus.
 		</p>
 	</div>
 </Blurb>
 
-<TrySection />
+<TrySection>
+	<svelte:fragment slot="content-heading">voyez par vous-même</svelte:fragment>
+	<svelte:fragment slot="content"
+		>Essayez en local, <a target="_blank" rel="noreferrer" href="https://sveltekit.new"
+			>sur StackBlitz</a
+		>, ou bien avec
+		<a target="_blank" href={PUBLIC_LEARN_SITE_URL}>le tutoriel interactif</a>.</svelte:fragment
+	>
+</TrySection>
 
 <Demo />
 
@@ -54,17 +66,17 @@
 
 <Footer
 	links={{
-		resources: [
+		ressources: [
 			{
 				title: 'documentation',
 				href: '/docs'
 			},
 			{
-				title: 'tutorial',
+				title: 'tutoriel',
 				href: '/tutorial'
 			},
 			{
-				title: 'examples',
+				title: 'exemples',
 				href: '/examples'
 			},
 			{
@@ -72,7 +84,7 @@
 				href: '/blog'
 			}
 		],
-		connect: [
+		contact: [
 			{
 				title: 'github',
 				href: 'https://github.com/sveltejs/svelte'
@@ -93,8 +105,8 @@
 	}}
 >
 	<span slot="license">
-		Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
-		under the MIT license
+		Svelte est <a href="https://github.com/sveltejs/svelte">logiciel gratuit en license ouverte</a> publié
+		sous la license MIT
 	</span>
 </Footer>
 
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
index ecee643a0a..099d5ffbdf 100644
--- a/sites/svelte.dev/src/routes/_components/Demo.svelte
+++ b/sites/svelte.dev/src/routes/_components/Demo.svelte
@@ -6,25 +6,26 @@
 		{
 			id: 'hello-world',
 			title: 'Hello World',
-			description: 'Svelte components are built on top of HTML. Just add data.'
+			description:
+				"Les composants Svelte sont construits en se basant sur du HTML. Vous n'avez qu'à ajouter de la donnée."
 		},
 		{
 			id: 'nested-components',
-			title: 'Scoped CSS',
+			title: 'CSS scopé',
 			description:
-				'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.'
+				'Votre CSS est par défaut scopé à votre composant — plus aucune collision de style ou guerre de spécificité. Vous pouvez aussi <a href="/blog/svelte-css-in-js">utiliser votre librairie CSS-in-JS préférée</a >.'
 		},
 		{
 			id: 'reactive-assignments',
-			title: 'Reactivity',
+			title: 'Réactivité',
 			description:
-				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.'
+				"Déclenchez des mises à jour granulaires en assignant à des variables locales. Le compilateur s'occupe du reste."
 		},
 		{
 			id: 'svg-transitions',
 			title: 'Transitions',
 			description:
-				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.'
+				"Construisez de superbes interfaces à l'aide d'un moteur de transition puissant et performant intégré dans le framework."
 		}
 	];
 
@@ -32,7 +33,7 @@
 </script>
 
 <Section --background="var(--sk-back-2)">
-	<h3>build with ease</h3>
+	<h3>développez en toute simplicité</h3>
 
 	<div class="container">
 		<div class="controls">
@@ -49,7 +50,7 @@
 				{/each}
 			</div>
 
-			<a href="/examples">more <span class="large-show">&nbsp;examples</span> &rarr;</a>
+			<a href="/examples">plus d'<span class="large-show">exemples</span> &rarr;</a>
 		</div>
 
 		{#if selected}
diff --git a/sites/svelte.dev/src/routes/_components/Hero.svelte b/sites/svelte.dev/src/routes/_components/Hero.svelte
index f4223b0a97..0f1fe90f3d 100644
--- a/sites/svelte.dev/src/routes/_components/Hero.svelte
+++ b/sites/svelte.dev/src/routes/_components/Hero.svelte
@@ -6,6 +6,8 @@
 	// @ts-ignore
 	import MachineMobile from './svelte-machine-mobile.png?w=960&format=avif;webp;png;&as=picture';
 
+	import { PUBLIC_LEARN_SITE_URL } from '$env/static/public';
+
 	const srcset = (sources) => sources.map(({ src, w }) => `${src} ${w}w`).join(', ');
 </script>
 
@@ -16,10 +18,10 @@
 			<span style="white-space: nowrap">Cybernetically enhanced</span> <br /> web apps
 		</strong>
 		<div class="buttons">
-			<a href="https://learn.svelte.dev" rel="external" class="cta">
-				tutorial<Icon name="external-link" size="1em" />
+			<a href={PUBLIC_LEARN_SITE_URL} rel="external" class="cta">
+				tutoriel<Icon name="external-link" size="1em" />
 			</a>
-			<a href="/docs/introduction" class="cta basic">read the docs</a>
+			<a href="/docs/introduction" class="cta basic">lire la documentation</a>
 		</div>
 	</div>
 
@@ -42,7 +44,10 @@
 		<source srcset={srcset(MachineMobile.sources.avif)} type="image/avif" />
 		<source srcset={srcset(MachineMobile.sources.webp)} type="image/webp" />
 		<source srcset={srcset(MachineMobile.sources.png)} type="image/png" />
-		<img alt="The Svelte compiler packaging up your component code" src={MachineMobile.img.src} />
+		<img
+			alt="Le compilateur Svelte préparant le code de vos composants"
+			src={MachineMobile.img.src}
+		/>
 	</picture>
 </div>
 
diff --git a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
index 3b220a52ce..fac51a0721 100644
--- a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
+++ b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
@@ -10,13 +10,15 @@
 </script>
 
 <Section --background="var(--sk-back-2">
-	<p class="intro">Svelte is made possible by the work of hundreds of supporters.</p>
+	<p class="intro">Svelte existe grâce au travail de centaines de personnes.</p>
 
 	<div class="layout">
 		<div class="contributors blurb">
-			<h3>contributors</h3>
+			<h3>contributeurs</h3>
 			<p>
-				<a href="https://github.com/sveltejs/svelte/graphs/contributors">Join us on GitHub</a>
+				<a href="https://github.com/sveltejs/svelte/graphs/contributors"
+					>Rejoignez-nous sur Github</a
+				>
 			</p>
 		</div>
 
@@ -34,8 +36,8 @@
 		</div>
 
 		<div class="donors blurb">
-			<h3>donors</h3>
-			<p><a href="https://opencollective.com/svelte">Support us on OpenCollective</a></p>
+			<h3>donateurs</h3>
+			<p><a href="https://opencollective.com/svelte">Soutenez-nous sur OpenCollective</a></p>
 		</div>
 
 		<div class="donors grid">
diff --git a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
index f55f2bd64b..7a72a2c998 100644
--- a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
+++ b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
@@ -7,19 +7,19 @@
 </script>
 
 <Section --background={$theme.current === 'light' ? 'var(--sk-back-4)' : '#222'}>
-	<h3>loved by developers</h3>
+	<h3>adoré par les développeurs et développeuses</h3>
 
 	<p>
-		We're proud that Svelte was recently voted the <a
+		Nous sommes fiers que Svelte ait récemment été élu <a
 			href="https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies"
-			>most admired JS web framework</a
+			>framework JS web le plus admiré</a
 		>
-		in one industry survey while drawing the most interest in learning it in
+		dans un sondage à l'échelle de l'industrie, tout étant suscitant le plus de curiosité dans
 		<a
 			href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
-			>two</a
-		> <a href="https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/">others</a>. We
-		think you'll love it too.
+			>deux</a
+		> <a href="https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/">autres</a>. Nous
+		pensons que vous allez l'aimer aussi.
 	</p>
 
 	<section class="whos-using-svelte-container" class:dark={$theme.current === 'dark'}>
diff --git a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 158973aebe..1c18318249 100644
--- a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -40,7 +40,9 @@
 				title: data.post.title
 			}}
 			orientation="inline"
-		/>
+		>
+			Sur cette page
+		</DocsOnThisPage>
 
 		{@html data.post.content}
 	</article>
diff --git a/sites/svelte.dev/src/routes/chat/+server.js b/sites/svelte.dev/src/routes/chat/+server.js
index 0cb184d932..ce1d85bb9d 100644
--- a/sites/svelte.dev/src/routes/chat/+server.js
+++ b/sites/svelte.dev/src/routes/chat/+server.js
@@ -1,6 +1,6 @@
 export function GET() {
 	return new Response(undefined, {
 		status: 302,
-		headers: { Location: 'https://discord.gg/svelte' }
+		headers: { Location: 'https://discord.gg/D6Dzc5m3' }
 	});
 }
diff --git a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
index ddcdadf144..eb0d3bebcf 100644
--- a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
@@ -4,6 +4,8 @@
 	import { copy_code_descendants } from '@sveltejs/site-kit/actions';
 	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
 
+	import { PUBLIC_GITHUB_ORG } from '$env/static/public';
+
 	export let data;
 
 	$: pages = data.sections.flatMap((section) => section.pages);
@@ -18,26 +20,27 @@
 	<title>{data.page?.title} • Docs • Svelte</title>
 
 	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
-	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
-	<meta name="Description" content="{data.page.title} • Svelte documentation" />
+	<meta name="twitter:description" content="{data.page.title} • Documentation Svelte " />
+	<meta name="Description" content="{data.page.title} • Documentation Svelte" />
 </svelte:head>
 
 <div class="text" id="docs-content" use:copy_code_descendants>
 	<a
 		class="edit"
-		href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{data.page.file}"
+		href="https://github.com/{PUBLIC_GITHUB_ORG}/svelte/edit/french/documentation/docs/{data.page
+			.file}"
 	>
-		<Icon size={50} name="edit" /> Edit this page on GitHub
+		<Icon size={50} name="edit" /> Modifier cette page sur Github
 	</a>
 
-	<DocsOnThisPage details={data.page} />
+	<DocsOnThisPage details={data.page}>Sur cette page</DocsOnThisPage>
 
 	{@html data.page.content}
 </div>
 
 <div class="controls">
 	<div>
-		<span class:faded={!prev}>previous</span>
+		<span class:faded={!prev}>précédent</span>
 
 		{#if prev}
 			<a href={prev.path}>{prev.title}</a>
@@ -45,7 +48,7 @@
 	</div>
 
 	<div>
-		<span class:faded={!next}>next</span>
+		<span class:faded={!next}>suivant</span>
 		{#if next}
 			<a href={next.path}>{next.title}</a>
 		{/if}
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
index 22c6d4f81a..c9417a823a 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
@@ -32,12 +32,12 @@
 <svelte:head>
 	<title>{data.example?.title} {data.example?.title ? '•' : ''} Svelte Examples</title>
 
-	<meta name="twitter:title" content="Svelte examples" />
+	<meta name="twitter:title" content="Exemples Svelte" />
 	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
-	<meta name="Description" content="Interactive example Svelte apps" />
+	<meta name="Description" content="Exemples Svelte interactifs" />
 </svelte:head>
 
-<h1 class="visually-hidden">Examples</h1>
+<h1 class="visually-hidden">Exemples</h1>
 <div class="examples-container" bind:clientWidth={width}>
 	<div class="viewport offset-{offset}">
 		<TableOfContents
diff --git a/sites/svelte.dev/src/routes/nav.json/+server.js b/sites/svelte.dev/src/routes/nav.json/+server.js
index aa7c1eb069..563fa0398e 100644
--- a/sites/svelte.dev/src/routes/nav.json/+server.js
+++ b/sites/svelte.dev/src/routes/nav.json/+server.js
@@ -46,7 +46,7 @@ async function get_nav_list() {
 
 	return [
 		{
-			title: 'Docs',
+			title: 'Documentation',
 			prefix: 'docs',
 			pathname: '/docs/introduction',
 			sections: [
@@ -57,7 +57,7 @@ async function get_nav_list() {
 			]
 		},
 		{
-			title: 'Examples',
+			title: 'Exemples',
 			prefix: 'examples',
 			pathname: '/examples',
 			sections: [
diff --git a/sites/svelte.dev/src/routes/search/+page.svelte b/sites/svelte.dev/src/routes/search/+page.svelte
index 14494e1588..9a5e8b9c47 100644
--- a/sites/svelte.dev/src/routes/search/+page.svelte
+++ b/sites/svelte.dev/src/routes/search/+page.svelte
@@ -5,16 +5,25 @@
 </script>
 
 <svelte:head>
-	<title>Search • Svelte</title>
+	<title>Rechercher • Svelte</title>
 </svelte:head>
 
 <main>
-	<h1>Search</h1>
+	<h1>Rechercher</h1>
 	<form>
-		<input name="q" value={data.query} type="search" aria-label="Search" placeholder="Search" spellcheck="false" />
+		<input
+			name="q"
+			value={data.query}
+			type="search"
+			aria-label="Rechercher"
+			placeholder="Rechercher"
+			spellcheck="false"
+		/>
 	</form>
 
-	<SearchResults results={data.results} query={data.query} />
+	<SearchResults results={data.results} query={data.query}>
+		<svelte:fragment slot="no-results">Aucun résultat</svelte:fragment>
+	</SearchResults>
 </main>
 
 <style>
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 2ec28418d4..67c410a930 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -100,7 +100,7 @@
 <svelte:head>
 	<title>{selected.section.title} / {selected.chapter.title} • Svelte Tutorial</title>
 
-	<meta name="twitter:title" content="Svelte tutorial" />
+	<meta name="twitter:title" content="Tutoriel Svelte" />
 	<meta name="twitter:description" content="{selected.section.title} / {selected.chapter.title}" />
 	<meta name="Description" content="{selected.section.title} / {selected.chapter.title}" />
 </svelte:head>
@@ -122,17 +122,17 @@
 						<!-- TODO disable this button when the contents of the REPL
 							matches the expected end result -->
 						<button class="show" on:click={() => (completed ? reset() : complete())}>
-							{completed ? 'Reset' : 'Show me'}
+							{completed ? 'Réinitialiser' : 'Montrez-moi'}
 						</button>
 					{/if}
 
 					{#if selected.next}
-						<a class="next" href="/tutorial/{selected.next.slug}">Next</a>
+						<a class="next" href="/tutorial/{selected.next.slug}">Suivant</a>
 					{/if}
 				</div>
 
 				<div class="improve-chapter">
-					<a class="no-underline" href={improve_link}>Edit this chapter</a>
+					<a class="no-underline" href={improve_link}>Éditer ce chapitre</a>
 				</div>
 			</div>
 		</div>