From d9cc0ffc8fde90af9b945dc1c10094b5a9c31dd7 Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <danielericsandoval@gmail.com>
Date: Tue, 31 May 2022 14:09:28 -0600
Subject: [PATCH 01/89] [docs] "What's new in Svelte" June newsletter (#7565)

---
 ...022-06-01-whats-new-in-svelte-june-2022.md | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md

diff --git a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
new file mode 100644
index 0000000000..b7685bf8ad
--- /dev/null
+++ b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
@@ -0,0 +1,113 @@
+---
+title: "What's new in Svelte: June 2022"
+description: "Cancellable dispatched events, deeper {@const} declarations and more!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+With last month's [Svelte Summit](https://www.youtube.com/watch?v=qqj2cBockqE) behind us, we're ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to `createEventDispatcher`, `@const` declarations and tons of progress toward SvelteKit 1.0.
+
+Let's dive in!
+
+## What's new in Svelte
+- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
+- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
+- Lots of bug fixes across `<svelte:element>`, animations and various DOM elements. Check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3480) for a deeper dive!
+
+
+## What's new in SvelteKit
+- Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever ([Vite 3.0 Milestone](https://github.com/vitejs/vite/milestone/5))
+- `config.kit.alias` lets you more easily declare a custom alias to replace values in `import` statements ([Docs](https://kit.svelte.dev/docs/configuration#alias), [Issue](https://github.com/sveltejs/kit/pull/4922))
+- Pages marked for prerendering will now fail during SSR at runtime ([PR](https://github.com/sveltejs/kit/pull/4812))
+
+**Breaking Changes**
+- Node 14 is no longer supported ([Issue](https://github.com/sveltejs/kit/issues/4916))
+- Requests to `/favicon.ico` will no longer be suppressed and will instead be handled as a valid route ([PR](https://github.com/sveltejs/kit/pull/5046))
+- AMP support has been moved to a separate `@sveltejs/amp` package ([Docs](https://kit.svelte.dev/docs/seo#manual-setup-amp), [PR](https://github.com/sveltejs/kit/pull/4710))
+- Generated types are now written to `_types` directories - update your imports accordingly ([PR](https://github.com/sveltejs/kit/pull/4705))
+- `%svelte.head%` and `%svelte.body%` are now `%sveltekit.head%` and `%sveltekit.body%` in `app.html` ([Docs](https://kit.svelte.dev/docs/migrating#project-files-src-template-html), [PR](https://github.com/sveltejs/kit/pull/5016/))
+- `LoadInput` is now `LoadEvent`
+- Dropped support for Wrangler 1 in favor of Wrangler 2 ([PR}(https://github.com/sveltejs/kit/pull/4887))
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [Plantarium](https://github.com/jim-fx/plantarium) is a tool for the procedural generation of 3D plants.
+- [SPATULA](https://github.com/AlexWarnes/lamina-spatula) is a tool for building shading materials that are exportable as code material in any project that uses lamina and threejs
+- [Waaard](https://waaard.com/) lets you create and send protected links with a variety of SSO providers
+- [Magidoc](https://github.com/magidoc-org/magidoc) is a fast and highly customizable GraphQL documentation generator
+- [myMarkmap](https://github.com/eyssette/myMarkmap) is a custom editor for Markmap, built with SvelteKit
+- [PassShare](https://passshare.mynt.pw/) is a way for you to share your passwords to your friends, securely and effortlessly
+- [DashingOS](https://beta.dashingos.com/) is a tool (like Notion + CodeSandbox) to make it quick and easy to prototype and document your work all in one place
+- [worker-kit-email](https://github.com/miunau/worker-kit-email) helps you develop transactional emails quickly using regular SvelteKit routes
+- [kaios-weather-svelte](https://github.com/cyan-2048/kaios-weather-svelte) is a very familiar looking weather app for KaiOS
+- [svelte-gantt](https://github.com/ANovokmet/svelte-gantt) is a lightweight and fast interactive gantt chart/resource booking component
+- [Miru](https://github.com/ThaUnknown/miru) is a BitTorrent streaming software for cats
+
+Looking for a great SvelteKit website to contribute to? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
+
+
+**Learning Resources**
+
+_To Read_
+- [Component party](https://component-party.dev/) is a site that compares common patterns in different frameworks
+- [Quick tip: style prop defaults](https://geoffrich.net/posts/style-prop-defaults/) by Geoff Rich
+- [Working with reduced motion in Svelte](https://ghostdev.xyz/posts/working-with-reduced-motion-in-svelte) by GHOST
+- [Building a Musical Instrument with the Web Audio API](https://www.taniarascia.com/musical-instrument-web-audio-api/) by Tania Rascia
+- [Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices](https://dev.to/alexwarnes/svelte-cubed-creating-an-accessible-and-consistent-experience-across-devices-42ae) and [Svelte-Cubed: Loading Your glTF Models](https://dev.to/alexwarnes/svelte-cubed-loading-your-gltf-models-14lf) by Alex Warnes
+
+_To Watch_
+
+From Svelte Society:
+- [The Svelte Summit Spring 2022 stream recording](https://www.youtube.com/watch?v=qqj2cBockqE) has been updated with chapter markers to make it easy to watch again and again
+- [The full recording of Svelte London, April 2022](https://www.youtube.com/watch?v=zIxzJzTnoxA) is up! Check out the amazing talks from across the Svelte London community
+- [Persian Svelte Society](https://www.youtube.com/channel/UCfWH9lCsXN3j8oXq8dru82Q) is making Persian-language videos about Svelte
+- Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
+  - [SvelteKit + Sanity.io: a match made in heaven](https://www.youtube.com/watch?v=j0_1hfiEVWA&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=5) on May 13
+  - [Slicing up your Svelte Sites with Prismic](https://www.youtube.com/watch?v=FUbHwwMALkk) on May 20
+  - [Rendering your Svelte apps on Render](https://www.youtube.com/watch?v=SnV_hMLVyqs) on May 24
+  - [The story behind the (unofficial) Svelte newsletter](https://www.youtube.com/watch?v=aK0xXm3hPxk&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=7) on May 27
+
+
+Across the Web:
+- [Building vite-plugin-svelte-inspector](https://www.youtube.com/watch?v=udYB24IMtsY), [What is Singleton?](https://www.youtube.com/watch?v=xhi0m1QZue0) and [What is Navigation?](https://www.youtube.com/watch?v=Ym-OnGUps2c) by lihautan
+- [Auto Import Components In Svelte Kit - Weekly Svelte](https://www.youtube.com/watch?v=JXvKBtTPr64) by LevelUpTuts
+- [🧪 Test SvelteKit with TDD & VITEST 🧪](https://www.youtube.com/watch?v=5bQD3dCoyHA) by Johnny Magrippis
+- [Google Analytics With SvelteKit](https://www.youtube.com/watch?v=l-x6H0fnqqQ), [Using WebSockets With SvelteKit](https://www.youtube.com/watch?v=mAcKzdW5fR8), [SvelteKit Authentication Using Cookies](https://www.youtube.com/watch?v=T935Ya4W5X0) and [Svelte Headless UI Component Library](https://www.reddit.com/r/sveltejs/comments/ueu849/svelte_headless_ui_component_library/) by Joy of Code
+- [Named Layouts In Nested Routes in SvelteKit](https://www.youtube.com/watch?v=hKg_V3jouLk) by The Svelte Junction
+- [SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks](https://rodneylab.com/sveltekit-shiki-syntax-highlighting/) and [Svelte Capsize Styling: Typography Tooling](https://rodneylab.com/svelte-capsize-styling/) by Rodney Lab
+
+_To Hear_
+- Svelte Radio has been putting out weekly episodes:
+  - [The Adventures of Running a Svelte Meetup](https://www.svelteradio.com/episodes/the-adventures-of-running-a-svelte-meetup)
+  - [The other Rich! Geoff! (feat. Geoff Rich)](https://www.svelteradio.com/episodes/the-other-rich-geoff)
+  - [Inspecting Svelte Code with Dominik G.](https://www.svelteradio.com/episodes/inspecting-svelte-code-with-dominik-g)
+  - [Stores Galore](https://www.svelteradio.com/episodes/stores-galore)
+- [Svelte and the Future of Frontend Development (feat. Rich Harris)](https://thenewstack.io/svelte-and-the-future-of-front-end-development/) from The New Stack
+
+
+**Libraries, Tools & Components**
+- [vite-plugin-svelte-console-remover](https://github.com/jhubbardsf/vite-plugin-svelte-console-remover) is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don't leak into production
+- [Svelte Headless Tables](https://github.com/bryanmylee/svelte-headless-table) is an unopinionated and extensible data tables for Svelte
+- [y-presence](https://github.com/nimeshnayaju/y-presence) is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
+- [Svelcro](https://github.com/oslabs-beta/Svelcro) is a component performance tracker for Svelte applications
+- [Svelte-Splitpanes](https://github.com/orefalo/svelte-splitpanes) lets you create dynamic and predictable view panels to layout an application
+- [svelte-miniplayer](https://github.com/ThaUnknown/svelte-miniplayer) is a lightweight, fast, resizable and draggable miniplayer for media
+- [svelte-keybinds](https://github.com/ThaUnknown/svelte-keybinds) is a minimalistic keybinding interface, with rebinding and saving
+- [svelte-speech-recognition](https://github.com/jhubbardsf/svelte-speech-recognition) converts speech from the microphone to text and makes it available to your Svelte components
+
+**Special Feature: Svelte Stores**
+There were lots of Svelte stores released this month from a number of authors...
+
+- [svelte-mutable-store](https://github.com/feltcoop/svelte-mutable-store) is a Svelte store for mutable values with the `immutable` compiler option
+- [svelte-damped-store](https://github.com/aredridel/svelte-damped-store) is a derived writable store that can suspend updates while [svelte-lens-store](https://github.com/aredridel/svelte-lens-store) is a functional lens over Svelte stores
+- [svelte-persistent-store](https://github.com/furudean/svelte-persistent-store) is a writable svelte store that saves and loads data from `Window.localStorage` or `Window.sessionStorage`.
+
+
+Did we miss anything? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to add your voice.
+
+Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! [Get your tickets now](https://ti.to/svelte/svelte-summit-fall-edition).
+
+See y'all next month!

From 9dc308a745b2945508b9776760e7d838f9bedacd Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 31 May 2022 14:46:37 -0700
Subject: [PATCH 02/89] cleanup PR links in last blog post

---
 .../blog/2022-06-01-whats-new-in-svelte-june-2022.md        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
index b7685bf8ad..d38921b7eb 100644
--- a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
+++ b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
@@ -17,17 +17,17 @@ Let's dive in!
 
 ## What's new in SvelteKit
 - Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever ([Vite 3.0 Milestone](https://github.com/vitejs/vite/milestone/5))
-- `config.kit.alias` lets you more easily declare a custom alias to replace values in `import` statements ([Docs](https://kit.svelte.dev/docs/configuration#alias), [Issue](https://github.com/sveltejs/kit/pull/4922))
+- `config.kit.alias` lets you more easily declare a custom alias to replace values in `import` statements ([Docs](https://kit.svelte.dev/docs/configuration#alias), [PR](https://github.com/sveltejs/kit/pull/4964))
 - Pages marked for prerendering will now fail during SSR at runtime ([PR](https://github.com/sveltejs/kit/pull/4812))
 
 **Breaking Changes**
-- Node 14 is no longer supported ([Issue](https://github.com/sveltejs/kit/issues/4916))
+- Node 14 is no longer supported ([PR](https://github.com/sveltejs/kit/pull/4922))
 - Requests to `/favicon.ico` will no longer be suppressed and will instead be handled as a valid route ([PR](https://github.com/sveltejs/kit/pull/5046))
 - AMP support has been moved to a separate `@sveltejs/amp` package ([Docs](https://kit.svelte.dev/docs/seo#manual-setup-amp), [PR](https://github.com/sveltejs/kit/pull/4710))
 - Generated types are now written to `_types` directories - update your imports accordingly ([PR](https://github.com/sveltejs/kit/pull/4705))
 - `%svelte.head%` and `%svelte.body%` are now `%sveltekit.head%` and `%sveltekit.body%` in `app.html` ([Docs](https://kit.svelte.dev/docs/migrating#project-files-src-template-html), [PR](https://github.com/sveltejs/kit/pull/5016/))
 - `LoadInput` is now `LoadEvent`
-- Dropped support for Wrangler 1 in favor of Wrangler 2 ([PR}(https://github.com/sveltejs/kit/pull/4887))
+- Dropped support for Wrangler 1 in favor of Wrangler 2 ([PR](https://github.com/sveltejs/kit/pull/4887))
 
 ---
 

From 7630a25db54f113102ea6d69b7d3e13e82b278fb Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 3 Jun 2022 10:11:27 -0400
Subject: [PATCH 03/89] [docs] update getting started info (#7573)

* update getting started info

* Update site/content/blog/2019-04-16-svelte-for-new-developers.md

Co-authored-by: Conduitry <git@chor.date>

* Update site/content/tutorial/01-introduction/07-making-an-app/text.md

Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>

* Update site/content/blog/2019-04-16-svelte-for-new-developers.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Conduitry <git@chor.date>
Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
---
 .../2019-04-16-svelte-for-new-developers.md   | 31 +++++++------------
 .../01-introduction/07-making-an-app/text.md  | 12 ++++---
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md
index c4ff4716e3..0a01474bbd 100644
--- a/site/content/blog/2019-04-16-svelte-for-new-developers.md
+++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -56,36 +56,36 @@ To write code, you need a good editor. The most popular choice is [Visual Studio
 
 ## Creating a project
 
-We're going to follow the instructions in part two of [The easiest way to get started with Svelte](/blog/the-easiest-way-to-get-started).
-
-First, we'll use npx to run [degit](https://github.com/Rich-Harris/degit), a program for cloning project templates from [GitHub](https://github.com) and other code storage websites. You don't have to use a project template, but it means you have to do a lot less setup work. You will need to have [Git](https://git-scm.com/) installed in order to use degit. (Eventually you'll probably have to learn [Git](https://git-scm.com/) itself, which most programmers use to manage their projects.)
+We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template. You don't have to use a project template, but it means you have to do a lot less setup work.
 
 On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):
 
 ```bash
-npx degit sveltejs/template my-svelte-project
+npm init vite my-svelte-project -- --template svelte
 cd my-svelte-project
 npm install
 ```
 
-This creates a new directory, `my-svelte-project`, adds files from the [sveltejs/template](https://github.com/sveltejs/template) code repository, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`.
+> You can replace `--template svelte` with `--template svelte-ts`, if you prefer TypeScript.
+
+This creates a new directory, `my-svelte-project`, adds files from the [create-vite/template-svelte](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`.
 
-In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `start`. To launch your app in development mode, type the following:
+In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `preview`. To launch your app in development mode, type the following:
 
 ```bash
 npm run dev
 ```
 
-Running the `dev` script starts a program called [Rollup](https://rollupjs.org/guide/en/). Rollup's job is to take your application's source files (so far, just `src/main.js` and `src/App.svelte`), pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
+Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
 
-Speaking of which, open a browser and navigate to http://localhost:8080. This is your application running on a local *web server* (hence 'localhost') on port 8080.
+Speaking of which, open a browser and navigate to http://localhost:3000. This is your application running on a local *web server* (hence 'localhost') on port 3000.
 
-Try changing `src/App.svelte` and saving it. The application will reload with your changes.
+Try changing `src/App.svelte` and saving it. The application will update with your changes.
 
 
 ## Building your app
 
-In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Rollup skips the final step where your app's JavaScript is compressed using [Terser](https://terser.org/).
+In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app's JavaScript is compressed.
 
 When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command:
 
@@ -93,15 +93,8 @@ When you share your app with the world, you want to build it in 'production mode
 npm run build
 ```
 
-Your `public` directory now contains a compressed `bundle.js` file containing your app's JavaScript. You can run it like so:
+Your `dist` directory now contains an optimised version of your app. You can run it like so:
 
 ```bash
-npm run start
+npm run preview
 ```
-
-This will run the app on http://localhost:8080.
-
-
-## Next steps
-
-To share your app with the world you'll need to *deploy* it. There are many ways to do so — some are listed in the `README.md` file inside your project.
diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md
index 132865a364..b65d084f13 100644
--- a/site/content/tutorial/01-introduction/07-making-an-app/text.md
+++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md
@@ -4,13 +4,15 @@ title: Making an app
 
 This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor.
 
-First, you'll need to integrate Svelte with a build tool. There are officially maintained plugins for [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org) and [webpack](https://webpack.js.org/)...
+First, you'll need to integrate Svelte with a build tool. We recommend using [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/)...
 
-* [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte)
-* [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte)
-* [svelte-loader](https://github.com/sveltejs/svelte-loader)
+```bash
+npm init vite my-app -- --template svelte
+```
+
+...or one of the [community-maintained integrations](https://sveltesociety.dev/tools).
 
-...and a variety of [community-maintained ones](https://sveltesociety.dev/tools).
+> [SvelteKit](https://kit.svelte.dev) is the official application framework from the Svelte team. It's currently in development, but if you don't mind using pre-1.0 software then it's the recommended way to build Svelte apps.
 
 Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.
 

From cab5e7346d14d4511087890e31e90f2be8b1aac9 Mon Sep 17 00:00:00 2001
From: Adam Alexander <50453312+a-alexander@users.noreply.github.com>
Date: Wed, 8 Jun 2022 13:07:51 +0100
Subject: [PATCH 04/89] [docs] fix typo in 02-template-syntax.md (#7593)

Tiny typo.
---
 site/content/docs/02-template-syntax.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index ac49fb23c5..f2e71ecbe0 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1666,7 +1666,7 @@ If `this` is the name of a void tag (e.g., `br`) and `<svelte:element>` has chil
 
 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.
 
-Unlike `<svelte:self>`, this element may only appear the top level of your component and must never be inside a block or element.
+Unlike `<svelte:self>`, this element may only appear at the top level of your component and must never be inside a block or element.
 
 ```sv
 <script>

From 346c27d4da9950eabec17fb1f4594a2431b2655e Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 12 Jun 2022 23:33:27 +0900
Subject: [PATCH 05/89] [chore] update changelog (#7602)

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d48f49a254..9dca374b76 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## Unreleased
 
 * Faster SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701))
-* Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521))
+* Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571))
 
 ## 3.48.0
 

From 9635a2e413f17f9c818714e2963ad83a6c56102c Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 12 Jun 2022 23:37:49 +0900
Subject: [PATCH 06/89] [chore] remove nyc stuff (#7601)

It appears that forgot to remove config related to nyc in this commit.

https://github.com/sveltejs/svelte/commit/f1ca1cc0983ddf68c89f596776f54717c4075ede
---
 .gitignore   | 1 -
 package.json | 8 --------
 2 files changed, 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 22389f683c..478a6f5ceb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 .idea
 .DS_Store
-.nyc_output
 .vscode
 node_modules
 *.map
diff --git a/package.json b/package.json
index 65d42e3a1d..b3c9c65f98 100644
--- a/package.json
+++ b/package.json
@@ -151,13 +151,5 @@
     "tiny-glob": "^0.2.6",
     "tslib": "^2.0.3",
     "typescript": "^3.7.5"
-  },
-  "nyc": {
-    "include": [
-      "compiler/svelte.js",
-      "shared.js"
-    ],
-    "sourceMap": true,
-    "instrument": true
   }
 }

From f8605d6acbf66976da9b4547f76e90e163899907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Kishi?= <mrkishi@users.noreply.github.com>
Date: Mon, 20 Jun 2022 08:02:48 -0300
Subject: [PATCH 07/89] [fix] harden attribute escaping during ssr (#7530)

---
 src/runtime/internal/ssr.ts                    | 18 ++++++++++--------
 .../_expected.html                             |  8 +++++++-
 .../main.svelte                                |  7 ++++++-
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index 2c7d24a2cd..dc4c16dffb 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -85,18 +85,20 @@ export function escape(value: unknown, is_attr = false) {
 	let escaped = '';
 	let last = 0;
 
-  while (pattern.test(str)) {
-    const i = pattern.lastIndex - 1;
-    const ch = str[i];
-    escaped += str.substring(last, i) + (ch === '&' ? '&amp;' : (ch === '"' ? '&quot;' : '&lt;'));
-    last = i + 1;
-  }
+	while (pattern.test(str)) {
+		const i = pattern.lastIndex - 1;
+		const ch = str[i];
+		escaped += str.substring(last, i) + (ch === '&' ? '&amp;' : (ch === '"' ? '&quot;' : '&lt;'));
+		last = i + 1;
+	}
 
 	return escaped + str.substring(last);
 }
 
 export function escape_attribute_value(value) {
-	return typeof value === 'string' ? escape(value, true) : value;
+	// keep booleans, null, and undefined for the sake of `spread`
+	const should_escape = typeof value === 'string' || (value && typeof value === 'object');
+	return should_escape ? escape(value, true) : value;
 }
 
 export function escape_object(obj) {
@@ -192,7 +194,7 @@ export function create_ssr_component(fn) {
 
 export function add_attribute(name, value, boolean) {
 	if (value == null || (boolean && !value)) return '';
-	const assignment = (boolean && value === true) ? '' : `="${escape_attribute_value(value.toString())}"`;
+	const assignment = (boolean && value === true) ? '' : `="${escape(value, true)}"`;
 	return ` ${name}${assignment}`;
 }
 
diff --git a/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
index b3970f88ba..5db9a90fff 100644
--- a/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
+++ b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
@@ -2,4 +2,10 @@
 	bar="'></div><script>alert(42)</script>"
 	foo="&quot;></div><script>alert(42)</script>"
 	qux="&amp;&amp;&amp;"
-></div>
\ No newline at end of file
+	quux="&quot;><script>alert(42)</script>"
+></div>
+
+<div
+	foo="foo"
+	unsafe="&quot;><script>alert(42)</script>"
+></div>
diff --git a/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
index 66047eb09a..9d721cd88f 100644
--- a/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
+++ b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
@@ -1,10 +1,15 @@
 <script>
+	const safe = { foo: 'foo' };
+	const unsafe = { toString: () => '"><script>alert(42)<\/script>' };
+
 	export let props = {
 		foo: '"></div><script>alert(42)</' + 'script>',
 		bar: "'></div><script>alert(42)</" + 'script>',
 		['"></div><script>alert(42)</' + 'script>']: 'baz',
 		qux: '&&&',
+		quux: unsafe
 	};
 </script>
 
-<div {...props}></div>
\ No newline at end of file
+<div {...props}></div>
+<div {...safe} {unsafe}></div>

From ecb29aa8cff53b33a4c8b5a49d774bfd7ef04f08 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 20 Jun 2022 13:03:47 +0200
Subject: [PATCH 08/89] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9dca374b76..2ca35627cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Faster SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701))
 * Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571))
+* Harden attribute escaping during ssr ([#7530](https://github.com/sveltejs/svelte/pull/7530))
 
 ## 3.48.0
 

From d7557e11a265a71a26d78295774f131af366ddce Mon Sep 17 00:00:00 2001
From: hmt <hmt@users.noreply.github.com>
Date: Sat, 25 Jun 2022 19:56:06 +0200
Subject: [PATCH 09/89] [docs] remove v2 -> v3 converter mention (#7597)

Was never finished
---
 site/content/faq/1000-how-can-i-update-my-v2-components.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 site/content/faq/1000-how-can-i-update-my-v2-components.md

diff --git a/site/content/faq/1000-how-can-i-update-my-v2-components.md b/site/content/faq/1000-how-can-i-update-my-v2-components.md
deleted file mode 100644
index 0800dff89b..0000000000
--- a/site/content/faq/1000-how-can-i-update-my-v2-components.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-question: How can I update my components written in Svelte v2?
----
-
-svelte-upgrade isn't fully working for v2->v3 yet, [but it's close](https://github.com/sveltejs/svelte-upgrade/pull/12).
\ No newline at end of file

From 2f562d9e2817d911d0eec437d2b0e45074ec8291 Mon Sep 17 00:00:00 2001
From: Heechul Ryu <ryuhcii@gmail.com>
Date: Wed, 29 Jun 2022 17:07:16 -0700
Subject: [PATCH 10/89] [docs] use npm create instead of npm init (#7641)

---
 site/content/tutorial/01-introduction/07-making-an-app/text.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md
index b65d084f13..68b54e33f5 100644
--- a/site/content/tutorial/01-introduction/07-making-an-app/text.md
+++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md
@@ -7,7 +7,7 @@ This tutorial is designed to get you familiar with the process of writing compon
 First, you'll need to integrate Svelte with a build tool. We recommend using [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/)...
 
 ```bash
-npm init vite my-app -- --template svelte
+npm create vite my-app -- --template svelte
 ```
 
 ...or one of the [community-maintained integrations](https://sveltesociety.dev/tools).

From 6f575715073f4a1eb1abdd7a2d22a75ae6017cf7 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:48:10 +0200
Subject: [PATCH 11/89] [feat] add convenience types ComponentType and
 ComponentProps (#6770)

ComponentType eases typing "this is a variable that expects a Svelte component constructor (of a certain shape)". Removes the need for SvelteComponentTyped to be an extra type so it can be deprecated in v4 and removed in v5, and SvelteComponent(Dev) can receive the same generic typings as SvelteComponetTyped in v4.

ComponentProps eases typing "give me the props this component expects". Closes #7584


Co-authored-by: Simon Holthausen <simon.holthausen@accso.de>
Co-authored-by: Hofer Ivan <ivan.hofer@outlook.com>
Co-authored-by: Ignatius Bagus <ignatius.mbs@gmail.com>
---
 CHANGELOG.md                 |  1 +
 generate-type-definitions.js | 13 ++++++++++
 package-lock.json            | 12 +++++-----
 package.json                 |  2 +-
 src/runtime/index.ts         |  1 +
 src/runtime/internal/dev.ts  | 46 +++++++++++++++++++++++++++++++++---
 6 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 generate-type-definitions.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ca35627cf..b5bc4858d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Faster SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701))
 * Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571))
 * Harden attribute escaping during ssr ([#7530](https://github.com/sveltejs/svelte/pull/7530))
+* Add `ComponentType` and `ComponentProps` convenience types ([#6770](https://github.com/sveltejs/svelte/pull/6770))
 
 ## 3.48.0
 
diff --git a/generate-type-definitions.js b/generate-type-definitions.js
new file mode 100644
index 0000000000..6cad31807f
--- /dev/null
+++ b/generate-type-definitions.js
@@ -0,0 +1,13 @@
+// This script generates the TypeScript definitions
+
+const { execSync } = require('child_process');
+const { readFileSync, writeFileSync } = require('fs');
+
+execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly');
+
+// We need to add these types to the index.d.ts here because if we add them before building, the build will fail,
+// because the TS->JS transformation doesn't know these exports are types and produces code that fails at runtime.
+// We can't use `export type` syntax either because the TS version we're on doesn't have this feature yet.
+const path = 'types/runtime/index.d.ts';
+const content = readFileSync(path, 'utf8');
+writeFileSync(path, content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps'));
diff --git a/package-lock.json b/package-lock.json
index 3e84c9b8c6..83d963b827 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4402,9 +4402,9 @@
       "dev": true
     },
     "node_modules/typescript": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
-      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -8096,9 +8096,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
-      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
       "dev": true
     },
     "unbox-primitive": {
diff --git a/package.json b/package.json
index b3c9c65f98..a1c9ae9a5d 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "pretest": "npm run build",
     "posttest": "agadoo internal/index.mjs",
     "prepublishOnly": "node check_publish_env.js && npm run lint && npm test",
-    "tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly",
+    "tsd": "node ./generate-type-definitions.js",
     "lint": "eslint \"{src,test}/**/*.{ts,js}\""
   },
   "repository": {
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
index 8e12f9f0ee..08b25ba2ca 100644
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -13,4 +13,5 @@ export {
 	createEventDispatcher,
 	SvelteComponentDev as SvelteComponent,
 	SvelteComponentTyped
+	// additional exports added through post-typegen.js
 } from 'svelte/internal';
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index 3144911672..5b00e7dc5b 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -128,7 +128,7 @@ export interface SvelteComponentDev {
 	$destroy(): void;
 	[accessor: string]: any;
 }
-interface IComponentOptions<Props extends Record<string, any> = Record<string, any>> {
+export interface ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>> {
 	target: Element | ShadowRoot;
 	anchor?: Element;
 	props?: Props;
@@ -164,7 +164,7 @@ export class SvelteComponentDev extends SvelteComponent {
 	 */
 	$$slot_def: any;
 
-	constructor(options: IComponentOptions) {
+	constructor(options: ComponentConstructorOptions) {
 		if (!options || (!options.target && !options.$$inline)) {
 			throw new Error("'target' is a required option");
 		}
@@ -256,11 +256,51 @@ export class SvelteComponentTyped<
 	 */
 	$$slot_def: Slots;
 
-	constructor(options: IComponentOptions<Props>) {
+	constructor(options: ComponentConstructorOptions<Props>) {
 		super(options);
 	}
 }
 
+/**
+ * Convenience type to get the type of a Svelte component. Useful for example in combination with
+ * dynamic components using `<svelte:component>`.
+ * 
+ * Example:
+ * ```html
+ * <script lang="ts">
+ * 	import type { ComponentType, SvelteComponentTyped } from 'svelte';
+ * 	import Component1 from './Component1.svelte';
+ * 	import Component2 from './Component2.svelte';
+ * 
+ * 	const component: ComponentType = someLogic() ? Component1 : Component2;
+ * 	const componentOfCertainSubType: ComponentType<SvelteComponentTyped<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
+ * </script>
+ * 
+ * <svelte:component this={component} />
+ * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
+ * ```
+ */
+export type ComponentType<Component extends SvelteComponentTyped = SvelteComponentTyped> = new (
+	options: ComponentConstructorOptions<
+		Component extends SvelteComponentTyped<infer Props> ? Props : Record<string, any>
+	>
+) => Component;
+
+/**
+ * Convenience type to get the props the given component expects. Example:
+ * ```html
+ * <script lang="ts">
+ * 	import type { ComponentProps } from 'svelte';
+ * 	import Component from './Component.svelte';
+ * 
+ * 	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
+ * </script>
+ * ```
+ */
+export type ComponentProps<Component extends SvelteComponent> = Component extends SvelteComponentTyped<infer Props>
+	? Props
+	: never;
+
 export function loop_guard(timeout) {
 	const start = Date.now();
 	return () => {

From 31e5f8b5de24e2e058cb1a70467c0092e422ee5d Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <daniel@desandoval.net>
Date: Fri, 1 Jul 2022 09:17:52 -0600
Subject: [PATCH 12/89] [docs] "What's new in Svelte" July newsletter (#7637)

---
 ...022-07-01-whats-new-in-svelte-july-2022.md | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md

diff --git a/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md b/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md
new file mode 100644
index 0000000000..e8c76a0857
--- /dev/null
+++ b/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md
@@ -0,0 +1,98 @@
+---
+title: "What's new in Svelte: July 2022"
+description: "Faster SSR, language tools improvements and a new paid contributor!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+From faster SSR to support for Vitest and Storybook in SvelteKit, there's a lot to cover in this month's newsletter...
+
+So let's dive in!
+
+## OpenCollective funding drives Svelte forward
+
+Svelte supporters have donated approximately $80,000 to [the project on OpenCollective](https://opencollective.com/svelte). We're happy to share that the funds are being drawn on to move Svelte forward in a meaningful way. **[@gtm-nayan](https://github.com/gtm-nayan)** has begun triaging and fixing SvelteKit issues this past month as a paid contributor to the project to help us get SvelteKit to a 1.0 level of stability! @gtm-nayan has been an active member of the Svelte community for quite some time and is well known for writing the bot that helps keep our Discord server running. We're happy that this funding has allowed Svelte to get much more of his time.
+
+We will also be utilizing OpenCollective funds to allow Svelte core maintainers to attend [Svelte Summit](https://www.sveltesummit.com/) in person this fall. Thanks to everyone who has donated so far!
+
+## What's new in Svelte & Language Tools
+- [learn.svelte.dev](https://learn.svelte.dev/) is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
+- Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! ([PR](https://github.com/sveltejs/svelte/pull/5701))
+- "Find File References" ([0.14.28](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.28)) and "Find Component References" ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29)) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used ([Demo](https://twitter.com/dummdidumm_/status/1532459709604716544/photo/1))
+- The Svelte extension now supports CSS path completion ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29))
+
+
+## What's new in SvelteKit
+- Introduced `@sveltejs/kit/experimental/vite` which allows SvelteKit to interoperate with other tools in the Vite ecosystem like Vitest and Storybook ([#5094](https://github.com/sveltejs/kit/pull/5094)). Please [leave feedback](https://github.com/sveltejs/kit/issues/5184) as to whether the feature works and is helpful as we consider taking it out of experimental and making `vite.config.js` required for all users
+- Streaming in endpoints is now supported ([#3419](https://github.com/sveltejs/kit/issues/3419)). This was enabled by switching to the Undici `fetch` implementation ([#5117](https://github.com/sveltejs/kit/pull/5117))
+- Static assets can now be symlinked in development environments ([#5089](https://github.com/sveltejs/kit/pull/5089))
+- `server` and `prod` environment variables are now available as a correlary to `browser` and `dev` ([#5251](https://github.com/sveltejs/kit/pull/5251))
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [Virtual Maker](https://www.virtualmaker.net/) lets you make interactive 3D and VR scenes in your browser
+- [Apple Beta Music](https://www.reddit.com/r/sveltejs/comments/v7ic2s/apple_beta_music_uses_svelte/) appears to have been written in some combination of Svelte and web components
+- [Itatiaia](https://www.itatiaia.com.br/), the largest radio station in the country of Brazil just relaunched its news portal in SvelteKit
+- [Pronauns](https://www.pronauns.com) helps you learn pronunciation online with IPA to speak better and sound more native
+- [Immich](https://www.immich.app/) is an open source, high performance self-hosted backup solution for videos and photos on your mobile phone
+- [Pendek](https://github.com/leovoon/link-shortener) is a link shortener built with SvelteKit, Prisma and PlanetScale
+- [Grunfy](https://grunfy.com/tools) is a set of guitar tools - recently migrated to SvelteKit
+- [Radiant: The Future of Radio](https://play.google.com/store/apps/details?id=co.broadcastapp.Radiant) is a personal radio station app built with Svelte and Capacitor
+- [Imperfect Reminders](https://imperfectreminders.mildlyupset.com/) is a todo list for things that are only sort of time sensitive
+- [Periodic Table](https://github.com/janosh/periodic-table) is a dynamic Periodic Table component written in Svelte
+- [Svelvet](https://github.com/open-source-labs/Svelvet) is a lightweight Svelte component library for building interactive node-based diagrams
+- [publint](https://github.com/bluwy/publint) lints for packaging errors to ensure compatibility across environments
+- [Playlistr](https://github.com/alextana/spotify-playlist-creator) helps manage and create Spotify playlists
+- [Geoff Rich's page transitions demo](https://twitter.com/geoffrich_/status/1534980702785003520) shows how SvelteKit's `beforeNavigate`/`afterNavigate` hooks can make smooth document transitions in the latest Chrome Canary
+- [Menger Sponge](https://twitter.com/a_warnes/status/1536215896078811137) is a fractal built with Threlte
+
+Want to contribute to a site using the latest SvelteKit features? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
+
+
+**Learning Resources**
+
+_Starring the Svelte team_
+- [Svelte Origins: A JavaScript Documentary](https://www.youtube.com/watch?v=kMlkCYL9qo0) by OfferZen Origins
+- [Full Stack Documentation (announcing learn.svelte.dev)](https://portal.gitnation.org/contents/full-stack-documentation) by Rich Harris @ JSNation 2022
+- [All About the Sirens](https://www.svelteradio.com/episodes/all-about-the-sirens) by Svelte Radio
+
+_To Watch_
+- [SvelteKit Page Endpoints](https://www.youtube.com/watch?v=yQRf2wmTu5w), [Named Layouts](https://www.youtube.com/watch?v=UHX9TJ0BxZY) and [Passing data from page component to layout component with $page.stuff](https://www.youtube.com/watch?v=CXaCstU5pcw) by lihautan
+- [🍞 & 🧈: Magically load data with SvelteKit Endpoints](https://www.youtube.com/watch?v=f6prqYlbTE4) by Johnny Magrippis
+- [Svelte for React developers](https://www.youtube.com/watch?v=7tsrwrx5HtQ) by frontendtier
+- [Learn Svelte JS || Javascript Compiler for Building Front end Applications](https://www.youtube.com/watch?v=1rKRarJJFrY&list=PLIGDNOJWiL1-7zCgdR7MKuho-tPC6Ra6C&index=1) by Code with tsksharma
+- [SvelteKit Authentication](https://www.youtube.com/watch?v=T935Ya4W5X0&list=PLA9WiRZ-IS_zKrDzhOhV5RGKKTHNIyTDO&index=1) by Joy of Code
+- [Svelte + websockets: Build a real-time Auction app](https://www.youtube.com/watch?v=CqgsWFrwQIU) by Evgeny Maksimov
+
+_To Read_
+- [Up-To-Date Analytics on a Static Website](https://paullj.github.io/posts/up-to-date-analytics-on-a-static-website) and [Fast, Lightweight Fuzzy Search using Fuse.js](https://paullj.github.io/posts/fast-lightweight-fuzzy-search-using-fuse.js) by paullj
+- [Use SvelteKit as a handler in the ExpressJs project](https://chientrm.medium.com/use-sveltekit-as-a-handler-in-the-expressjs-project-15524b01128f) by Tran Chien
+- [Creating a desktop application with Tauri and SvelteKit](https://github.com/Stijn-B/tauri-sveltekit-example) by Stijn-B
+- [List of awesome Svelte stores](https://github.com/samuba/awesome-svelte-stores) by samuba
+- [SvelteKit Content Security Policy: CSP for XSS Protection](https://rodneylab.com/sveltekit-content-security-policy/) by Rodney Lab
+- [SvelteKit Hooks. Everything You Need To Know](https://kudadam.com/blog/understanding-sveltekit-hooks) by Lucretius K. Biah
+- [3 tips for upgrading the performance of your Svelte stores](https://www.mathiaspicker.com/posts/3-tips-for-upgrading-the-performance-of-your-svelte-stores) by Mathias Picker
+
+
+**Libraries, Tools & Components**
+- [Svend3r](https://github.com/oslabs-beta/svend3r) is a plug and play D3 charting library for Svelte
+- [Svelte Hover Draw SVG](https://github.com/davipon/svelte-hover-draw-svg) is a lightweight Svelte component to draw SVG on hover
+- [Svelte French Toast](https://svelte-french-toast.com/) provides buttery smooth toast notifications that are lightweight, customizable, and beautiful by default
+- [SVooltip](https://svooltip.vercel.app/) is a basic Svelte tooltip directive, powered by Floating UI
+- [Svelte Brick Gallery](https://github.com/anotherempty/svelte-brick-gallery) is a masonry-like image gallery component for Svelte
+- [use-vest](https://github.com/enyo/use-vest) is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary
+- [Svelidate](https://github.com/svelidate/svelidate) is a simple and lightweight form validation library for Svelte with no dependencies
+- [Svve11](https://github.com/oslabs-beta/Svve11) is an "accessbility-first" component library for Svelte
+- [Slidy](https://github.com/Valexr/Slidy) is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins
+- [Svelte Component Snippets](https://marketplace.visualstudio.com/items?itemName=brysonbw.svelte-component-snippets) is a VS Code extension with access to common Svelte snippets
+- [Svelte Confetti](https://github.com/Mitcheljager/svelte-confetti) adds a little bit of flair to your app with some confetti 🎊
+
+
+What did we miss? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to add your voice.
+
+Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! [Get your tickets now](https://www.sveltesummit.com/).
+
+See y'all next month!

From 02f60fbebf7cdb036472d1aec8dc9d9f8215cd7a Mon Sep 17 00:00:00 2001
From: qinmu <magenta2127@gmail.com>
Date: Mon, 4 Jul 2022 09:45:39 +0800
Subject: [PATCH 13/89] [fix]destroy empty component (#7492)

* fix: destroy non-fragment element such as empty components

* fix: fragment property of Empty Component is set as true in dev mode, inconsistent with production mode

* chore: revert 'removal' of component.compile_options.dev

* feat: add test for destroying empty component

* chore: update typechecking callback

* chore: revert fragment dev checks

* chore: remove unnecessary comment

* chore: update test for empty-component-destroy

* fix: revert back the patching of console.log

* use before_test and after_test

Co-authored-by: qinmu <magenta2127@mail.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/render_dom/index.ts      |  2 +-
 src/runtime/internal/transitions.ts           |  4 ++-
 .../empty-component-destroy/Empty.svelte      |  8 ++++++
 .../empty-component-destroy/_config.js        | 25 +++++++++++++++++++
 .../empty-component-destroy/main.svelte       |  8 ++++++
 5 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/empty-component-destroy/Empty.svelte
 create mode 100644 test/runtime/samples/empty-component-destroy/_config.js
 create mode 100644 test/runtime/samples/empty-component-destroy/main.svelte

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 9d9699bdbf..5fdac9bce4 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -333,7 +333,7 @@ export default function dom(
 		// $$props arg is still needed for unknown prop check
 		args.push(x`$$props`);
 	}
-
+	// has_create_fragment is intentionally to be true in dev mode.
 	const has_create_fragment = component.compile_options.dev || block.has_content();
 	if (has_create_fragment) {
 		body.push(b`
diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index a0134668ef..306a5e3793 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -79,6 +79,8 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca
 		});
 
 		block.o(local);
+	} else if (callback) {
+		callback();
 	}
 }
 
@@ -143,7 +145,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 	return {
 		start() {
 			if (started) return;
-			
+
 			started = true;
 			delete_rule(node);
 
diff --git a/test/runtime/samples/empty-component-destroy/Empty.svelte b/test/runtime/samples/empty-component-destroy/Empty.svelte
new file mode 100644
index 0000000000..14551c069a
--- /dev/null
+++ b/test/runtime/samples/empty-component-destroy/Empty.svelte
@@ -0,0 +1,8 @@
+
+<script>
+  import { onDestroy } from 'svelte';
+	
+	onDestroy(() => {
+		console.log('destroy');
+	});
+</script>
diff --git a/test/runtime/samples/empty-component-destroy/_config.js b/test/runtime/samples/empty-component-destroy/_config.js
new file mode 100644
index 0000000000..76b9ae4bb8
--- /dev/null
+++ b/test/runtime/samples/empty-component-destroy/_config.js
@@ -0,0 +1,25 @@
+let log;
+export default {
+	html: `
+	  <button>destroy component</button>
+	`,
+
+	before_test() {
+		log = console.log;
+	},
+	after_test() {
+		console.log = log;
+	},
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		const messages = [];
+		console.log = msg => messages.push(msg);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>destroy component</button>
+		`);
+		assert.deepEqual(messages, ['destroy']);
+	}
+};
diff --git a/test/runtime/samples/empty-component-destroy/main.svelte b/test/runtime/samples/empty-component-destroy/main.svelte
new file mode 100644
index 0000000000..0ee5ef4a04
--- /dev/null
+++ b/test/runtime/samples/empty-component-destroy/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Empty from './Empty.svelte';
+	let active = true;
+</script>
+
+<button on:click='{() => active = false }'>destroy component</button>
+
+<svelte:component this={active ? Empty : null} />

From 4583b170842208bcafcbb095221c8ac12689f739 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 4 Jul 2022 09:48:12 +0800
Subject: [PATCH 14/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5bc4858d8..4dbdb0bd5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571))
 * Harden attribute escaping during ssr ([#7530](https://github.com/sveltejs/svelte/pull/7530))
 * Add `ComponentType` and `ComponentProps` convenience types ([#6770](https://github.com/sveltejs/svelte/pull/6770))
+* Fix empty component not properly destroyed ([#7488](https://github.com/sveltejs/svelte/issues/7488))
 
 ## 3.48.0
 

From 7e1691cd62df0593882480d00eb7e9a7616bb029 Mon Sep 17 00:00:00 2001
From: kindoflew <lewis@ombulabs.com>
Date: Mon, 4 Jul 2022 10:55:34 -0400
Subject: [PATCH 15/89] [fix] support @layer (#7514)

* add test

* add layer to apply check
---
 src/compiler/compile/css/Stylesheet.ts |  2 +-
 test/css/samples/at-layer/expected.css |  1 +
 test/css/samples/at-layer/input.svelte | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 test/css/samples/at-layer/expected.css
 create mode 100644 test/css/samples/at-layer/input.svelte

diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
index 0a3098db6d..1a9ea7feeb 100644
--- a/src/compiler/compile/css/Stylesheet.ts
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -170,7 +170,7 @@ class Atrule {
 	}
 
 	apply(node: Element) {
-		if (this.node.name === 'media' || this.node.name === 'supports') {
+		if (this.node.name === 'media' || this.node.name === 'supports' || this.node.name === 'layer') {
 			this.children.forEach(child => {
 				child.apply(node);
 			});
diff --git a/test/css/samples/at-layer/expected.css b/test/css/samples/at-layer/expected.css
new file mode 100644
index 0000000000..e5f3de80c9
--- /dev/null
+++ b/test/css/samples/at-layer/expected.css
@@ -0,0 +1 @@
+@layer base, special;@layer special{div.svelte-xyz{color:rebeccapurple}}@layer base{div.svelte-xyz{color:green}}
\ No newline at end of file
diff --git a/test/css/samples/at-layer/input.svelte b/test/css/samples/at-layer/input.svelte
new file mode 100644
index 0000000000..60289e1e5f
--- /dev/null
+++ b/test/css/samples/at-layer/input.svelte
@@ -0,0 +1,17 @@
+<div>hello</div>
+
+<style>
+	@layer base, special;
+
+	@layer special {
+		div {
+			color: rebeccapurple;
+		}
+	}
+
+	@layer base {
+		div {
+			color: green;
+		}
+	}
+</style>

From a3ecb44b5346dbf116c5bec5dcf47cd7f459784d Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 4 Jul 2022 23:58:16 +0900
Subject: [PATCH 16/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dbdb0bd5e..5e48244f4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Harden attribute escaping during ssr ([#7530](https://github.com/sveltejs/svelte/pull/7530))
 * Add `ComponentType` and `ComponentProps` convenience types ([#6770](https://github.com/sveltejs/svelte/pull/6770))
 * Fix empty component not properly destroyed ([#7488](https://github.com/sveltejs/svelte/issues/7488))
+* Add CSS at-rule `@layer` support ([#7504](https://github.com/sveltejs/svelte/issues/7504))
 
 ## 3.48.0
 

From 0fa0a38d5168a1767843fdb0a43c00aa30b8670f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 6 Jul 2022 11:58:43 +0200
Subject: [PATCH 17/89] [fix] export CompileOptions (#7658)

It's used by SvelteKit and in order to properly use it under the new TS moduleResolution NodeNext it needs to be part of a file that is defined in the exports map
---
 generate-type-definitions.js | 19 +++++++++++++++----
 src/compiler/index.ts        |  1 +
 src/runtime/index.ts         |  2 +-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/generate-type-definitions.js b/generate-type-definitions.js
index 6cad31807f..00b079eb5d 100644
--- a/generate-type-definitions.js
+++ b/generate-type-definitions.js
@@ -5,9 +5,20 @@ const { readFileSync, writeFileSync } = require('fs');
 
 execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly');
 
-// We need to add these types to the index.d.ts here because if we add them before building, the build will fail,
+// We need to add these types to the .d.ts files here because if we add them before building, the build will fail,
 // because the TS->JS transformation doesn't know these exports are types and produces code that fails at runtime.
 // We can't use `export type` syntax either because the TS version we're on doesn't have this feature yet.
-const path = 'types/runtime/index.d.ts';
-const content = readFileSync(path, 'utf8');
-writeFileSync(path, content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps'));
+
+function modify(path, modifyFn) {
+    const content = readFileSync(path, 'utf8');
+    writeFileSync(path, modifyFn(content));
+}
+
+modify(
+    'types/runtime/index.d.ts',
+    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps')
+);
+modify(
+    'types/compiler/index.d.ts',
+    content => content + '\nexport { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from "./interfaces"'
+);
diff --git a/src/compiler/index.ts b/src/compiler/index.ts
index 14d55f5470..76eb45d37f 100644
--- a/src/compiler/index.ts
+++ b/src/compiler/index.ts
@@ -4,3 +4,4 @@ export { default as preprocess } from './preprocess/index';
 export { walk } from 'estree-walker';
 
 export const VERSION = '__VERSION__';
+// additional exports added through generate-type-definitions.js
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
index 08b25ba2ca..2029f67a04 100644
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -13,5 +13,5 @@ export {
 	createEventDispatcher,
 	SvelteComponentDev as SvelteComponent,
 	SvelteComponentTyped
-	// additional exports added through post-typegen.js
+	// additional exports added through generate-type-definitions.js
 } from 'svelte/internal';

From 3798808e7484b7eeee6acb2860c45bb2e59d84bd Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 6 Jul 2022 11:59:44 +0200
Subject: [PATCH 18/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e48244f4a..0beea49892 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * Add `ComponentType` and `ComponentProps` convenience types ([#6770](https://github.com/sveltejs/svelte/pull/6770))
 * Fix empty component not properly destroyed ([#7488](https://github.com/sveltejs/svelte/issues/7488))
 * Add CSS at-rule `@layer` support ([#7504](https://github.com/sveltejs/svelte/issues/7504))
+* Export `CompileOptions` from `svelte/compiler` ([#7658](https://github.com/sveltejs/svelte/pull/7658))
 
 ## 3.48.0
 

From 52153dbce0237f0c36e4ff36377398d7f95276ef Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 7 Jul 2022 12:43:08 -0400
Subject: [PATCH 19/89] -> v3.49.0

---
 CHANGELOG.md      | 12 ++++++------
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0beea49892..70c05b01e9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,14 +1,14 @@
 # Svelte changelog
 
-## Unreleased
+## 3.49.0
 
-* Faster SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701))
-* Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571))
-* Harden attribute escaping during ssr ([#7530](https://github.com/sveltejs/svelte/pull/7530))
+* Improve performance of string escaping during SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701))
 * Add `ComponentType` and `ComponentProps` convenience types ([#6770](https://github.com/sveltejs/svelte/pull/6770))
-* Fix empty component not properly destroyed ([#7488](https://github.com/sveltejs/svelte/issues/7488))
-* Add CSS at-rule `@layer` support ([#7504](https://github.com/sveltejs/svelte/issues/7504))
+* Add support for CSS `@layer` ([#7504](https://github.com/sveltejs/svelte/issues/7504))
 * Export `CompileOptions` from `svelte/compiler` ([#7658](https://github.com/sveltejs/svelte/pull/7658))
+* Fix DOM-less components not being properly destroyed ([#7488](https://github.com/sveltejs/svelte/issues/7488))
+* Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571))
+* Harden attribute escaping during SSR ([#7530](https://github.com/sveltejs/svelte/pull/7530))
 
 ## 3.48.0
 
diff --git a/package-lock.json b/package-lock.json
index 83d963b827..38abdfc330 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.48.0",
+  "version": "3.49.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.48.0",
+      "version": "3.49.0",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index a1c9ae9a5d..de712b9bab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.48.0",
+  "version": "3.49.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From c01dc62314ccdff556ddd0c948dad2cb9128101d Mon Sep 17 00:00:00 2001
From: Sepehr Safari <safari.sepehr@gmail.com>
Date: Sun, 10 Jul 2022 11:52:00 +0430
Subject: [PATCH 20/89] [docs] fix typo (#7672)

* [docs] fix typo

Fixed "quckly" to "quickly"

* [docs] fix typo

Fixed "beend" to "been".

* [docs] fix typo

Fixed "propsoal" to "proposal".
---
 .../blog/2021-08-01-whats-new-in-svelte-august-2021.md        | 2 +-
 .../blog/2021-10-01-whats-new-in-svelte-october-2021.md       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
index 0dd54ca22f..145d3aa784 100644
--- a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
+++ b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
@@ -59,7 +59,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 - [Svelte-Capacitor](https://github.com/drannex42/svelte-capacitor/) just released v2.0.0 - making it even easier to build hybrid mobile apps for iOS and Android using Svelte and Capacitor with near native performance.
 - [svelte-remixicon](https://github.com/ABarnob/svelte-remixicon) is an icon library for Svelte based on Remix Icon, consisting of more than 2000 icons.
 - [SveltePress](https://github.com/GeopJr/SveltePress) is a documentation tool built on top of SvelteKit.
-- [Svelte Starter Kit](https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase) is a boilerplate to quckly get up and running with Svelte, with Auth and User Profiles powered by Supabase.
+- [Svelte Starter Kit](https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase) is a boilerplate to quickly get up and running with Svelte, with Auth and User Profiles powered by Supabase.
 - [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in.
 - [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
 
diff --git a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
index 5ffd65bb0a..4b5b65d6f0 100644
--- a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
+++ b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
@@ -33,7 +33,7 @@ Notable SvelteKit improvements this month include...
 - Svelte libraries should now work out-of-the-box without any Vite configuration ([#2343](https://github.com/sveltejs/kit/pull/2343))
 - Improvements to package exports field ([#2345](https://github.com/sveltejs/kit/pull/2345) and [#2327](https://github.com/sveltejs/kit/pull/2327))
 - [breaking] The `prerender.pages` config option has been renamed to `prerender.entries` ([#2380](https://github.com/sveltejs/kit/pull/2380))
-- A new generic argument has beend added to allow typing Body from hooks ([#2413](https://github.com/sveltejs/kit/pull/2413))
+- A new generic argument has been added to allow typing Body from hooks ([#2413](https://github.com/sveltejs/kit/pull/2413))
 - The `svelte` field will be added to package.json when running the package command ([#2431](https://github.com/sveltejs/kit/pull/2431))
 - [breaking] The `context` parameter of the load function was renamed to `stuff` ([#2439](https://github.com/sveltejs/kit/pull/2439))
 - Added an `entryPoint` option for building a custom server with `adapter-node` ([#2414](https://github.com/sveltejs/kit/pull/2414))
@@ -92,7 +92,7 @@ Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templ
 
 ## Before you go, answer the call for speakers!
 
-Svelte Summit Fall 2021 (happening 20 November 2021) is looking for speakers. Submit your talk propsoal before 30 October... all are welcome to present and attend.
+Svelte Summit Fall 2021 (happening 20 November 2021) is looking for speakers. Submit your talk proposal before 30 October... all are welcome to present and attend.
 
 ### More info on the [sessionize site](https://sessionize.com/svelte-summit-fall-2021/)
 

From 1d19aebe38bed7bbaafdc304eb055f5bf455fb36 Mon Sep 17 00:00:00 2001
From: Mel <einebeere@gmail.com>
Date: Sun, 10 Jul 2022 20:23:41 +0200
Subject: [PATCH 21/89] a11y: Add role-has-required-aria-props rule (#5852)

* Check required props for ARIA roles

* Test required ARIA props check

* Properly indent with tabs in test

* swtich to use aria-query

* fix validation test

* update docs

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 package-lock.json                             |   29 +
 package.json                                  |    2 +
 .../content/docs/05-accessibility-warnings.md |   11 +
 src/compiler/compile/compiler_warnings.ts     |    4 +
 src/compiler/compile/nodes/Element.ts         |   16 +-
 .../a11y-no-redundant-roles/warnings.json     | 1367 +++++++++--------
 .../input.svelte                              |    9 +
 .../warnings.json                             |   62 +
 8 files changed, 867 insertions(+), 633 deletions(-)
 create mode 100644 test/validator/samples/a11y-role-has-required-aria-props/input.svelte
 create mode 100644 test/validator/samples/a11y-role-has-required-aria-props/warnings.json

diff --git a/package-lock.json b/package-lock.json
index 38abdfc330..ab4b20ed59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,12 +18,14 @@
         "@rollup/plugin-typescript": "^2.0.1",
         "@rollup/plugin-virtual": "^2.0.0",
         "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
+        "@types/aria-query": "^5.0.0",
         "@types/mocha": "^7.0.0",
         "@types/node": "^8.10.53",
         "@typescript-eslint/eslint-plugin": "^5.22.0",
         "@typescript-eslint/parser": "^5.22.0",
         "acorn": "^8.4.1",
         "agadoo": "^1.1.0",
+        "aria-query": "^5.0.0",
         "code-red": "^0.2.5",
         "css-tree": "^1.1.2",
         "eslint": "^8.0.0",
@@ -285,6 +287,12 @@
       "resolved": "git+ssh://git@github.com/sveltejs/eslint-config.git#31fd4faeea88990069502460b023698b1c9c2d13",
       "dev": true
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.0.tgz",
+      "integrity": "sha512-P+dkdFu0n08PDIvw+9nT9ByQnd+Udc8DaWPb9HKfaPwCvWvQpC5XaMRx2xLWECm9x1VKNps6vEAlirjA6+uNrQ==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
@@ -698,6 +706,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+      "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/array-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
@@ -4927,6 +4944,12 @@
       "dev": true,
       "from": "@sveltejs/eslint-config@github:sveltejs/eslint-config#v5.8.0"
     },
+    "@types/aria-query": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.0.tgz",
+      "integrity": "sha512-P+dkdFu0n08PDIvw+9nT9ByQnd+Udc8DaWPb9HKfaPwCvWvQpC5XaMRx2xLWECm9x1VKNps6vEAlirjA6+uNrQ==",
+      "dev": true
+    },
     "@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
@@ -5208,6 +5231,12 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-query": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+      "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+      "dev": true
+    },
     "array-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
diff --git a/package.json b/package.json
index de712b9bab..ade713f4e3 100644
--- a/package.json
+++ b/package.json
@@ -124,12 +124,14 @@
     "@rollup/plugin-typescript": "^2.0.1",
     "@rollup/plugin-virtual": "^2.0.0",
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
+    "@types/aria-query": "^5.0.0",
     "@types/mocha": "^7.0.0",
     "@types/node": "^8.10.53",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "acorn": "^8.4.1",
     "agadoo": "^1.1.0",
+    "aria-query": "^5.0.0",
     "code-red": "^0.2.5",
     "css-tree": "^1.1.2",
     "eslint": "^8.0.0",
diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index b39b06f9ff..9d0835b443 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -54,6 +54,17 @@ The following elements are visually distracting: `<marquee>` and `<blink>`.
 
 ---
 
+### `role-has-required-aria-props`
+
+Elements with ARIA roles must have all required attributes for that role.
+
+```sv
+<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
+<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
+```
+
+---
+
 ### `a11y-hidden`
 
 Certain DOM elements are useful for screen reader navigation and should not be hidden.
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 86ec98cb8b..833722c3b9 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -80,6 +80,10 @@ export default {
 		code: 'a11y-no-redundant-roles',
 		message: `A11y: Redundant role '${role}'`
 	}),
+	a11y_role_has_required_aria_props: (role: string, props: string[]) => ({
+		code: 'a11y-role-has-required-aria-props',
+		message: `A11y: Elements with the ARIA role "${role}" must have the following attributes defined: ${props.map(name => `"${name}"`).join(', ')}`
+	}),
 	a11y_accesskey: {
 		code: 'a11y-accesskey',
 		message: 'A11y: Avoid using accesskey'
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 735562d627..35131cefcf 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -23,6 +23,7 @@ import { string_literal } from '../utils/stringify';
 import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
+import { ARIARoleDefintionKey, roles } from 'aria-query';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -407,9 +408,9 @@ export default class Element extends Node {
 	}
 
 	validate_attributes_a11y() {
-		const { component } = this;
+		const { component, attributes } = this;
 
-		this.attributes.forEach(attribute => {
+		attributes.forEach(attribute => {
 			if (attribute.is_spread) return;
 
 			const name = attribute.name.toLowerCase();
@@ -462,6 +463,17 @@ export default class Element extends Node {
 						component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value));
 					}
 				}
+
+				// role-has-required-aria-props
+				const role = roles.get(value as ARIARoleDefintionKey);
+				if (role) {
+					const required_role_props = Object.keys(role.requiredProps);
+					const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop));
+
+					if (has_missing_props) {
+						component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(value as string, required_role_props));
+					}
+				}
 			}
 
 			// no-access-key
diff --git a/test/validator/samples/a11y-no-redundant-roles/warnings.json b/test/validator/samples/a11y-no-redundant-roles/warnings.json
index 8aa3520b32..0947a467af 100644
--- a/test/validator/samples/a11y-no-redundant-roles/warnings.json
+++ b/test/validator/samples/a11y-no-redundant-roles/warnings.json
@@ -1,632 +1,737 @@
 [
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 23,
-            "column": 23,
-            "line": 1
-        },
-        "message": "A11y: Redundant role 'link'",
-        "pos": 12,
-        "start": {
-            "character": 12,
-            "column": 12,
-            "line": 1
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 58,
-            "column": 23,
-            "line": 2
-        },
-        "message": "A11y: Redundant role 'article'",
-        "pos": 44,
-        "start": {
-            "character": 44,
-            "column": 9,
-            "line": 2
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 89,
-            "column": 27,
-            "line": 3
-        },
-        "message": "A11y: Redundant role 'complementary'",
-        "pos": 69,
-        "start": {
-            "character": 69,
-            "column": 7,
-            "line": 3
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 114,
-            "column": 21,
-            "line": 4
-        },
-        "message": "A11y: Redundant role 'document'",
-        "pos": 99,
-        "start": {
-            "character": 99,
-            "column": 6,
-            "line": 4
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 139,
-            "column": 21,
-            "line": 5
-        },
-        "message": "A11y: Redundant role 'button'",
-        "pos": 126,
-        "start": {
-            "character": 126,
-            "column": 8,
-            "line": 5
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 167,
-            "column": 24,
-            "line": 6
-        },
-        "message": "A11y: Redundant role 'listbox'",
-        "pos": 153,
-        "start": {
-            "character": 153,
-            "column": 10,
-            "line": 6
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 192,
-            "column": 21,
-            "line": 7
-        },
-        "message": "A11y: Redundant role 'definition'",
-        "pos": 175,
-        "start": {
-            "character": 175,
-            "column": 4,
-            "line": 7
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 212,
-            "column": 16,
-            "line": 8
-        },
-        "message": "A11y: Redundant role 'term'",
-        "pos": 201,
-        "start": {
-            "character": 201,
-            "column": 5,
-            "line": 8
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 237,
-            "column": 21,
-            "line": 9
-        },
-        "message": "A11y: Redundant role 'group'",
-        "pos": 225,
-        "start": {
-            "character": 225,
-            "column": 9,
-            "line": 9
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 262,
-            "column": 21,
-            "line": 10
-        },
-        "message": "A11y: Redundant role 'dialog'",
-        "pos": 249,
-        "start": {
-            "character": 249,
-            "column": 8,
-            "line": 10
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 281,
-            "column": 15,
-            "line": 11
-        },
-        "message": "A11y: Redundant role 'term'",
-        "pos": 270,
-        "start": {
-            "character": 270,
-            "column": 4,
-            "line": 11
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 307,
-            "column": 22,
-            "line": 12
-        },
-        "message": "A11y: Redundant role 'group'",
-        "pos": 295,
-        "start": {
-            "character": 295,
-            "column": 10,
-            "line": 12
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 332,
-            "column": 21,
-            "line": 13
-        },
-        "message": "A11y: Redundant role 'figure'",
-        "pos": 319,
-        "start": {
-            "character": 319,
-            "column": 8,
-            "line": 13
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 353,
-            "column": 17,
-            "line": 14
-        },
-        "message": "A11y: Redundant role 'form'",
-        "pos": 342,
-        "start": {
-            "character": 342,
-            "column": 6,
-            "line": 14
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 383,
-            "column": 18,
-            "line": 15
-        },
-        "message": "A11y: Redundant role 'heading'",
-        "pos": 369,
-        "start": {
-            "character": 369,
-            "column": 4,
-            "line": 15
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 415,
-            "column": 18,
-            "line": 16
-        },
-        "message": "A11y: Redundant role 'heading'",
-        "pos": 401,
-        "start": {
-            "character": 401,
-            "column": 4,
-            "line": 16
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 447,
-            "column": 18,
-            "line": 17
-        },
-        "message": "A11y: Redundant role 'heading'",
-        "pos": 433,
-        "start": {
-            "character": 433,
-            "column": 4,
-            "line": 17
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 479,
-            "column": 18,
-            "line": 18
-        },
-        "message": "A11y: Redundant role 'heading'",
-        "pos": 465,
-        "start": {
-            "character": 465,
-            "column": 4,
-            "line": 18
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 511,
-            "column": 18,
-            "line": 19
-        },
-        "message": "A11y: Redundant role 'heading'",
-        "pos": 497,
-        "start": {
-            "character": 497,
-            "column": 4,
-            "line": 19
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 543,
-            "column": 18,
-            "line": 20
-        },
-        "message": "A11y: Redundant role 'heading'",
-        "pos": 529,
-        "start": {
-            "character": 529,
-            "column": 4,
-            "line": 20
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 577,
-            "column": 20,
-            "line": 21
-        },
-        "message": "A11y: Redundant role 'separator'",
-        "pos": 561,
-        "start": {
-            "character": 561,
-            "column": 4,
-            "line": 21
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 600,
-            "column": 19,
-            "line": 22
-        },
-        "message": "A11y: Redundant role 'listitem'",
-        "pos": 585,
-        "start": {
-            "character": 585,
-            "column": 4,
-            "line": 22
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 621,
-            "column": 17,
-            "line": 23
-        },
-        "message": "A11y: Redundant role 'link'",
-        "pos": 610,
-        "start": {
-            "character": 610,
-            "column": 6,
-            "line": 23
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 642,
-            "column": 17,
-            "line": 24
-        },
-        "message": "A11y: Redundant role 'main'",
-        "pos": 631,
-        "start": {
-            "character": 631,
-            "column": 6,
-            "line": 24
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 668,
-            "column": 17,
-            "line": 25
-        },
-        "message": "A11y: Redundant role 'list'",
-        "pos": 657,
-        "start": {
-            "character": 657,
-            "column": 6,
-            "line": 25
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 694,
-            "column": 22,
-            "line": 26
-        },
-        "message": "A11y: Redundant role 'navigation'",
-        "pos": 677,
-        "start": {
-            "character": 677,
-            "column": 5,
-            "line": 26
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 713,
-            "column": 15,
-            "line": 27
-        },
-        "message": "A11y: Redundant role 'list'",
-        "pos": 702,
-        "start": {
-            "character": 702,
-            "column": 4,
-            "line": 27
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 739,
-            "column": 22,
-            "line": 28
-        },
-        "message": "A11y: Redundant role 'group'",
-        "pos": 727,
-        "start": {
-            "character": 727,
-            "column": 10,
-            "line": 28
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 764,
-            "column": 21,
-            "line": 29
-        },
-        "message": "A11y: Redundant role 'option'",
-        "pos": 751,
-        "start": {
-            "character": 751,
-            "column": 8,
-            "line": 29
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 789,
-            "column": 21,
-            "line": 30
-        },
-        "message": "A11y: Redundant role 'status'",
-        "pos": 776,
-        "start": {
-            "character": 776,
-            "column": 8,
-            "line": 30
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 821,
-            "column": 28,
-            "line": 31
-        },
-        "message": "A11y: Redundant role 'progressbar'",
-        "pos": 803,
-        "start": {
-            "character": 803,
-            "column": 10,
-            "line": 31
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 847,
-            "column": 22,
-            "line": 32
-        },
-        "message": "A11y: Redundant role 'region'",
-        "pos": 834,
-        "start": {
-            "character": 834,
-            "column": 9,
-            "line": 32
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 873,
-            "column": 22,
-            "line": 33
-        },
-        "message": "A11y: Redundant role 'button'",
-        "pos": 860,
-        "start": {
-            "character": 860,
-            "column": 9,
-            "line": 33
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 896,
-            "column": 19,
-            "line": 34
-        },
-        "message": "A11y: Redundant role 'table'",
-        "pos": 884,
-        "start": {
-            "character": 884,
-            "column": 7,
-            "line": 34
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 922,
-            "column": 22,
-            "line": 35
-        },
-        "message": "A11y: Redundant role 'rowgroup'",
-        "pos": 907,
-        "start": {
-            "character": 907,
-            "column": 7,
-            "line": 35
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 950,
-            "column": 24,
-            "line": 36
-        },
-        "message": "A11y: Redundant role 'textbox'",
-        "pos": 936,
-        "start": {
-            "character": 936,
-            "column": 10,
-            "line": 36
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 976,
-            "column": 22,
-            "line": 37
-        },
-        "message": "A11y: Redundant role 'rowgroup'",
-        "pos": 961,
-        "start": {
-            "character": 961,
-            "column": 7,
-            "line": 37
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 1002,
-            "column": 22,
-            "line": 38
-        },
-        "message": "A11y: Redundant role 'rowgroup'",
-        "pos": 987,
-        "start": {
-            "character": 987,
-            "column": 7,
-            "line": 38
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 1020,
-            "column": 14,
-            "line": 39
-        },
-        "message": "A11y: Redundant role 'row'",
-        "pos": 1010,
-        "start": {
-            "character": 1010,
-            "column": 4,
-            "line": 39
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 1039,
-            "column": 15,
-            "line": 40
-        },
-        "message": "A11y: Redundant role 'list'",
-        "pos": 1028,
-        "start": {
-            "character": 1028,
-            "column": 4,
-            "line": 40
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 1125,
-            "column": 21,
-            "line": 43
-        },
-        "message": "A11y: Redundant role 'banner'",
-        "pos": 1112,
-        "start": {
-            "character": 1112,
-            "column": 8,
-            "line": 43
-        }
-    },
-    {
-        "code": "a11y-no-redundant-roles",
-        "end": {
-            "character": 1162,
-            "column": 26,
-            "line": 44
-        },
-        "message": "A11y: Redundant role 'contentinfo'",
-        "pos": 1144,
-        "start": {
-            "character": 1144,
-            "column": 8,
-            "line": 44
-        }
-    }
-]
\ No newline at end of file
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 23,
+			"column": 23,
+			"line": 1
+		},
+		"message": "A11y: Redundant role 'link'",
+		"pos": 12,
+		"start": {
+			"character": 12,
+			"column": 12,
+			"line": 1
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 58,
+			"column": 23,
+			"line": 2
+		},
+		"message": "A11y: Redundant role 'article'",
+		"pos": 44,
+		"start": {
+			"character": 44,
+			"column": 9,
+			"line": 2
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 89,
+			"column": 27,
+			"line": 3
+		},
+		"message": "A11y: Redundant role 'complementary'",
+		"pos": 69,
+		"start": {
+			"character": 69,
+			"column": 7,
+			"line": 3
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 114,
+			"column": 21,
+			"line": 4
+		},
+		"message": "A11y: Redundant role 'document'",
+		"pos": 99,
+		"start": {
+			"character": 99,
+			"column": 6,
+			"line": 4
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 139,
+			"column": 21,
+			"line": 5
+		},
+		"message": "A11y: Redundant role 'button'",
+		"pos": 126,
+		"start": {
+			"character": 126,
+			"column": 8,
+			"line": 5
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 167,
+			"column": 24,
+			"line": 6
+		},
+		"message": "A11y: Redundant role 'listbox'",
+		"pos": 153,
+		"start": {
+			"character": 153,
+			"column": 10,
+			"line": 6
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 192,
+			"column": 21,
+			"line": 7
+		},
+		"message": "A11y: Redundant role 'definition'",
+		"pos": 175,
+		"start": {
+			"character": 175,
+			"column": 4,
+			"line": 7
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 212,
+			"column": 16,
+			"line": 8
+		},
+		"message": "A11y: Redundant role 'term'",
+		"pos": 201,
+		"start": {
+			"character": 201,
+			"column": 5,
+			"line": 8
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 237,
+			"column": 21,
+			"line": 9
+		},
+		"message": "A11y: Redundant role 'group'",
+		"pos": 225,
+		"start": {
+			"character": 225,
+			"column": 9,
+			"line": 9
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 262,
+			"column": 21,
+			"line": 10
+		},
+		"message": "A11y: Redundant role 'dialog'",
+		"pos": 249,
+		"start": {
+			"character": 249,
+			"column": 8,
+			"line": 10
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 281,
+			"column": 15,
+			"line": 11
+		},
+		"message": "A11y: Redundant role 'term'",
+		"pos": 270,
+		"start": {
+			"character": 270,
+			"column": 4,
+			"line": 11
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 307,
+			"column": 22,
+			"line": 12
+		},
+		"message": "A11y: Redundant role 'group'",
+		"pos": 295,
+		"start": {
+			"character": 295,
+			"column": 10,
+			"line": 12
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 332,
+			"column": 21,
+			"line": 13
+		},
+		"message": "A11y: Redundant role 'figure'",
+		"pos": 319,
+		"start": {
+			"character": 319,
+			"column": 8,
+			"line": 13
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 353,
+			"column": 17,
+			"line": 14
+		},
+		"message": "A11y: Redundant role 'form'",
+		"pos": 342,
+		"start": {
+			"character": 342,
+			"column": 6,
+			"line": 14
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 383,
+			"column": 18,
+			"line": 15
+		},
+		"message": "A11y: Redundant role 'heading'",
+		"pos": 369,
+		"start": {
+			"character": 369,
+			"column": 4,
+			"line": 15
+		}
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"end": {
+			"character": 383,
+			"column": 18,
+			"line": 15
+		},
+		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
+		"pos": 369,
+		"start": {
+			"character": 369,
+			"column": 4,
+			"line": 15
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 415,
+			"column": 18,
+			"line": 16
+		},
+		"message": "A11y: Redundant role 'heading'",
+		"pos": 401,
+		"start": {
+			"character": 401,
+			"column": 4,
+			"line": 16
+		}
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
+		"pos": 401,
+		"start": {
+			"character": 401,
+			"column": 4,
+			"line": 16
+		},
+		"end": {
+			"character": 415,
+			"column": 18,
+			"line": 16
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 447,
+			"column": 18,
+			"line": 17
+		},
+		"message": "A11y: Redundant role 'heading'",
+		"pos": 433,
+		"start": {
+			"character": 433,
+			"column": 4,
+			"line": 17
+		}
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"end": {
+			"character": 447,
+			"column": 18,
+			"line": 17
+		},
+		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
+		"pos": 433,
+		"start": {
+			"character": 433,
+			"column": 4,
+			"line": 17
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 479,
+			"column": 18,
+			"line": 18
+		},
+		"message": "A11y: Redundant role 'heading'",
+		"pos": 465,
+		"start": {
+			"character": 465,
+			"column": 4,
+			"line": 18
+		}
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
+		"pos": 465,
+		"start": {
+			"character": 465,
+			"column": 4,
+			"line": 18
+		},
+		"end": {
+			"character": 479,
+			"column": 18,
+			"line": 18
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 511,
+			"column": 18,
+			"line": 19
+		},
+		"message": "A11y: Redundant role 'heading'",
+		"pos": 497,
+		"start": {
+			"character": 497,
+			"column": 4,
+			"line": 19
+		}
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
+		"pos": 497,
+		"start": {
+			"character": 497,
+			"column": 4,
+			"line": 19
+		},
+		"end": {
+			"character": 511,
+			"column": 18,
+			"line": 19
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 543,
+			"column": 18,
+			"line": 20
+		},
+		"message": "A11y: Redundant role 'heading'",
+		"pos": 529,
+		"start": {
+			"character": 529,
+			"column": 4,
+			"line": 20
+		}
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
+		"pos": 529,
+		"start": {
+			"character": 529,
+			"column": 4,
+			"line": 20
+		},
+		"end": {
+			"character": 543,
+			"column": 18,
+			"line": 20
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 577,
+			"column": 20,
+			"line": 21
+		},
+		"message": "A11y: Redundant role 'separator'",
+		"pos": 561,
+		"start": {
+			"character": 561,
+			"column": 4,
+			"line": 21
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 600,
+			"column": 19,
+			"line": 22
+		},
+		"message": "A11y: Redundant role 'listitem'",
+		"pos": 585,
+		"start": {
+			"character": 585,
+			"column": 4,
+			"line": 22
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 621,
+			"column": 17,
+			"line": 23
+		},
+		"message": "A11y: Redundant role 'link'",
+		"pos": 610,
+		"start": {
+			"character": 610,
+			"column": 6,
+			"line": 23
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 642,
+			"column": 17,
+			"line": 24
+		},
+		"message": "A11y: Redundant role 'main'",
+		"pos": 631,
+		"start": {
+			"character": 631,
+			"column": 6,
+			"line": 24
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 668,
+			"column": 17,
+			"line": 25
+		},
+		"message": "A11y: Redundant role 'list'",
+		"pos": 657,
+		"start": {
+			"character": 657,
+			"column": 6,
+			"line": 25
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 694,
+			"column": 22,
+			"line": 26
+		},
+		"message": "A11y: Redundant role 'navigation'",
+		"pos": 677,
+		"start": {
+			"character": 677,
+			"column": 5,
+			"line": 26
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 713,
+			"column": 15,
+			"line": 27
+		},
+		"message": "A11y: Redundant role 'list'",
+		"pos": 702,
+		"start": {
+			"character": 702,
+			"column": 4,
+			"line": 27
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 739,
+			"column": 22,
+			"line": 28
+		},
+		"message": "A11y: Redundant role 'group'",
+		"pos": 727,
+		"start": {
+			"character": 727,
+			"column": 10,
+			"line": 28
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 764,
+			"column": 21,
+			"line": 29
+		},
+		"message": "A11y: Redundant role 'option'",
+		"pos": 751,
+		"start": {
+			"character": 751,
+			"column": 8,
+			"line": 29
+		}
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"option\" must have the following attributes defined: \"aria-selected\"",
+		"pos": 751,
+		"start": {
+			"character": 751,
+			"column": 8,
+			"line": 29
+		},
+		"end": {
+			"character": 764,
+			"column": 21,
+			"line": 29
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 789,
+			"column": 21,
+			"line": 30
+		},
+		"message": "A11y: Redundant role 'status'",
+		"pos": 776,
+		"start": {
+			"character": 776,
+			"column": 8,
+			"line": 30
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 821,
+			"column": 28,
+			"line": 31
+		},
+		"message": "A11y: Redundant role 'progressbar'",
+		"pos": 803,
+		"start": {
+			"character": 803,
+			"column": 10,
+			"line": 31
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 847,
+			"column": 22,
+			"line": 32
+		},
+		"message": "A11y: Redundant role 'region'",
+		"pos": 834,
+		"start": {
+			"character": 834,
+			"column": 9,
+			"line": 32
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 873,
+			"column": 22,
+			"line": 33
+		},
+		"message": "A11y: Redundant role 'button'",
+		"pos": 860,
+		"start": {
+			"character": 860,
+			"column": 9,
+			"line": 33
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 896,
+			"column": 19,
+			"line": 34
+		},
+		"message": "A11y: Redundant role 'table'",
+		"pos": 884,
+		"start": {
+			"character": 884,
+			"column": 7,
+			"line": 34
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 922,
+			"column": 22,
+			"line": 35
+		},
+		"message": "A11y: Redundant role 'rowgroup'",
+		"pos": 907,
+		"start": {
+			"character": 907,
+			"column": 7,
+			"line": 35
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 950,
+			"column": 24,
+			"line": 36
+		},
+		"message": "A11y: Redundant role 'textbox'",
+		"pos": 936,
+		"start": {
+			"character": 936,
+			"column": 10,
+			"line": 36
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 976,
+			"column": 22,
+			"line": 37
+		},
+		"message": "A11y: Redundant role 'rowgroup'",
+		"pos": 961,
+		"start": {
+			"character": 961,
+			"column": 7,
+			"line": 37
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 1002,
+			"column": 22,
+			"line": 38
+		},
+		"message": "A11y: Redundant role 'rowgroup'",
+		"pos": 987,
+		"start": {
+			"character": 987,
+			"column": 7,
+			"line": 38
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 1020,
+			"column": 14,
+			"line": 39
+		},
+		"message": "A11y: Redundant role 'row'",
+		"pos": 1010,
+		"start": {
+			"character": 1010,
+			"column": 4,
+			"line": 39
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 1039,
+			"column": 15,
+			"line": 40
+		},
+		"message": "A11y: Redundant role 'list'",
+		"pos": 1028,
+		"start": {
+			"character": 1028,
+			"column": 4,
+			"line": 40
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 1125,
+			"column": 21,
+			"line": 43
+		},
+		"message": "A11y: Redundant role 'banner'",
+		"pos": 1112,
+		"start": {
+			"character": 1112,
+			"column": 8,
+			"line": 43
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 1162,
+			"column": 26,
+			"line": 44
+		},
+		"message": "A11y: Redundant role 'contentinfo'",
+		"pos": 1144,
+		"start": {
+			"character": 1144,
+			"column": 8,
+			"line": 44
+		}
+	}
+]
diff --git a/test/validator/samples/a11y-role-has-required-aria-props/input.svelte b/test/validator/samples/a11y-role-has-required-aria-props/input.svelte
new file mode 100644
index 0000000000..8e88b08908
--- /dev/null
+++ b/test/validator/samples/a11y-role-has-required-aria-props/input.svelte
@@ -0,0 +1,9 @@
+<div role="heading"></div>
+<span role="checkbox"></span>
+<div role="meter"></div>
+<div role="scrollbar"></div>
+
+<div role="heading" aria-level="1"></div>
+<span role="checkbox" aria-checked="false"></span>
+<div role="meter" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+<div role="scrollbar" aria-controls="panel" aria-valuenow="50"></div>
diff --git a/test/validator/samples/a11y-role-has-required-aria-props/warnings.json b/test/validator/samples/a11y-role-has-required-aria-props/warnings.json
new file mode 100644
index 0000000000..4de7c84001
--- /dev/null
+++ b/test/validator/samples/a11y-role-has-required-aria-props/warnings.json
@@ -0,0 +1,62 @@
+[
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
+		"start": {
+			"line": 1,
+			"column": 5,
+			"character": 5
+		},
+		"end": {
+			"line": 1,
+			"column": 19,
+			"character": 19
+		},
+		"pos": 5
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"checkbox\" must have the following attributes defined: \"aria-checked\"",
+		"start": {
+			"line": 2,
+			"column": 6,
+			"character": 33
+		},
+		"end": {
+			"line": 2,
+			"column": 21,
+			"character": 48
+		},
+		"pos": 33
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"meter\" must have the following attributes defined: \"aria-valuenow\"",
+		"start": {
+			"line": 3,
+			"column": 5,
+			"character": 62
+		},
+		"end": {
+			"line": 3,
+			"column": 17,
+			"character": 74
+		},
+		"pos": 62
+	},
+	{
+		"code": "a11y-role-has-required-aria-props",
+		"message": "A11y: Elements with the ARIA role \"scrollbar\" must have the following attributes defined: \"aria-controls\", \"aria-valuenow\"",
+		"start": {
+			"character": 87,
+			"column": 5,
+			"line": 4
+		},
+		"end": {
+			"character": 103,
+			"column": 21,
+			"line": 4
+		},
+		"pos": 87
+	}
+]

From 4617c0d5f5af1dae09cc00ce0134e433588a62d1 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 11 Jul 2022 02:27:58 +0800
Subject: [PATCH 22/89] Update CHANGELOG.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70c05b01e9..4140333c7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852))
+
 ## 3.49.0
 
 * Improve performance of string escaping during SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701))

From 39901986d6bc3b1a47d607f2f5e93cbb9c9445bb Mon Sep 17 00:00:00 2001
From: kwangure <86817609+kwangure@users.noreply.github.com>
Date: Mon, 11 Jul 2022 04:40:12 +0300
Subject: [PATCH 23/89] [feat]: Add A11y aria-proptypes check (#6978)

* Add aria prop type list

* feat: check aria attribute types

* feat: add proptype tests

* Add documentation

* use aria-query

Co-authored-by: Nurassyl Zekenov <nurassyl@snoonu.com>
Co-authored-by: mka_882@yahoo.com <mka_882@yahoo.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: David Mosher <davidmosher@gmail.com>
---
 .../content/docs/05-accessibility-warnings.md | 12 +++
 src/compiler/compile/compiler_warnings.ts     | 33 +++++++-
 src/compiler/compile/nodes/Element.ts         | 40 +++++++++-
 .../a11y-aria-proptypes-boolean/input.svelte  |  8 ++
 .../a11y-aria-proptypes-boolean/warnings.json | 32 ++++++++
 .../a11y-aria-proptypes-integer/input.svelte  |  7 ++
 .../a11y-aria-proptypes-integer/warnings.json | 47 +++++++++++
 .../a11y-aria-proptypes-number/input.svelte   |  7 ++
 .../a11y-aria-proptypes-number/warnings.json  | 47 +++++++++++
 .../a11y-aria-proptypes-string/input.svelte   |  5 ++
 .../a11y-aria-proptypes-string/warnings.json  | 17 ++++
 .../a11y-aria-proptypes-token/input.svelte    |  6 ++
 .../a11y-aria-proptypes-token/warnings.json   | 62 +++++++++++++++
 .../input.svelte                              |  7 ++
 .../warnings.json                             | 77 +++++++++++++++++++
 .../a11y-aria-proptypes-tristate/input.svelte |  8 ++
 .../warnings.json                             | 32 ++++++++
 17 files changed, 445 insertions(+), 2 deletions(-)
 create mode 100644 test/validator/samples/a11y-aria-proptypes-boolean/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-proptypes-boolean/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-proptypes-integer/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-proptypes-integer/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-proptypes-number/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-proptypes-number/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-proptypes-string/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-proptypes-string/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-proptypes-token/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-proptypes-token/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-proptypes-tristate/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-proptypes-tristate/warnings.json

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index 9d0835b443..438f2e4743 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -98,6 +98,18 @@ Enforce img alt attribute does not contain the word image, picture, or photo. Sc
 
 ---
 
+### `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.
+
+```sv
+<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
+<div aria-hidden="yes"/>
+```
+
+---
+
 ### `a11y-invalid-attribute`
 
 Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 833722c3b9..267a97afcc 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -1,12 +1,14 @@
 // All compiler warnings should be listed and accessed from here
 
+import { ARIAPropertyDefinition } from 'aria-query';
+
 /**
  * @internal
  */
 export default {
 	custom_element_no_tag: {
 		code: 'custom-element-no-tag',
-		message: 'No custom element \'tag\' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>'			
+		message: 'No custom element \'tag\' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>'
 	},
 	unused_export_let: (component: string, property: string) => ({
 		code: 'unused-export-let',
@@ -60,6 +62,35 @@ export default {
 		code: 'a11y-aria-attributes',
 		message: `A11y: <${name}> should not have aria-* attributes`
 	}),
+	a11y_incorrect_attribute_type: (schema: ARIAPropertyDefinition, attribute: string) => {
+		let message;
+		switch (schema.type) {
+			case 'boolean':
+				message = `The value of '${attribute}' must be exactly one of true or false`;
+				break;
+			case 'id':
+				message = `The value of '${attribute}' must be a string that represents a DOM element ID`;
+				break;
+			case 'idlist':
+				message = `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs`;
+				break;
+			case 'tristate':
+				message = `The value of '${attribute}' must be exactly one of true, false, or mixed`;
+				break;
+			case 'token':
+				message = `The value of '${attribute}' must be exactly one of ${(schema.values || []).join(', ')}`;
+				break;
+			case 'tokenlist':
+				message = `The value of '${attribute}' must be a space-separated list of one or more of ${(schema.values || []).join(', ')}`;
+				break;
+			default:
+				message = `The value of '${attribute}' must be of type ${schema.type}`;
+		}
+		return {
+			code: 'a11y-incorrect-aria-attribute-type',
+			message: `A11y: ${message}`
+		};
+	},
 	a11y_unknown_aria_attribute: (attribute: string, suggestion?: string) => ({
 		code: 'a11y-unknown-aria-attribute',
 		message: `A11y: Unknown aria attribute 'aria-${attribute}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 35131cefcf..b7b2572986 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -23,7 +23,7 @@ import { string_literal } from '../utils/stringify';
 import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
-import { ARIARoleDefintionKey, roles } from 'aria-query';
+import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -177,6 +177,32 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st
 	return parent_element.namespace;
 }
 
+function is_valid_aria_attribute_value(schema: ARIAPropertyDefinition, value: string | boolean): boolean {
+	switch (schema.type) {
+		case 'boolean':
+			return typeof value === 'boolean';
+		case 'string':
+		case 'id':
+			return typeof value === 'string';
+		case 'tristate':
+			return typeof value === 'boolean' || value === 'mixed';
+		case 'integer':
+		case 'number':
+			return typeof value !== 'boolean' && isNaN(Number(value)) === false;
+		case 'token': // single token
+			return (schema.values || [])
+				.indexOf(typeof value === 'string' ? value.toLowerCase() : value) > -1;
+		case 'idlist': // if list of ids, split each
+			return typeof value === 'string'
+				&& value.split(' ').every((id) => typeof id === 'string');
+		case 'tokenlist': // if list of tokens, split each
+			return typeof value === 'string'
+				&& value.split(' ').every((token) => (schema.values || []).indexOf(token.toLowerCase()) > -1);
+		default:
+			return false;
+	}
+}
+
 export default class Element extends Node {
 	type: 'Element';
 	name: string;
@@ -431,6 +457,18 @@ export default class Element extends Node {
 				if (name === 'aria-hidden' && /^h[1-6]$/.test(this.name)) {
 					component.warn(attribute, compiler_warnings.a11y_hidden(this.name));
 				}
+
+				// aria-proptypes
+				let value = attribute.get_static_value();
+				if (value === 'true') value = true;
+				if (value === 'false') value = false;
+
+				if (value !== null && value !== undefined && aria.has(name as ARIAProperty)) {
+					const schema = aria.get(name as ARIAProperty);
+					if (!is_valid_aria_attribute_value(schema, value)) {
+						component.warn(attribute, compiler_warnings.a11y_incorrect_attribute_type(schema, name));
+					}
+				}
 			}
 
 			// aria-role
diff --git a/test/validator/samples/a11y-aria-proptypes-boolean/input.svelte b/test/validator/samples/a11y-aria-proptypes-boolean/input.svelte
new file mode 100644
index 0000000000..c992928229
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-boolean/input.svelte
@@ -0,0 +1,8 @@
+<script>
+    const abc = 'abc';
+</script>
+
+<button aria-disabled="yes"/>
+<button aria-disabled="no"/>
+<button aria-disabled={1234}/>
+<button aria-disabled={`${abc}`}/>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-boolean/warnings.json b/test/validator/samples/a11y-aria-proptypes-boolean/warnings.json
new file mode 100644
index 0000000000..b43697b64d
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-boolean/warnings.json
@@ -0,0 +1,32 @@
+[
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-disabled' must be exactly one of true or false",
+    "start": {
+      "line": 5,
+      "column": 8,
+      "character": 51
+    },
+    "end": {
+      "line": 5,
+      "column": 27,
+      "character": 70
+    },
+    "pos": 51
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-disabled' must be exactly one of true or false",
+    "start": {
+      "line": 6,
+      "column": 8,
+      "character": 81
+    },
+    "end": {
+      "line": 6,
+      "column": 26,
+      "character": 99
+    },
+    "pos": 81
+  }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-integer/input.svelte b/test/validator/samples/a11y-aria-proptypes-integer/input.svelte
new file mode 100644
index 0000000000..f426becef7
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-integer/input.svelte
@@ -0,0 +1,7 @@
+<div aria-level="yes" />
+<div aria-level="no" />
+<div aria-level={`abc`} />
+<div aria-level={true} />
+<div aria-level />
+<div aria-level={"false"} />
+<div aria-level={!"false"} />
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-integer/warnings.json b/test/validator/samples/a11y-aria-proptypes-integer/warnings.json
new file mode 100644
index 0000000000..e4c37df493
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-integer/warnings.json
@@ -0,0 +1,47 @@
+[
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-level' must be of type integer",
+    "start": {
+      "line": 1,
+      "column": 5,
+      "character": 5
+    },
+    "end": {
+      "line": 1,
+      "column": 21,
+      "character": 21
+    },
+    "pos": 5
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-level' must be of type integer",
+    "start": {
+      "line": 2,
+      "column": 5,
+      "character": 30
+    },
+    "end": {
+      "line": 2,
+      "column": 20,
+      "character": 45
+    },
+    "pos": 30
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-level' must be of type integer",
+    "start": {
+      "line": 5,
+      "column": 5,
+      "character": 107
+    },
+    "end": {
+      "line": 5,
+      "column": 15,
+      "character": 117
+    },
+    "pos": 107
+  }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-number/input.svelte b/test/validator/samples/a11y-aria-proptypes-number/input.svelte
new file mode 100644
index 0000000000..6006ef49ad
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-number/input.svelte
@@ -0,0 +1,7 @@
+<div aria-valuemax="yes" />
+<div aria-valuemax="no" />
+<div aria-valuemax={`abc`} />
+<div aria-valuemax={true} />
+<div aria-valuemax />
+<div aria-valuemax={'false'} />
+<div aria-valuemax={!'false'} />
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-number/warnings.json b/test/validator/samples/a11y-aria-proptypes-number/warnings.json
new file mode 100644
index 0000000000..93c64cb97b
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-number/warnings.json
@@ -0,0 +1,47 @@
+[
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-valuemax' must be of type number",
+    "start": {
+      "line": 1,
+      "column": 5,
+      "character": 5
+    },
+    "end": {
+      "line": 1,
+      "column": 24,
+      "character": 24
+    },
+    "pos": 5
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-valuemax' must be of type number",
+    "start": {
+      "line": 2,
+      "column": 5,
+      "character": 33
+    },
+    "end": {
+      "line": 2,
+      "column": 23,
+      "character": 51
+    },
+    "pos": 33
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-valuemax' must be of type number",
+    "start": {
+      "line": 5,
+      "column": 5,
+      "character": 119
+    },
+    "end": {
+      "line": 5,
+      "column": 18,
+      "character": 132
+    },
+    "pos": 119
+  }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-string/input.svelte b/test/validator/samples/a11y-aria-proptypes-string/input.svelte
new file mode 100644
index 0000000000..0c510160af
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-string/input.svelte
@@ -0,0 +1,5 @@
+<div aria-label />
+<div aria-label={true} />
+<div aria-label={false} />
+<div aria-label={1234} />
+<div aria-label={!true} />
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-string/warnings.json b/test/validator/samples/a11y-aria-proptypes-string/warnings.json
new file mode 100644
index 0000000000..f83eb895a4
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-string/warnings.json
@@ -0,0 +1,17 @@
+[
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-label' must be of type string",
+    "start": {
+      "line": 1,
+      "column": 5,
+      "character": 5
+    },
+    "end": {
+      "line": 1,
+      "column": 15,
+      "character": 15
+    },
+    "pos": 5
+  }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-token/input.svelte b/test/validator/samples/a11y-aria-proptypes-token/input.svelte
new file mode 100644
index 0000000000..4a336ccbfb
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-token/input.svelte
@@ -0,0 +1,6 @@
+<div aria-sort="" />
+<div aria-sort="descnding" />
+<div aria-sort />
+<div aria-sort={true} />
+<div aria-sort={"false"} />
+<div aria-sort="ascending descending" />
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-token/warnings.json b/test/validator/samples/a11y-aria-proptypes-token/warnings.json
new file mode 100644
index 0000000000..168fc70434
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-token/warnings.json
@@ -0,0 +1,62 @@
+[
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-sort' must be exactly one of ascending, descending, none, other",
+    "start": {
+      "line": 1,
+      "column": 5,
+      "character": 5
+    },
+    "end": {
+      "line": 1,
+      "column": 17,
+      "character": 17
+    },
+    "pos": 5
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-sort' must be exactly one of ascending, descending, none, other",
+    "start": {
+      "line": 2,
+      "column": 5,
+      "character": 26
+    },
+    "end": {
+      "line": 2,
+      "column": 26,
+      "character": 47
+    },
+    "pos": 26
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-sort' must be exactly one of ascending, descending, none, other",
+    "start": {
+      "line": 3,
+      "column": 5,
+      "character": 56
+    },
+    "end": {
+      "line": 3,
+      "column": 14,
+      "character": 65
+    },
+    "pos": 56
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-sort' must be exactly one of ascending, descending, none, other",
+    "start": {
+      "line": 6,
+      "column": 5,
+      "character": 127
+    },
+    "end": {
+      "line": 6,
+      "column": 37,
+      "character": 159
+    },
+    "pos": 127
+  }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte b/test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte
new file mode 100644
index 0000000000..33ebbccab5
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte
@@ -0,0 +1,7 @@
+<div aria-relevant="" />
+<div aria-relevant="foobar" />
+<div aria-relevant />
+<div aria-relevant={true} />
+<div aria-relevant={"false"} />
+<div aria-relevant="additions removalss" />
+<div aria-relevant="additions removalss " />
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json b/test/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json
new file mode 100644
index 0000000000..959f1821a5
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json
@@ -0,0 +1,77 @@
+[
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-relevant' must be a space-separated list of one or more of additions, all, removals, text",
+    "start": {
+      "line": 1,
+      "column": 5,
+      "character": 5
+    },
+    "end": {
+      "line": 1,
+      "column": 21,
+      "character": 21
+    },
+    "pos": 5
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-relevant' must be a space-separated list of one or more of additions, all, removals, text",
+    "start": {
+      "line": 2,
+      "column": 5,
+      "character": 30
+    },
+    "end": {
+      "line": 2,
+      "column": 27,
+      "character": 52
+    },
+    "pos": 30
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-relevant' must be a space-separated list of one or more of additions, all, removals, text",
+    "start": {
+      "line": 3,
+      "column": 5,
+      "character": 61
+    },
+    "end": {
+      "line": 3,
+      "column": 18,
+      "character": 74
+    },
+    "pos": 61
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-relevant' must be a space-separated list of one or more of additions, all, removals, text",
+    "start": {
+      "line": 6,
+      "column": 5,
+      "character": 144
+    },
+    "end": {
+      "line": 6,
+      "column": 40,
+      "character": 179
+    },
+    "pos": 144
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-relevant' must be a space-separated list of one or more of additions, all, removals, text",
+    "start": {
+      "line": 7,
+      "column": 5,
+      "character": 188
+    },
+    "end": {
+      "line": 7,
+      "column": 41,
+      "character": 224
+    },
+    "pos": 188
+  }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-tristate/input.svelte b/test/validator/samples/a11y-aria-proptypes-tristate/input.svelte
new file mode 100644
index 0000000000..a265f0472b
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-tristate/input.svelte
@@ -0,0 +1,8 @@
+<script>
+    const abc = 'abc';
+</script>
+
+<div aria-checked="yes" />
+<div aria-checked="no" />
+<div aria-checked={1234} />
+<div aria-checked={`${abc}`} />
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-proptypes-tristate/warnings.json b/test/validator/samples/a11y-aria-proptypes-tristate/warnings.json
new file mode 100644
index 0000000000..a8ff8fd3a1
--- /dev/null
+++ b/test/validator/samples/a11y-aria-proptypes-tristate/warnings.json
@@ -0,0 +1,32 @@
+[
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-checked' must be exactly one of true, false, or mixed",
+    "start": {
+      "line": 5,
+      "column": 5,
+      "character": 48
+    },
+    "end": {
+      "line": 5,
+      "column": 23,
+      "character": 66
+    },
+    "pos": 48
+  },
+  {
+    "code": "a11y-incorrect-aria-attribute-type",
+    "message": "A11y: The value of 'aria-checked' must be exactly one of true, false, or mixed",
+    "start": {
+      "line": 6,
+      "column": 5,
+      "character": 75
+    },
+    "end": {
+      "line": 6,
+      "column": 22,
+      "character": 92
+    },
+    "pos": 75
+  }
+]
\ No newline at end of file

From ccbf10c16326cffb1b38e721e2f74aad4b85dbf2 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 11 Jul 2022 09:41:43 +0800
Subject: [PATCH 24/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4140333c7a..06f1713432 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852))
+* Add a11y warning `aria-proptypes` which checks ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
 
 ## 3.49.0
 

From f5111ef4367b63aede6579407ffc0e2c6513c04e Mon Sep 17 00:00:00 2001
From: Anthony Le Goas <anthony.legoas@gmail.com>
Date: Tue, 12 Jul 2022 00:52:25 +0200
Subject: [PATCH 25/89] [feat] add a11y check on abstract roles (#6241)

* add a11y check on abstract roles

* use aria-query and move warnings to compiler_warnings file

* uppercase warning message

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/compiler_warnings.ts     |   4 +
 src/compiler/compile/nodes/Element.ts         |   7 +-
 .../a11y-no-abstract-roles/input.svelte       |  12 ++
 .../a11y-no-abstract-roles/warnings.json      | 182 ++++++++++++++++++
 4 files changed, 203 insertions(+), 2 deletions(-)
 create mode 100644 test/validator/samples/a11y-no-abstract-roles/input.svelte
 create mode 100644 test/validator/samples/a11y-no-abstract-roles/warnings.json

diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 267a97afcc..0d703e0d8d 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -107,6 +107,10 @@ export default {
 		code: 'a11y-unknown-role',
 		message: `A11y: Unknown role '${role}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
 	}),
+	a11y_no_abstract_role: (role: string | boolean) => ({
+		code: 'a11y-no-abstract-role',
+		message: `A11y: Abstract role '${role}' is forbidden`
+	}),
 	a11y_no_redundant_roles: (role: string | boolean) => ({
 		code: 'a11y-no-redundant-roles',
 		message: `A11y: Redundant role '${role}'`
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index b7b2572986..760e229b0f 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -32,6 +32,7 @@ const aria_attribute_set = new Set(aria_attributes);
 
 const aria_roles = 'alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox complementary contentinfo definition deletion dialog directory document emphasis feed figure form generic graphics-document graphics-object graphics-symbol grid gridcell group heading img link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status strong subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem'.split(' ');
 const aria_role_set = new Set(aria_roles);
+const aria_role_abstract_set = new Set(roles.keys().filter(role => roles.get(role).abstract));
 
 const a11y_required_attributes = {
 	a: ['href'],
@@ -479,8 +480,10 @@ export default class Element extends Node {
 				}
 
 				const value = attribute.get_static_value();
-				// @ts-ignore
-				if (value && !aria_role_set.has(value)) {
+				
+				if (value && aria_role_abstract_set.has(value as ARIARoleDefintionKey)) {
+					component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value));
+				} else if (value && !aria_role_set.has(value as string)) {
 					// @ts-ignore
 					const match = fuzzymatch(value, aria_roles);
 					component.warn(attribute, compiler_warnings.a11y_unknown_role(value, match));
diff --git a/test/validator/samples/a11y-no-abstract-roles/input.svelte b/test/validator/samples/a11y-no-abstract-roles/input.svelte
new file mode 100644
index 0000000000..dbe6bd8581
--- /dev/null
+++ b/test/validator/samples/a11y-no-abstract-roles/input.svelte
@@ -0,0 +1,12 @@
+<div role="command"/>
+<div role="composite"/>
+<div role="input"/>
+<div role="landmark"/>
+<div role="range"/>
+<div role="roletype"/>
+<div role="section"/>
+<div role="sectionhead"/>
+<div role="select"/>
+<div role="structure"/>
+<div role="widget"/>
+<div role="window"/>
diff --git a/test/validator/samples/a11y-no-abstract-roles/warnings.json b/test/validator/samples/a11y-no-abstract-roles/warnings.json
new file mode 100644
index 0000000000..917522d7ca
--- /dev/null
+++ b/test/validator/samples/a11y-no-abstract-roles/warnings.json
@@ -0,0 +1,182 @@
+[
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 19,
+			"column": 19,
+			"line": 1
+		},
+		"message": "A11y: Abstract role 'command' is forbidden",
+		"pos": 5,
+		"start": {
+			"character": 5,
+			"column": 5,
+			"line": 1
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 43,
+			"column": 21,
+			"line": 2
+		},
+		"message": "A11y: Abstract role 'composite' is forbidden",
+		"pos": 27,
+		"start": {
+			"character": 27,
+			"column": 5,
+			"line": 2
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 63,
+			"column": 17,
+			"line": 3
+		},
+		"message": "A11y: Abstract role 'input' is forbidden",
+		"pos": 51,
+		"start": {
+			"character": 51,
+			"column": 5,
+			"line": 3
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 86,
+			"column": 20,
+			"line": 4
+		},
+		"message": "A11y: Abstract role 'landmark' is forbidden",
+		"pos": 71,
+		"start": {
+			"character": 71,
+			"column": 5,
+			"line": 4
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 106,
+			"column": 17,
+			"line": 5
+		},
+		"message": "A11y: Abstract role 'range' is forbidden",
+		"pos": 94,
+		"start": {
+			"character": 94,
+			"column": 5,
+			"line": 5
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 129,
+			"column": 20,
+			"line": 6
+		},
+		"message": "A11y: Abstract role 'roletype' is forbidden",
+		"pos": 114,
+		"start": {
+			"character": 114,
+			"column": 5,
+			"line": 6
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 151,
+			"column": 19,
+			"line": 7
+		},
+		"message": "A11y: Abstract role 'section' is forbidden",
+		"pos": 137,
+		"start": {
+			"character": 137,
+			"column": 5,
+			"line": 7
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 177,
+			"column": 23,
+			"line": 8
+		},
+		"message": "A11y: Abstract role 'sectionhead' is forbidden",
+		"pos": 159,
+		"start": {
+			"character": 159,
+			"column": 5,
+			"line": 8
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 198,
+			"column": 18,
+			"line": 9
+		},
+		"message": "A11y: Abstract role 'select' is forbidden",
+		"pos": 185,
+		"start": {
+			"character": 185,
+			"column": 5,
+			"line": 9
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 222,
+			"column": 21,
+			"line": 10
+		},
+		"message": "A11y: Abstract role 'structure' is forbidden",
+		"pos": 206,
+		"start": {
+			"character": 206,
+			"column": 5,
+			"line": 10
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 243,
+			"column": 18,
+			"line": 11
+		},
+		"message": "A11y: Abstract role 'widget' is forbidden",
+		"pos": 230,
+		"start": {
+			"character": 230,
+			"column": 5,
+			"line": 11
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 264,
+			"column": 18,
+			"line": 12
+		},
+		"message": "A11y: Abstract role 'window' is forbidden",
+		"pos": 251,
+		"start": {
+			"character": 251,
+			"column": 5,
+			"line": 12
+		}
+	}
+]

From 1913e7fad75e0baaab2701f5510f1441916a5616 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 12 Jul 2022 06:55:43 +0800
Subject: [PATCH 26/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06f1713432..7a85fe04b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852))
 * Add a11y warning `aria-proptypes` which checks ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
+* Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241))
 
 ## 3.49.0
 

From 60024effa8acd102e326a020dd8354f0b39d05a8 Mon Sep 17 00:00:00 2001
From: Simon Dao <sdao0202@gmail.com>
Date: Mon, 11 Jul 2022 18:11:23 -0500
Subject: [PATCH 27/89] [docs] update intro sentence of reactive declarations
 tutorial (#7467)

---
 .../tutorial/02-reactivity/02-reactive-declarations/text.md   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md b/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md
index 027a91a44a..bfc58f1ebe 100644
--- a/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md
+++ b/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md
@@ -2,9 +2,7 @@
 title: Declarations
 ---
 
-Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from *other* parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change.
-
-For these, we have *reactive declarations*. They look like this:
+Svelte's reactivity not only keeps the DOM in sync with your application's variables as shown in the previous section, it can also keep variables in sync with each other using reactive declarations. They look like this:
 
 ```js
 let count = 0;

From 2db60a77e12abc78ad7b5e4e37a3ee00e7c20c63 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 12 Jul 2022 23:20:44 +0800
Subject: [PATCH 28/89] rename test files from svelte-slot -> svelte-fragment
 (#7679)

---
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../A.svelte                                                      | 0
 .../B.svelte                                                      | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../A.svelte                                                      | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Inner.svelte                                                  | 0
 .../Outer.svelte                                                  | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../Child.svelte                                                  | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../{component-svelte-slot => component-svelte-fragment}/B.svelte | 0
 .../Nested.svelte                                                 | 0
 .../_config.js                                                    | 0
 .../main.svelte                                                   | 0
 .../errors.json                                                   | 0
 .../input.svelte                                                  | 0
 .../errors.json                                                   | 0
 .../input.svelte                                                  | 0
 56 files changed, 0 insertions(+), 0 deletions(-)
 rename test/runtime/samples/{component-svelte-slot-2 => component-svelte-fragment-2}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-2 => component-svelte-fragment-2}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-2 => component-svelte-fragment-2}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-aliased => component-svelte-fragment-let-aliased}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-aliased => component-svelte-fragment-let-aliased}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-aliased => component-svelte-fragment-let-aliased}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-b => component-svelte-fragment-let-b}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-b => component-svelte-fragment-let-b}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-b => component-svelte-fragment-let-b}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-c => component-svelte-fragment-let-c}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-c => component-svelte-fragment-let-c}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-c => component-svelte-fragment-let-c}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-d => component-svelte-fragment-let-d}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-d => component-svelte-fragment-let-d}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-d => component-svelte-fragment-let-d}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-destructured-2 => component-svelte-fragment-let-destructured-2}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-destructured-2 => component-svelte-fragment-let-destructured-2}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-destructured-2 => component-svelte-fragment-let-destructured-2}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-destructured => component-svelte-fragment-let-destructured}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-destructured => component-svelte-fragment-let-destructured}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-destructured => component-svelte-fragment-let-destructured}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-e => component-svelte-fragment-let-e}/A.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-e => component-svelte-fragment-let-e}/B.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-e => component-svelte-fragment-let-e}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-e => component-svelte-fragment-let-e}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-f => component-svelte-fragment-let-f}/A.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-f => component-svelte-fragment-let-f}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-f => component-svelte-fragment-let-f}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-in-binding => component-svelte-fragment-let-in-binding}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-in-binding => component-svelte-fragment-let-in-binding}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-in-binding => component-svelte-fragment-let-in-binding}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-in-slot => component-svelte-fragment-let-in-slot}/Inner.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-in-slot => component-svelte-fragment-let-in-slot}/Outer.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-in-slot => component-svelte-fragment-let-in-slot}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-in-slot => component-svelte-fragment-let-in-slot}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-named => component-svelte-fragment-let-named}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-named => component-svelte-fragment-let-named}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-named => component-svelte-fragment-let-named}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-static => component-svelte-fragment-let-static}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let-static => component-svelte-fragment-let-static}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let-static => component-svelte-fragment-let-static}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let => component-svelte-fragment-let}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-let => component-svelte-fragment-let}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-let => component-svelte-fragment-let}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-nested => component-svelte-fragment-nested}/Child.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-nested => component-svelte-fragment-nested}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot-nested => component-svelte-fragment-nested}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot-nested => component-svelte-fragment-nested}/main.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot => component-svelte-fragment}/B.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot => component-svelte-fragment}/Nested.svelte (100%)
 rename test/runtime/samples/{component-svelte-slot => component-svelte-fragment}/_config.js (100%)
 rename test/runtime/samples/{component-svelte-slot => component-svelte-fragment}/main.svelte (100%)
 rename test/validator/samples/{svelte-slot-placement-2 => svelte-fragment-placement-2}/errors.json (100%)
 rename test/validator/samples/{svelte-slot-placement-2 => svelte-fragment-placement-2}/input.svelte (100%)
 rename test/validator/samples/{svelte-slot-placement => svelte-fragment-placement}/errors.json (100%)
 rename test/validator/samples/{svelte-slot-placement => svelte-fragment-placement}/input.svelte (100%)

diff --git a/test/runtime/samples/component-svelte-slot-2/Nested.svelte b/test/runtime/samples/component-svelte-fragment-2/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-2/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-2/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-2/_config.js b/test/runtime/samples/component-svelte-fragment-2/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-2/_config.js
rename to test/runtime/samples/component-svelte-fragment-2/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-2/main.svelte b/test/runtime/samples/component-svelte-fragment-2/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-2/main.svelte
rename to test/runtime/samples/component-svelte-fragment-2/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-aliased/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-aliased/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-aliased/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-aliased/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-aliased/_config.js b/test/runtime/samples/component-svelte-fragment-let-aliased/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-aliased/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-aliased/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-aliased/main.svelte b/test/runtime/samples/component-svelte-fragment-let-aliased/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-aliased/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-aliased/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-b/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-b/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-b/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-b/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-b/_config.js b/test/runtime/samples/component-svelte-fragment-let-b/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-b/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-b/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-b/main.svelte b/test/runtime/samples/component-svelte-fragment-let-b/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-b/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-b/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-c/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-c/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-c/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-c/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-c/_config.js b/test/runtime/samples/component-svelte-fragment-let-c/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-c/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-c/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-c/main.svelte b/test/runtime/samples/component-svelte-fragment-let-c/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-c/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-c/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-d/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-d/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-d/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-d/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-d/_config.js b/test/runtime/samples/component-svelte-fragment-let-d/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-d/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-d/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-d/main.svelte b/test/runtime/samples/component-svelte-fragment-let-d/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-d/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-d/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured-2/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-destructured-2/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-destructured-2/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-destructured-2/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured-2/_config.js b/test/runtime/samples/component-svelte-fragment-let-destructured-2/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-destructured-2/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-destructured-2/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte b/test/runtime/samples/component-svelte-fragment-let-destructured-2/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-destructured-2/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-destructured/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-destructured/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-destructured/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured/_config.js b/test/runtime/samples/component-svelte-fragment-let-destructured/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-destructured/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-destructured/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured/main.svelte b/test/runtime/samples/component-svelte-fragment-let-destructured/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-destructured/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-destructured/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-e/A.svelte b/test/runtime/samples/component-svelte-fragment-let-e/A.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-e/A.svelte
rename to test/runtime/samples/component-svelte-fragment-let-e/A.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-e/B.svelte b/test/runtime/samples/component-svelte-fragment-let-e/B.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-e/B.svelte
rename to test/runtime/samples/component-svelte-fragment-let-e/B.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-e/_config.js b/test/runtime/samples/component-svelte-fragment-let-e/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-e/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-e/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-e/main.svelte b/test/runtime/samples/component-svelte-fragment-let-e/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-e/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-e/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-f/A.svelte b/test/runtime/samples/component-svelte-fragment-let-f/A.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-f/A.svelte
rename to test/runtime/samples/component-svelte-fragment-let-f/A.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-f/_config.js b/test/runtime/samples/component-svelte-fragment-let-f/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-f/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-f/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-f/main.svelte b/test/runtime/samples/component-svelte-fragment-let-f/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-f/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-f/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-in-binding/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-in-binding/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-in-binding/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-in-binding/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-in-binding/_config.js b/test/runtime/samples/component-svelte-fragment-let-in-binding/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-in-binding/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-in-binding/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte b/test/runtime/samples/component-svelte-fragment-let-in-binding/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-in-binding/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/Inner.svelte b/test/runtime/samples/component-svelte-fragment-let-in-slot/Inner.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-in-slot/Inner.svelte
rename to test/runtime/samples/component-svelte-fragment-let-in-slot/Inner.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/Outer.svelte b/test/runtime/samples/component-svelte-fragment-let-in-slot/Outer.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-in-slot/Outer.svelte
rename to test/runtime/samples/component-svelte-fragment-let-in-slot/Outer.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/_config.js b/test/runtime/samples/component-svelte-fragment-let-in-slot/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-in-slot/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-in-slot/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte b/test/runtime/samples/component-svelte-fragment-let-in-slot/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-in-slot/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-named/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-named/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-named/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-named/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-named/_config.js b/test/runtime/samples/component-svelte-fragment-let-named/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-named/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-named/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-named/main.svelte b/test/runtime/samples/component-svelte-fragment-let-named/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-named/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-named/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-static/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let-static/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-static/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let-static/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let-static/_config.js b/test/runtime/samples/component-svelte-fragment-let-static/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-static/_config.js
rename to test/runtime/samples/component-svelte-fragment-let-static/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let-static/main.svelte b/test/runtime/samples/component-svelte-fragment-let-static/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let-static/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let-static/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let/Nested.svelte b/test/runtime/samples/component-svelte-fragment-let/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-let/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-let/_config.js b/test/runtime/samples/component-svelte-fragment-let/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let/_config.js
rename to test/runtime/samples/component-svelte-fragment-let/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-let/main.svelte b/test/runtime/samples/component-svelte-fragment-let/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-let/main.svelte
rename to test/runtime/samples/component-svelte-fragment-let/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot-nested/Child.svelte b/test/runtime/samples/component-svelte-fragment-nested/Child.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-nested/Child.svelte
rename to test/runtime/samples/component-svelte-fragment-nested/Child.svelte
diff --git a/test/runtime/samples/component-svelte-slot-nested/Nested.svelte b/test/runtime/samples/component-svelte-fragment-nested/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-nested/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment-nested/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot-nested/_config.js b/test/runtime/samples/component-svelte-fragment-nested/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-nested/_config.js
rename to test/runtime/samples/component-svelte-fragment-nested/_config.js
diff --git a/test/runtime/samples/component-svelte-slot-nested/main.svelte b/test/runtime/samples/component-svelte-fragment-nested/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot-nested/main.svelte
rename to test/runtime/samples/component-svelte-fragment-nested/main.svelte
diff --git a/test/runtime/samples/component-svelte-slot/B.svelte b/test/runtime/samples/component-svelte-fragment/B.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot/B.svelte
rename to test/runtime/samples/component-svelte-fragment/B.svelte
diff --git a/test/runtime/samples/component-svelte-slot/Nested.svelte b/test/runtime/samples/component-svelte-fragment/Nested.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot/Nested.svelte
rename to test/runtime/samples/component-svelte-fragment/Nested.svelte
diff --git a/test/runtime/samples/component-svelte-slot/_config.js b/test/runtime/samples/component-svelte-fragment/_config.js
similarity index 100%
rename from test/runtime/samples/component-svelte-slot/_config.js
rename to test/runtime/samples/component-svelte-fragment/_config.js
diff --git a/test/runtime/samples/component-svelte-slot/main.svelte b/test/runtime/samples/component-svelte-fragment/main.svelte
similarity index 100%
rename from test/runtime/samples/component-svelte-slot/main.svelte
rename to test/runtime/samples/component-svelte-fragment/main.svelte
diff --git a/test/validator/samples/svelte-slot-placement-2/errors.json b/test/validator/samples/svelte-fragment-placement-2/errors.json
similarity index 100%
rename from test/validator/samples/svelte-slot-placement-2/errors.json
rename to test/validator/samples/svelte-fragment-placement-2/errors.json
diff --git a/test/validator/samples/svelte-slot-placement-2/input.svelte b/test/validator/samples/svelte-fragment-placement-2/input.svelte
similarity index 100%
rename from test/validator/samples/svelte-slot-placement-2/input.svelte
rename to test/validator/samples/svelte-fragment-placement-2/input.svelte
diff --git a/test/validator/samples/svelte-slot-placement/errors.json b/test/validator/samples/svelte-fragment-placement/errors.json
similarity index 100%
rename from test/validator/samples/svelte-slot-placement/errors.json
rename to test/validator/samples/svelte-fragment-placement/errors.json
diff --git a/test/validator/samples/svelte-slot-placement/input.svelte b/test/validator/samples/svelte-fragment-placement/input.svelte
similarity index 100%
rename from test/validator/samples/svelte-slot-placement/input.svelte
rename to test/validator/samples/svelte-fragment-placement/input.svelte

From e973bacd3883c7cabc7d9aa3b6e944cb92f57f6a Mon Sep 17 00:00:00 2001
From: Stephane <stephane-vanraes@users.noreply.github.com>
Date: Thu, 14 Jul 2022 11:20:33 +0200
Subject: [PATCH 29/89] Link to sites repository in README.md (#7684)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index fa66ac6cc9..5c88776e53 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@ npm run test -- -g transition
 
 ## svelte.dev
 
-The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [SvelteKit](https://kit.svelte.dev).
+The source code for https://svelte.dev, including all the documentation, lives in the [sites](https://github.com/sveltejs/sites) repository. The site is built with [SvelteKit](https://kit.svelte.dev).
 
 ### Is svelte.dev down?
 

From 379a963d012a2bcb651e8ebdc54f8e21baaf4e19 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 14 Jul 2022 12:06:20 -0700
Subject: [PATCH 30/89] [docs] npm create needs @latest tag (#7687)

---
 site/content/tutorial/01-introduction/07-making-an-app/text.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md
index 68b54e33f5..4ba5908137 100644
--- a/site/content/tutorial/01-introduction/07-making-an-app/text.md
+++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md
@@ -7,7 +7,7 @@ This tutorial is designed to get you familiar with the process of writing compon
 First, you'll need to integrate Svelte with a build tool. We recommend using [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/)...
 
 ```bash
-npm create vite my-app -- --template svelte
+npm create vite@latest my-app -- --template svelte
 ```
 
 ...or one of the [community-maintained integrations](https://sveltesociety.dev/tools).

From 05b5be04694a0c7e926cce0e89aa589af2841094 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Fri, 15 Jul 2022 13:17:22 +0700
Subject: [PATCH 31/89] [docs] link content to site directory (#7688)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5c88776e53..97e9ab65f3 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@ npm run test -- -g transition
 
 ## svelte.dev
 
-The source code for https://svelte.dev, including all the documentation, lives in the [sites](https://github.com/sveltejs/sites) repository. The site is built with [SvelteKit](https://kit.svelte.dev).
+The source code for https://svelte.dev lives in the [sites](https://github.com/sveltejs/sites) repository, with all the documentation in the [site/content](site/content) directory. The site is built with [SvelteKit](https://kit.svelte.dev).
 
 ### Is svelte.dev down?
 

From 26d1455b2701e060af8bc0aefb7e039f5851aa1a Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 17 Jul 2022 17:25:36 +0800
Subject: [PATCH 32/89] fixed removal of empty stylesheets created from
 transitions (#7662)

Co-authored-by: Mathias Picker <mattis123@live.no>
---
 src/runtime/internal/dom.ts                     |  9 ++-------
 src/runtime/internal/style_manager.ts           | 17 ++++++++---------
 .../samples/style_manager-cleanup/_config.js    | 14 ++++++++++++++
 .../samples/style_manager-cleanup/main.svelte   | 14 ++++++++++++++
 4 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 test/runtime/samples/style_manager-cleanup/_config.js
 create mode 100644 test/runtime/samples/style_manager-cleanup/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index cadc1abbaa..072506629c 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -154,14 +154,9 @@ export function get_root_for_style(node: Node): ShadowRoot | Document {
 	return node.ownerDocument;
 }
 
-export function append_empty_stylesheet(node: Node) {
-	const style_element = element('style') as HTMLStyleElement;
-	append_stylesheet(get_root_for_style(node), style_element);
-	return style_element.sheet as CSSStyleSheet;
-}
-
-function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
+export function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
 	append((node as Document).head || node, style);
+	return style.sheet as CSSStyleSheet;
 }
 
 export function append_hydration(target: NodeEx, node: NodeEx) {
diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts
index 6907e5af02..67236cabab 100644
--- a/src/runtime/internal/style_manager.ts
+++ b/src/runtime/internal/style_manager.ts
@@ -1,8 +1,8 @@
-import { append_empty_stylesheet, get_root_for_style } from './dom';
+import { append_stylesheet, detach, element, get_root_for_style } from './dom';
 import { raf } from './environment';
 
 interface StyleInformation {
-	stylesheet: CSSStyleSheet;
+	style_element: HTMLStyleElement;
 	rules: Record<string, true>;
 }
 
@@ -20,8 +20,8 @@ function hash(str: string) {
 	return hash >>> 0;
 }
 
-function create_style_information(doc: Document | ShadowRoot, node: Element & ElementCSSInlineStyle) {
-	const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
+function create_style_information(doc: Document | ShadowRoot) {
+	const info = { style_element: element('style'), rules: {} };
 	managed_styles.set(doc, info);
 	return info;
 }
@@ -39,9 +39,10 @@ export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b:
 	const name = `__svelte_${hash(rule)}_${uid}`;
 	const doc = get_root_for_style(node);
 
-	const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
+	const { style_element, rules } = managed_styles.get(doc) || create_style_information(doc);
 
 	if (!rules[name]) {
+		const stylesheet = append_stylesheet(doc, style_element);
 		rules[name] = true;
 		stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
 	}
@@ -71,10 +72,8 @@ export function clear_rules() {
 	raf(() => {
 		if (active) return;
 		managed_styles.forEach(info => {
-			const { stylesheet } = info;
-			let i = stylesheet.cssRules.length;
-			while (i--) stylesheet.deleteRule(i);
-			info.rules = {};
+			const { style_element } = info;
+			detach(style_element);
 		});
 		managed_styles.clear();
 	});
diff --git a/test/runtime/samples/style_manager-cleanup/_config.js b/test/runtime/samples/style_manager-cleanup/_config.js
new file mode 100644
index 0000000000..7609d76cf2
--- /dev/null
+++ b/test/runtime/samples/style_manager-cleanup/_config.js
@@ -0,0 +1,14 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	skip_if_hydrate_from_ssr: true,
+	test({ raf, assert, component, window }) {
+		component.visible = true;
+		raf.tick(100);
+		component.visible = false;
+		raf.tick(200);
+		raf.tick(0);
+
+		assert.htmlEqual(window.document.head.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/style_manager-cleanup/main.svelte b/test/runtime/samples/style_manager-cleanup/main.svelte
new file mode 100644
index 0000000000..c2ccdc7c09
--- /dev/null
+++ b/test/runtime/samples/style_manager-cleanup/main.svelte
@@ -0,0 +1,14 @@
+<script>
+    export let visible = false;
+    
+    function foo() {
+        return {
+            duration: 100,
+            css: () => ''
+        };
+    }
+    </script>
+    
+    {#if visible}
+        <div transition:foo></div>
+    {/if}
\ No newline at end of file

From 9f3625a7b8459a5e624b26d149151c44f5248944 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 17 Jul 2022 17:26:54 +0800
Subject: [PATCH 33/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a85fe04b1..7143ed47af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852))
 * Add a11y warning `aria-proptypes` which checks ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
 * Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241))
+* Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 
 ## 3.49.0
 

From b517df14e4c9388db5f430aea105a532d332b438 Mon Sep 17 00:00:00 2001
From: Anthony Le Goas <anthony.legoas@gmail.com>
Date: Sun, 17 Jul 2022 11:27:35 +0200
Subject: [PATCH 34/89] [feat] check noninteractive roles on interactive
 elements (#5955)

* check noninteractive roles on interactive elements

* refactor to match the eslint-plugin-jsx-a11y implementation

* update test case

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 package-lock.json                             |  16 +
 package.json                                  |   1 +
 .../content/docs/05-accessibility-warnings.md |  11 +
 src/compiler/compile/compiler_warnings.ts     |   4 +
 src/compiler/compile/nodes/Element.ts         |  22 +-
 src/compiler/compile/utils/a11y.ts            | 137 +++
 .../input.svelte                              | 150 +++
 .../warnings.json                             | 887 ++++++++++++++++++
 8 files changed, 1222 insertions(+), 6 deletions(-)
 create mode 100644 src/compiler/compile/utils/a11y.ts
 create mode 100644 test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte
 create mode 100644 test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json

diff --git a/package-lock.json b/package-lock.json
index ab4b20ed59..01e23422bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "acorn": "^8.4.1",
         "agadoo": "^1.1.0",
         "aria-query": "^5.0.0",
+        "axobject-query": "^3.0.1",
         "code-red": "^0.2.5",
         "css-tree": "^1.1.2",
         "eslint": "^8.0.0",
@@ -812,6 +813,15 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "node_modules/axobject-query": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.0.1.tgz",
+      "integrity": "sha512-vy5JPSOibF9yAeC2PoemRdA1MuSXX7vX5osdoxKf/6OUeppAWekZ3JIJVNWFMH6wgj7uHYyqZUSqE/b/3JLV1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -5313,6 +5323,12 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axobject-query": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.0.1.tgz",
+      "integrity": "sha512-vy5JPSOibF9yAeC2PoemRdA1MuSXX7vX5osdoxKf/6OUeppAWekZ3JIJVNWFMH6wgj7uHYyqZUSqE/b/3JLV1A==",
+      "dev": true
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
diff --git a/package.json b/package.json
index ade713f4e3..9bdf7b3089 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,7 @@
     "acorn": "^8.4.1",
     "agadoo": "^1.1.0",
     "aria-query": "^5.0.0",
+    "axobject-query": "^3.0.1",
     "code-red": "^0.2.5",
     "css-tree": "^1.1.2",
     "eslint": "^8.0.0",
diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index 438f2e4743..495d0107c4 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -250,6 +250,17 @@ 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`.
+
+```sv
+<!-- A11y: <textarea> cannot have role 'listitem' -->
+<textarea role="listitem" />
+```
+
+---
+
 ### `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.
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 0d703e0d8d..5fc5faa8f1 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -115,6 +115,10 @@ export default {
 		code: 'a11y-no-redundant-roles',
 		message: `A11y: Redundant role '${role}'`
 	}),
+	a11y_no_interactive_element_to_noninteractive_role: (role: string | boolean, element: string) => ({
+		code: 'a11y-no-interactive-element-to-noninteractive-role',
+		message: `A11y: <${element}> cannot have role '${role}'`
+	}),
 	a11y_role_has_required_aria_props: (role: string, props: string[]) => ({
 		code: 'a11y-role-has-required-aria-props',
 		message: `A11y: Elements with the ARIA role "${role}" must have the following attributes defined: ${props.map(name => `"${name}"`).join(', ')}`
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 760e229b0f..e351a02499 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -24,13 +24,14 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
+import { is_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
 
-const aria_roles = 'alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox complementary contentinfo definition deletion dialog directory document emphasis feed figure form generic graphics-document graphics-object graphics-symbol grid gridcell group heading img link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status strong subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem'.split(' ');
+const aria_roles = roles.keys();
 const aria_role_set = new Set(aria_roles);
 const aria_role_abstract_set = new Set(roles.keys().filter(role => roles.get(role).abstract));
 
@@ -437,6 +438,11 @@ export default class Element extends Node {
 	validate_attributes_a11y() {
 		const { component, attributes } = this;
 
+		const attribute_map = new Map<string, Attribute>();
+		attributes.forEach(attribute => (
+			attribute_map.set(attribute.name, attribute)
+		));
+
 		attributes.forEach(attribute => {
 			if (attribute.is_spread) return;
 
@@ -479,12 +485,11 @@ export default class Element extends Node {
 					component.warn(attribute, compiler_warnings.a11y_misplaced_role(this.name));
 				}
 
-				const value = attribute.get_static_value();
+				const value = attribute.get_static_value() as ARIARoleDefintionKey;
 				
-				if (value && aria_role_abstract_set.has(value as ARIARoleDefintionKey)) {
+				if (value && aria_role_abstract_set.has(value)) {
 					component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value));
-				} else if (value && !aria_role_set.has(value as string)) {
-					// @ts-ignore
+				} else if (value && !aria_role_set.has(value)) {
 					const match = fuzzymatch(value, aria_roles);
 					component.warn(attribute, compiler_warnings.a11y_unknown_role(value, match));
 				}
@@ -506,7 +511,7 @@ export default class Element extends Node {
 				}
 
 				// role-has-required-aria-props
-				const role = roles.get(value as ARIARoleDefintionKey);
+				const role = roles.get(value);
 				if (role) {
 					const required_role_props = Object.keys(role.requiredProps);
 					const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop));
@@ -515,6 +520,11 @@ export default class Element extends Node {
 						component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(value as string, required_role_props));
 					}
 				}
+
+				// no-interactive-element-to-noninteractive-role
+				if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(value) || is_presentation_role(value))) {
+					component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(value, this.name));
+				}
 			}
 
 			// no-access-key
diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
new file mode 100644
index 0000000000..1e06608b54
--- /dev/null
+++ b/src/compiler/compile/utils/a11y.ts
@@ -0,0 +1,137 @@
+import {
+	ARIARoleDefintionKey,
+	roles as roles_map,
+	elementRoles,
+	ARIARoleRelationConcept
+} from 'aria-query';
+import { AXObjects, elementAXObjects } from 'axobject-query';
+import Attribute from '../nodes/Attribute';
+
+const roles = [...roles_map.keys()];
+
+const non_interactive_roles = new Set(
+	roles
+		.filter((name) => {
+			const role = roles_map.get(name);
+			return (
+				!roles_map.get(name).abstract &&
+				// 'toolbar' does not descend from widget, but it does support
+				// aria-activedescendant, thus in practice we treat it as a widget.
+				name !== 'toolbar' &&
+				!role.superClass.some((classes) => classes.includes('widget'))
+			);
+		})
+		.concat(
+			// The `progressbar` is descended from `widget`, but in practice, its
+			// value is always `readonly`, so we treat it as a non-interactive role.
+			'progressbar'
+		)
+);
+
+const interactive_roles = new Set(
+	roles
+		.filter((name) => {
+			const role = roles_map.get(name);
+			return (
+				!role.abstract &&
+				// The `progressbar` is descended from `widget`, but in practice, its
+				// value is always `readonly`, so we treat it as a non-interactive role.
+				name !== 'progressbar' &&
+				role.superClass.some((classes) => classes.includes('widget'))
+			);
+		})
+		.concat(
+			// 'toolbar' does not descend from widget, but it does support
+			// aria-activedescendant, thus in practice we treat it as a widget.
+			'toolbar'
+		)
+);
+
+export function is_non_interactive_roles(role: ARIARoleDefintionKey) {
+	return non_interactive_roles.has(role);
+}
+
+const presentation_roles = new Set(['presentation', 'none']);
+
+export function is_presentation_role(role: ARIARoleDefintionKey) {
+	return presentation_roles.has(role);
+}
+
+const non_interactive_element_role_schemas: ARIARoleRelationConcept[] = [];
+
+elementRoles.entries().forEach(([schema, roles]) => {
+	if ([...roles].every((role) => non_interactive_roles.has(role))) {
+		non_interactive_element_role_schemas.push(schema);
+	}
+});
+
+const interactive_element_role_schemas: ARIARoleRelationConcept[] = [];
+
+elementRoles.entries().forEach(([schema, roles]) => {
+	if ([...roles].every((role) => interactive_roles.has(role))) {
+		interactive_element_role_schemas.push(schema);
+	}
+});
+
+const interactive_ax_objects = new Set(
+	[...AXObjects.keys()].filter((name) => AXObjects.get(name).type === 'widget')
+);
+
+const interactive_element_ax_object_schemas: ARIARoleRelationConcept[] = [];
+
+elementAXObjects.entries().forEach(([schema, ax_object]) => {
+	if ([...ax_object].every((role) => interactive_ax_objects.has(role))) {
+		interactive_element_ax_object_schemas.push(schema);
+	}
+});
+
+function match_schema(
+	schema: ARIARoleRelationConcept,
+	tag_name: string,
+	attribute_map: Map<string, Attribute>
+) {
+	if (schema.name !== tag_name) return false;
+	if (!schema.attributes) return true;
+	return schema.attributes.every((schema_attribute) => {
+		const attribute = attribute_map.get(schema_attribute.name);
+		if (!attribute) return false;
+		if (
+			schema_attribute.value &&
+			schema_attribute.value !== attribute.get_static_value()
+		) {
+return false;
+}
+		return true;
+	});
+}
+
+export function is_interactive_element(
+	tag_name: string,
+	attribute_map: Map<string, Attribute>
+): boolean {
+	if (
+		interactive_element_role_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return true;
+	}
+
+	if (
+		non_interactive_element_role_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return false;
+	}
+
+	if (
+		interactive_element_ax_object_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return true;
+	}
+
+	return false;
+}
diff --git a/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte
new file mode 100644
index 0000000000..80b4fd9410
--- /dev/null
+++ b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte
@@ -0,0 +1,150 @@
+<!-- a -->
+<a href="test" role="article">link</a>
+<a href="test" role="banner">link</a>
+<a href="test" role="complementary">link</a>
+<a href="test" role="img">link</a>
+<a href="test" role="listitem">link</a>
+<a href="test" role="main">link</a>
+<a href="test" role="region">link</a>
+<a href="test" role="tooltip">link</a>
+<a href="test" role="button">link</a>
+
+<!-- button -->
+<button role="article">button</button>
+<button role="banner">button</button>
+<button role="complementary">button</button>
+<button role="img">button</button>
+<button role="listitem">button</button>
+<button role="main">button</button>
+<button role="region">button</button>
+<button role="tooltip">button</button>
+<button role="button">button</button>
+
+<!-- input -->
+<input role="article"/>
+<input role="banner"/>
+<input role="complementary"/>
+<input role="img"/>
+<input role="listitem"/>
+<input role="main"/>
+<input role="region"/>
+<input role="tooltip"/>
+<input role="button"/>
+
+<!-- select -->
+<select role="article"/>
+<select role="banner"/>
+<select role="complementary"/>
+<select role="img"/>
+<select role="listitem"/>
+<select role="main"/>
+<select role="region"/>
+<select role="tooltip"/>
+<select role="button"/>
+
+<!-- textarea -->
+<textarea role="article"/>
+<textarea role="banner"/>
+<textarea role="complementary"/>
+<textarea role="img"/>
+<textarea role="listitem"/>
+<textarea role="main"/>
+<textarea role="region"/>
+<textarea role="tooltip"/>
+<textarea role="button"/>
+
+<!-- HTML elements attributed with an abstract role -->
+<div role="command" />
+<div role="composite" />
+<div role="input" />
+<div role="landmark" />
+<div role="range" />
+<div role="roletype" />
+<div role="section" />
+<div role="sectionhead" />
+<div role="select" />
+<div role="structure" />
+<div role="tablist" />
+<div role="toolbar" />
+<div role="tree" />
+<div role="treegrid" />
+<div role="widget" />
+<div role="window" />
+
+<!-- HTML elements with an inherent, non-interactive role, assigned an interactive role. -->
+<main role="button" />
+<area role="button" alt="x" />
+<article role="button" />
+<article role="button" />
+<dd role="button" />
+<dfn role="button" />
+<dt role="button" />
+<fieldset role="button" />
+<figure role="button" />
+<form role="button" />
+<frame role="button" />
+<h1 role="button">title</h1>
+<h2 role="button">title</h2>
+<h3 role="button">title</h3>
+<h4 role="button">title</h4>
+<h5 role="button">title</h5>
+<h6 role="button">title</h6>
+<hr role="button" />
+<img role="button" alt="x" />
+<li role="button" />
+<li role="presentation" />
+<nav role="button" />
+<ol role="button" />
+<table role="button" />
+<tbody role="button" />
+<td role="button" />
+<tfoot role="button" />
+<thead role="button" />
+<ul role="button" />
+
+<!-- HTML elements attributed with a non-interactive role -->
+<div role="alert" />
+<div role="alertdialog" />
+<div role="application" />
+<div role="article" />
+<div role="banner" />
+<div role="cell" />
+<div role="complementary" />
+<div role="contentinfo" />
+<div role="definition" />
+<div role="dialog" />
+<div role="directory" />
+<div role="document" />
+<div role="feed" />
+<div role="figure" />
+<div role="form" />
+<div role="group" />
+<div role="heading" aria-level="1" />
+<div role="img" />
+<div role="list" />
+<div role="listitem" />
+<div role="log" />
+<div role="main" />
+<div role="marquee" />
+<div role="math" />
+<div role="navigation" />
+<div role="note" />
+<div role="region" />
+<div role="rowgroup" />
+<div role="search" />
+<div role="separator" />
+<div role="scrollbar" aria-controls="x" aria-valuenow="0" />
+<div role="status" />
+<div role="table" />
+<div role="tabpanel" />
+<div role="term" />
+<div role="timer" />
+<div role="tooltip" />
+
+<!-- not valid -->
+<menuitem role="listitem" />
+<option class="foo" role="listitem" />
+<select class="foo" role="listitem" />
+<summary role="listitem" />
+<textarea class="foo" role="listitem" />
+<tr role="listitem" />
diff --git a/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json
new file mode 100644
index 0000000000..f702a4a31d
--- /dev/null
+++ b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json
@@ -0,0 +1,887 @@
+[
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 49,
+			"column": 38,
+			"line": 2
+		},
+		"message": "A11y: <a> cannot have role 'article'",
+		"pos": 11,
+		"start": {
+			"character": 11,
+			"column": 0,
+			"line": 2
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 87,
+			"column": 37,
+			"line": 3
+		},
+		"message": "A11y: <a> cannot have role 'banner'",
+		"pos": 50,
+		"start": {
+			"character": 50,
+			"column": 0,
+			"line": 3
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 132,
+			"column": 44,
+			"line": 4
+		},
+		"message": "A11y: <a> cannot have role 'complementary'",
+		"pos": 88,
+		"start": {
+			"character": 88,
+			"column": 0,
+			"line": 4
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 167,
+			"column": 34,
+			"line": 5
+		},
+		"message": "A11y: <a> cannot have role 'img'",
+		"pos": 133,
+		"start": {
+			"character": 133,
+			"column": 0,
+			"line": 5
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 207,
+			"column": 39,
+			"line": 6
+		},
+		"message": "A11y: <a> cannot have role 'listitem'",
+		"pos": 168,
+		"start": {
+			"character": 168,
+			"column": 0,
+			"line": 6
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 243,
+			"column": 35,
+			"line": 7
+		},
+		"message": "A11y: <a> cannot have role 'main'",
+		"pos": 208,
+		"start": {
+			"character": 208,
+			"column": 0,
+			"line": 7
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 281,
+			"column": 37,
+			"line": 8
+		},
+		"message": "A11y: <a> cannot have role 'region'",
+		"pos": 244,
+		"start": {
+			"character": 244,
+			"column": 0,
+			"line": 8
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 320,
+			"column": 38,
+			"line": 9
+		},
+		"message": "A11y: <a> cannot have role 'tooltip'",
+		"pos": 282,
+		"start": {
+			"character": 282,
+			"column": 0,
+			"line": 9
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 414,
+			"column": 38,
+			"line": 13
+		},
+		"message": "A11y: <button> cannot have role 'article'",
+		"pos": 376,
+		"start": {
+			"character": 376,
+			"column": 0,
+			"line": 13
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 452,
+			"column": 37,
+			"line": 14
+		},
+		"message": "A11y: <button> cannot have role 'banner'",
+		"pos": 415,
+		"start": {
+			"character": 415,
+			"column": 0,
+			"line": 14
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 497,
+			"column": 44,
+			"line": 15
+		},
+		"message": "A11y: <button> cannot have role 'complementary'",
+		"pos": 453,
+		"start": {
+			"character": 453,
+			"column": 0,
+			"line": 15
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 532,
+			"column": 34,
+			"line": 16
+		},
+		"message": "A11y: <button> cannot have role 'img'",
+		"pos": 498,
+		"start": {
+			"character": 498,
+			"column": 0,
+			"line": 16
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 572,
+			"column": 39,
+			"line": 17
+		},
+		"message": "A11y: <button> cannot have role 'listitem'",
+		"pos": 533,
+		"start": {
+			"character": 533,
+			"column": 0,
+			"line": 17
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 608,
+			"column": 35,
+			"line": 18
+		},
+		"message": "A11y: <button> cannot have role 'main'",
+		"pos": 573,
+		"start": {
+			"character": 573,
+			"column": 0,
+			"line": 18
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 646,
+			"column": 37,
+			"line": 19
+		},
+		"message": "A11y: <button> cannot have role 'region'",
+		"pos": 609,
+		"start": {
+			"character": 609,
+			"column": 0,
+			"line": 19
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 685,
+			"column": 38,
+			"line": 20
+		},
+		"message": "A11y: <button> cannot have role 'tooltip'",
+		"pos": 647,
+		"start": {
+			"character": 647,
+			"column": 0,
+			"line": 20
+		}
+	},
+	{
+		"code": "a11y-no-redundant-roles",
+		"end": {
+			"character": 707,
+			"column": 21,
+			"line": 21
+		},
+		"message": "A11y: Redundant role 'button'",
+		"pos": 694,
+		"start": {
+			"character": 694,
+			"column": 8,
+			"line": 21
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 763,
+			"column": 23,
+			"line": 24
+		},
+		"message": "A11y: <input> cannot have role 'article'",
+		"pos": 740,
+		"start": {
+			"character": 740,
+			"column": 0,
+			"line": 24
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 786,
+			"column": 22,
+			"line": 25
+		},
+		"message": "A11y: <input> cannot have role 'banner'",
+		"pos": 764,
+		"start": {
+			"character": 764,
+			"column": 0,
+			"line": 25
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 816,
+			"column": 29,
+			"line": 26
+		},
+		"message": "A11y: <input> cannot have role 'complementary'",
+		"pos": 787,
+		"start": {
+			"character": 787,
+			"column": 0,
+			"line": 26
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 836,
+			"column": 19,
+			"line": 27
+		},
+		"message": "A11y: <input> cannot have role 'img'",
+		"pos": 817,
+		"start": {
+			"character": 817,
+			"column": 0,
+			"line": 27
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 861,
+			"column": 24,
+			"line": 28
+		},
+		"message": "A11y: <input> cannot have role 'listitem'",
+		"pos": 837,
+		"start": {
+			"character": 837,
+			"column": 0,
+			"line": 28
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 882,
+			"column": 20,
+			"line": 29
+		},
+		"message": "A11y: <input> cannot have role 'main'",
+		"pos": 862,
+		"start": {
+			"character": 862,
+			"column": 0,
+			"line": 29
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 905,
+			"column": 22,
+			"line": 30
+		},
+		"message": "A11y: <input> cannot have role 'region'",
+		"pos": 883,
+		"start": {
+			"character": 883,
+			"column": 0,
+			"line": 30
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 929,
+			"column": 23,
+			"line": 31
+		},
+		"message": "A11y: <input> cannot have role 'tooltip'",
+		"pos": 906,
+		"start": {
+			"character": 906,
+			"column": 0,
+			"line": 31
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 994,
+			"column": 24,
+			"line": 35
+		},
+		"message": "A11y: <select> cannot have role 'article'",
+		"pos": 970,
+		"start": {
+			"character": 970,
+			"column": 0,
+			"line": 35
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1018,
+			"column": 23,
+			"line": 36
+		},
+		"message": "A11y: <select> cannot have role 'banner'",
+		"pos": 995,
+		"start": {
+			"character": 995,
+			"column": 0,
+			"line": 36
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1049,
+			"column": 30,
+			"line": 37
+		},
+		"message": "A11y: <select> cannot have role 'complementary'",
+		"pos": 1019,
+		"start": {
+			"character": 1019,
+			"column": 0,
+			"line": 37
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1070,
+			"column": 20,
+			"line": 38
+		},
+		"message": "A11y: <select> cannot have role 'img'",
+		"pos": 1050,
+		"start": {
+			"character": 1050,
+			"column": 0,
+			"line": 38
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1096,
+			"column": 25,
+			"line": 39
+		},
+		"message": "A11y: <select> cannot have role 'listitem'",
+		"pos": 1071,
+		"start": {
+			"character": 1071,
+			"column": 0,
+			"line": 39
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1118,
+			"column": 21,
+			"line": 40
+		},
+		"message": "A11y: <select> cannot have role 'main'",
+		"pos": 1097,
+		"start": {
+			"character": 1097,
+			"column": 0,
+			"line": 40
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1142,
+			"column": 23,
+			"line": 41
+		},
+		"message": "A11y: <select> cannot have role 'region'",
+		"pos": 1119,
+		"start": {
+			"character": 1119,
+			"column": 0,
+			"line": 41
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1167,
+			"column": 24,
+			"line": 42
+		},
+		"message": "A11y: <select> cannot have role 'tooltip'",
+		"pos": 1143,
+		"start": {
+			"character": 1143,
+			"column": 0,
+			"line": 42
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1237,
+			"column": 26,
+			"line": 46
+		},
+		"message": "A11y: <textarea> cannot have role 'article'",
+		"pos": 1211,
+		"start": {
+			"character": 1211,
+			"column": 0,
+			"line": 46
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1263,
+			"column": 25,
+			"line": 47
+		},
+		"message": "A11y: <textarea> cannot have role 'banner'",
+		"pos": 1238,
+		"start": {
+			"character": 1238,
+			"column": 0,
+			"line": 47
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1296,
+			"column": 32,
+			"line": 48
+		},
+		"message": "A11y: <textarea> cannot have role 'complementary'",
+		"pos": 1264,
+		"start": {
+			"character": 1264,
+			"column": 0,
+			"line": 48
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1319,
+			"column": 22,
+			"line": 49
+		},
+		"message": "A11y: <textarea> cannot have role 'img'",
+		"pos": 1297,
+		"start": {
+			"character": 1297,
+			"column": 0,
+			"line": 49
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1347,
+			"column": 27,
+			"line": 50
+		},
+		"message": "A11y: <textarea> cannot have role 'listitem'",
+		"pos": 1320,
+		"start": {
+			"character": 1320,
+			"column": 0,
+			"line": 50
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1371,
+			"column": 23,
+			"line": 51
+		},
+		"message": "A11y: <textarea> cannot have role 'main'",
+		"pos": 1348,
+		"start": {
+			"character": 1348,
+			"column": 0,
+			"line": 51
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1397,
+			"column": 25,
+			"line": 52
+		},
+		"message": "A11y: <textarea> cannot have role 'region'",
+		"pos": 1372,
+		"start": {
+			"character": 1372,
+			"column": 0,
+			"line": 52
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 1424,
+			"column": 26,
+			"line": 53
+		},
+		"message": "A11y: <textarea> cannot have role 'tooltip'",
+		"pos": 1398,
+		"start": {
+			"character": 1398,
+			"column": 0,
+			"line": 53
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1527,
+			"column": 19,
+			"line": 57
+		},
+		"message": "A11y: Abstract role 'command' is forbidden",
+		"pos": 1513,
+		"start": {
+			"character": 1513,
+			"column": 5,
+			"line": 57
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1552,
+			"column": 21,
+			"line": 58
+		},
+		"message": "A11y: Abstract role 'composite' is forbidden",
+		"pos": 1536,
+		"start": {
+			"character": 1536,
+			"column": 5,
+			"line": 58
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1573,
+			"column": 17,
+			"line": 59
+		},
+		"message": "A11y: Abstract role 'input' is forbidden",
+		"pos": 1561,
+		"start": {
+			"character": 1561,
+			"column": 5,
+			"line": 59
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1597,
+			"column": 20,
+			"line": 60
+		},
+		"message": "A11y: Abstract role 'landmark' is forbidden",
+		"pos": 1582,
+		"start": {
+			"character": 1582,
+			"column": 5,
+			"line": 60
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1618,
+			"column": 17,
+			"line": 61
+		},
+		"message": "A11y: Abstract role 'range' is forbidden",
+		"pos": 1606,
+		"start": {
+			"character": 1606,
+			"column": 5,
+			"line": 61
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1642,
+			"column": 20,
+			"line": 62
+		},
+		"message": "A11y: Abstract role 'roletype' is forbidden",
+		"pos": 1627,
+		"start": {
+			"character": 1627,
+			"column": 5,
+			"line": 62
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1665,
+			"column": 19,
+			"line": 63
+		},
+		"message": "A11y: Abstract role 'section' is forbidden",
+		"pos": 1651,
+		"start": {
+			"character": 1651,
+			"column": 5,
+			"line": 63
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1692,
+			"column": 23,
+			"line": 64
+		},
+		"message": "A11y: Abstract role 'sectionhead' is forbidden",
+		"pos": 1674,
+		"start": {
+			"character": 1674,
+			"column": 5,
+			"line": 64
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1714,
+			"column": 18,
+			"line": 65
+		},
+		"message": "A11y: Abstract role 'select' is forbidden",
+		"pos": 1701,
+		"start": {
+			"character": 1701,
+			"column": 5,
+			"line": 65
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1739,
+			"column": 21,
+			"line": 66
+		},
+		"message": "A11y: Abstract role 'structure' is forbidden",
+		"pos": 1723,
+		"start": {
+			"character": 1723,
+			"column": 5,
+			"line": 66
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1851,
+			"column": 18,
+			"line": 71
+		},
+		"message": "A11y: Abstract role 'widget' is forbidden",
+		"pos": 1838,
+		"start": {
+			"character": 1838,
+			"column": 5,
+			"line": 71
+		}
+	},
+	{
+		"code": "a11y-no-abstract-role",
+		"end": {
+			"character": 1873,
+			"column": 18,
+			"line": 72
+		},
+		"message": "A11y: Abstract role 'window' is forbidden",
+		"pos": 1860,
+		"start": {
+			"character": 1860,
+			"column": 5,
+			"line": 72
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 3695,
+			"column": 28,
+			"line": 145
+		},
+		"message": "A11y: <menuitem> cannot have role 'listitem'",
+		"pos": 3667,
+		"start": {
+			"character": 3667,
+			"column": 0,
+			"line": 145
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 3734,
+			"column": 38,
+			"line": 146
+		},
+		"message": "A11y: <option> cannot have role 'listitem'",
+		"pos": 3696,
+		"start": {
+			"character": 3696,
+			"column": 0,
+			"line": 146
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 3773,
+			"column": 38,
+			"line": 147
+		},
+		"message": "A11y: <select> cannot have role 'listitem'",
+		"pos": 3735,
+		"start": {
+			"character": 3735,
+			"column": 0,
+			"line": 147
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 3801,
+			"column": 27,
+			"line": 148
+		},
+		"message": "A11y: <summary> cannot have role 'listitem'",
+		"pos": 3774,
+		"start": {
+			"character": 3774,
+			"column": 0,
+			"line": 148
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 3842,
+			"column": 40,
+			"line": 149
+		},
+		"message": "A11y: <textarea> cannot have role 'listitem'",
+		"pos": 3802,
+		"start": {
+			"character": 3802,
+			"column": 0,
+			"line": 149
+		}
+	},
+	{
+		"code": "a11y-no-interactive-element-to-noninteractive-role",
+		"end": {
+			"character": 3865,
+			"column": 22,
+			"line": 150
+		},
+		"message": "A11y: <tr> cannot have role 'listitem'",
+		"pos": 3843,
+		"start": {
+			"character": 3843,
+			"column": 0,
+			"line": 150
+		}
+	}
+]

From 791533e7a57102f77d62af8356b169fb428af798 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 17 Jul 2022 17:28:56 +0800
Subject: [PATCH 35/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7143ed47af..f85f615380 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852))
 * Add a11y warning `aria-proptypes` which checks ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
 * Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241))
+* Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 
 ## 3.49.0

From 52f5005cfd2f6b88da79025829bab133ef87e3dc Mon Sep 17 00:00:00 2001
From: Mlocik97 <Mlocik97@gmail.com>
Date: Tue, 19 Jul 2022 09:26:57 +0200
Subject: [PATCH 36/89] [docs] update port in "Svelte for new developers" blog.
 (#7697)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 site/content/blog/2019-04-16-svelte-for-new-developers.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md
index 0a01474bbd..834e042138 100644
--- a/site/content/blog/2019-04-16-svelte-for-new-developers.md
+++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -61,7 +61,7 @@ We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/
 On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):
 
 ```bash
-npm init vite my-svelte-project -- --template svelte
+npm create vite@latest my-svelte-project -- --template svelte
 cd my-svelte-project
 npm install
 ```
@@ -78,7 +78,7 @@ npm run dev
 
 Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
 
-Speaking of which, open a browser and navigate to http://localhost:3000. This is your application running on a local *web server* (hence 'localhost') on port 3000.
+Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local *web server* (hence 'localhost') on port 5173.
 
 Try changing `src/App.svelte` and saving it. The application will update with your changes.
 

From 91b20b9c2eedc28b3989ac5b013857c64cc22e36 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 20 Jul 2022 00:01:08 +0800
Subject: [PATCH 37/89] [fix] error when using combinator incorrectly (#7650)

* error when using combinator incorrectly

* add new test case
---
 src/compiler/compile/compiler_errors.ts             |  4 ++++
 src/compiler/compile/css/Selector.ts                | 12 ++++++++++++
 .../css-invalid-combinator-selector-1/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-1/input.svelte  | 13 +++++++++++++
 .../css-invalid-combinator-selector-2/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-2/input.svelte  | 11 +++++++++++
 .../css-invalid-combinator-selector-3/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-3/input.svelte  |  9 +++++++++
 .../css-invalid-combinator-selector-4/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-4/input.svelte  |  7 +++++++
 10 files changed, 92 insertions(+)
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-1/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-1/input.svelte
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-2/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-2/input.svelte
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-3/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-3/input.svelte
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-4/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-4/input.svelte

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index ea95c8cbec..c1a7d8bc5c 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -234,6 +234,10 @@ export default {
 		code: 'css-invalid-global-selector',
 		message: ':global(...) must contain a single selector'
 	},
+	css_invalid_selector: (selector: string) => ({
+		code: 'css-invalid-selector',
+		message: `Invalid selector "${selector}"`
+	}),
 	duplicate_animation: {
 		code: 'duplicate-animation',
 		message: "An element can only have one 'animate' directive"
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index b00fbc5548..d61ba1f510 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -145,6 +145,7 @@ export default class Selector {
 		}
 
 		this.validate_global_with_multiple_selectors(component);
+		this.validate_invalid_combinator_without_selector(component);
 	}
 
 	validate_global_with_multiple_selectors(component: Component) {
@@ -163,6 +164,17 @@ export default class Selector {
 			}
 		}
 	}
+	validate_invalid_combinator_without_selector(component: Component) {
+		for (let i = 0; i < this.blocks.length; i++) {
+			const block = this.blocks[i];
+			if (block.combinator && block.selectors.length === 0) {
+				component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end)));
+			}
+			if (!block.combinator && block.selectors.length === 0) {
+				component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end)));
+			}
+		}
+	}
 
 	get_amount_class_specificity_increased() {
 		let count = 0;
diff --git a/test/validator/samples/css-invalid-combinator-selector-1/errors.json b/test/validator/samples/css-invalid-combinator-selector-1/errors.json
new file mode 100644
index 0000000000..b50fb678f0
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"> span\"",
+		"start": { "line": 10, "column": 1, "character": 88 },
+		"end": { "line": 10, "column": 7, "character": 94 },
+		"pos": 88
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-1/input.svelte b/test/validator/samples/css-invalid-combinator-selector-1/input.svelte
new file mode 100644
index 0000000000..614b9d932c
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-1/input.svelte
@@ -0,0 +1,13 @@
+<p><span /></p>
+
+<style>
+	p > span {
+		color: red;
+	}
+	:has(> span) {
+		color: red;
+	}
+	> span {
+		color: red;
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-combinator-selector-2/errors.json b/test/validator/samples/css-invalid-combinator-selector-2/errors.json
new file mode 100644
index 0000000000..8c55da03c8
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"+ p\"",
+		"start": { "line": 8, "column": 1, "character": 68 },
+		"end": { "line": 8, "column": 4, "character": 71 },
+		"pos": 68
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-2/input.svelte b/test/validator/samples/css-invalid-combinator-selector-2/input.svelte
new file mode 100644
index 0000000000..9cc20ce817
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-2/input.svelte
@@ -0,0 +1,11 @@
+<p><span /></p>
+<p><span /></p>
+
+<style>
+	p + p {
+		color: red;
+	}
+	+ p {
+		color: red;
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-combinator-selector-3/errors.json b/test/validator/samples/css-invalid-combinator-selector-3/errors.json
new file mode 100644
index 0000000000..869cc09c95
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-3/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"> span\"",
+		"start": { "line": 5, "column": 2, "character": 44 },
+		"end": { "line": 5, "column": 8, "character": 50 },
+		"pos": 44
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-3/input.svelte b/test/validator/samples/css-invalid-combinator-selector-3/input.svelte
new file mode 100644
index 0000000000..fdd4870921
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-3/input.svelte
@@ -0,0 +1,9 @@
+<p><span /></p>
+
+<style>
+	@media screen {
+		> span {
+			color: red;
+		}
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-combinator-selector-4/errors.json b/test/validator/samples/css-invalid-combinator-selector-4/errors.json
new file mode 100644
index 0000000000..239704f48e
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-4/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"p >\"",
+		"start": { "line": 4, "column": 1, "character": 26 },
+		"end": { "line": 4, "column": 4, "character": 29 },
+		"pos": 26
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-4/input.svelte b/test/validator/samples/css-invalid-combinator-selector-4/input.svelte
new file mode 100644
index 0000000000..db04318f73
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-4/input.svelte
@@ -0,0 +1,7 @@
+<p><span /></p>
+
+<style>
+	p > {
+		color: red;
+	}
+</style>

From 01ba78a6fb7d3db12c0c1bf39e2d3308972df5d3 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 20 Jul 2022 00:02:40 +0800
Subject: [PATCH 38/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f85f615380..03aeeac579 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241))
 * Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
+* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 
 ## 3.49.0
 

From bb02a22d3e295bdd8eb8f291ab724616a106d45f Mon Sep 17 00:00:00 2001
From: Hofer Ivan <ivan.hofer@outlook.com>
Date: Mon, 25 Jul 2022 21:09:03 +0200
Subject: [PATCH 39/89] [feat] add convenience type for `ComponentEvents`
 (#7702)

---
 generate-type-definitions.js |  2 +-
 src/runtime/internal/dev.ts  | 26 ++++++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/generate-type-definitions.js b/generate-type-definitions.js
index 00b079eb5d..d8f6e9f826 100644
--- a/generate-type-definitions.js
+++ b/generate-type-definitions.js
@@ -16,7 +16,7 @@ function modify(path, modifyFn) {
 
 modify(
     'types/runtime/index.d.ts',
-    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps')
+    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
 );
 modify(
     'types/compiler/index.d.ts',
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index 5b00e7dc5b..df40f94230 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -264,18 +264,18 @@ export class SvelteComponentTyped<
 /**
  * Convenience type to get the type of a Svelte component. Useful for example in combination with
  * dynamic components using `<svelte:component>`.
- * 
+ *
  * Example:
  * ```html
  * <script lang="ts">
  * 	import type { ComponentType, SvelteComponentTyped } from 'svelte';
  * 	import Component1 from './Component1.svelte';
  * 	import Component2 from './Component2.svelte';
- * 
+ *
  * 	const component: ComponentType = someLogic() ? Component1 : Component2;
  * 	const componentOfCertainSubType: ComponentType<SvelteComponentTyped<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
  * </script>
- * 
+ *
  * <svelte:component this={component} />
  * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
  * ```
@@ -292,7 +292,7 @@ export type ComponentType<Component extends SvelteComponentTyped = SvelteCompone
  * <script lang="ts">
  * 	import type { ComponentProps } from 'svelte';
  * 	import Component from './Component.svelte';
- * 
+ *
  * 	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
  * </script>
  * ```
@@ -301,6 +301,24 @@ export type ComponentProps<Component extends SvelteComponent> = Component extend
 	? Props
 	: never;
 
+/**
+ * Convenience type to get the events the given component expects. Example:
+ * ```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<Component extends SvelteComponent> =
+	Component extends SvelteComponentTyped<any, infer Events> ? Events : never;
+
 export function loop_guard(timeout) {
 	const start = Date.now();
 	return () => {

From 5a725713f7126e300928a0850a65cf18e50384a5 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 25 Jul 2022 21:10:13 +0200
Subject: [PATCH 40/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03aeeac579..c9f06c5f72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
+* Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 
 ## 3.49.0
 

From 9ad416be94d0b8cf1a78f7f3714a84badbc9329f Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Wed, 27 Jul 2022 16:56:37 +0800
Subject: [PATCH 41/89] [chore] upgrade source-map (#7729)

Fixes #7728
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 01e23422bb..dfff153e97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "periscopic": "^3.0.4",
         "puppeteer": "^2.0.0",
         "rollup": "^1.27.14",
-        "source-map": "^0.7.3",
+        "source-map": "^0.7.4",
         "source-map-support": "^0.5.13",
         "sourcemap-codec": "^1.4.8",
         "tiny-glob": "^0.2.6",
@@ -4047,9 +4047,9 @@
       }
     },
     "node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "dev": true,
       "engines": {
         "node": ">= 8"
@@ -7832,9 +7832,9 @@
       "dev": true
     },
     "source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "dev": true
     },
     "source-map-support": {
diff --git a/package.json b/package.json
index 9bdf7b3089..4a4d5266c3 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
     "periscopic": "^3.0.4",
     "puppeteer": "^2.0.0",
     "rollup": "^1.27.14",
-    "source-map": "^0.7.3",
+    "source-map": "^0.7.4",
     "source-map-support": "^0.5.13",
     "sourcemap-codec": "^1.4.8",
     "tiny-glob": "^0.2.6",

From 5dd703fe811a94ea90080edec220d7ee9a09d219 Mon Sep 17 00:00:00 2001
From: qinmu <magenta2127@gmail.com>
Date: Fri, 29 Jul 2022 00:02:15 +0800
Subject: [PATCH 42/89] [fix] handle arrow function on slot inside
 svelte:fragment (#7667)

Fixes #7485
---
 .../compile/nodes/shared/Expression.ts        |  2 +-
 .../Inner.svelte                              |  8 ++++++
 .../Outer.svelte                              | 12 +++++++++
 .../_config.js                                | 27 +++++++++++++++++++
 .../main.svelte                               | 12 +++++++++
 5 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/main.svelte

diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index a773355e31..0603c15589 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -323,7 +323,7 @@ export default class Expression {
 
 							const func_expression = func_declaration[0];
 
-							if (node.type === 'InlineComponent') {
+							if (node.type === 'InlineComponent' || node.type === 'SlotTemplate') {
 								// <Comp let:data />
 								this.replace(func_expression);
 							} else {
diff --git a/test/runtime/samples/component-slot-let-inline-function/Inner.svelte b/test/runtime/samples/component-slot-let-inline-function/Inner.svelte
new file mode 100644
index 0000000000..5a30e1855b
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/Inner.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let log;
+  export let b;
+  function innerCall(a) {
+    log(`a: ${a}, b: ${b}`);
+  }
+</script>
+<slot name="inner_slot" {innerCall} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-inline-function/Outer.svelte b/test/runtime/samples/component-slot-let-inline-function/Outer.svelte
new file mode 100644
index 0000000000..40ed99ca63
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/Outer.svelte
@@ -0,0 +1,12 @@
+<script>
+  import Inner from './Inner.svelte'
+  export let log;
+  export let a;
+	export let b;
+</script>
+
+<Inner {log} {b}>
+  <svelte:fragment let:innerCall slot="inner_slot">
+    <slot outerCall={() => innerCall(a)} />
+  </svelte:fragment>
+</Inner>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-inline-function/_config.js b/test/runtime/samples/component-slot-let-inline-function/_config.js
new file mode 100644
index 0000000000..55318efaea
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/_config.js
@@ -0,0 +1,27 @@
+let logs;
+function log(value) {
+	logs.push(value);
+}
+
+export default {
+	html: '<button>click me</button>',
+	props: {
+		a: 'a',
+		b: 'b',
+		log
+	},
+	before_test() {
+		logs = [];
+	},
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.deepEqual(logs, ['a: a, b: b']);
+
+		component.a = '1'; 
+		component.b = '2';
+		await button.dispatchEvent(new window.MouseEvent('click'));
+		assert.deepEqual(logs, ['a: a, b: b', 'a: 1, b: 2']);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-inline-function/main.svelte b/test/runtime/samples/component-slot-let-inline-function/main.svelte
new file mode 100644
index 0000000000..6ea417d0f2
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Outer from "./Outer.svelte";
+	export let log = [];
+	export let a;
+	export let b;
+</script>
+
+<Outer let:outerCall {log} {a} {b}>
+	<button on:click={outerCall}>
+		click me
+	</button>
+</Outer>

From 12cbaea9e56a6724acba9daf4d2ebf991dc7591e Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 28 Jul 2022 18:03:13 +0200
Subject: [PATCH 43/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9f06c5f72..43d74063e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
+* Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 
 ## 3.49.0
 

From 1198bae8351f1b9c3d9850a67617b0816f624988 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 28 Jul 2022 09:08:59 -0700
Subject: [PATCH 44/89] Bump svelte from 3.43.0 to 3.49.0 (#7689)

Bumps [svelte](https://github.com/sveltejs/svelte) from 3.43.0 to 3.49.0.
- [Release notes](https://github.com/sveltejs/svelte/releases)
- [Changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
- [Commits](https://github.com/sveltejs/svelte/compare/v3.43.0...v3.49.0)

---
updated-dependencies:
- dependency-name: svelte
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dfff153e97..0db7287a64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4248,9 +4248,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.43.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
-      "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true,
       "peer": true,
       "engines": {
@@ -7988,9 +7988,9 @@
       "dev": true
     },
     "svelte": {
-      "version": "3.43.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
-      "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true,
       "peer": true
     },

From 439bbf87e33e6cf22abb08689fea96fc58f9e9cb Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 1 Aug 2022 00:14:26 -0700
Subject: [PATCH 45/89] [feat] add SveltePreprocessor utility type (#7742)

---
 src/compiler/preprocess/types.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/compiler/preprocess/types.ts b/src/compiler/preprocess/types.ts
index b1e605238d..faef6c74ed 100644
--- a/src/compiler/preprocess/types.ts
+++ b/src/compiler/preprocess/types.ts
@@ -40,3 +40,10 @@ export interface PreprocessorGroup {
 	style?: Preprocessor;
 	script?: Preprocessor;
 }
+
+export interface SveltePreprocessor<
+	PreprocessorType extends keyof PreprocessorGroup,
+	Options = any
+> {
+	(options?: Options): Required<Pick<PreprocessorGroup, PreprocessorType>>;
+}

From 7a9b8d03ee80b06b174825962c1a1cd9788635db Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 1 Aug 2022 09:15:34 +0200
Subject: [PATCH 46/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43d74063e4..5df9239972 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
+* Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 
 ## 3.49.0

From 474ed42b2483e24e3b9e93206994050fe71d1d97 Mon Sep 17 00:00:00 2001
From: Script Raccoon <54458975+ScriptRaccoon@users.noreply.github.com>
Date: Tue, 2 Aug 2022 07:45:45 +0200
Subject: [PATCH 47/89] [fix] typo in transition docs (#7739)

---
 site/content/docs/02-template-syntax.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index f2e71ecbe0..1094e25184 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1006,7 +1006,7 @@ Like actions, transitions can have parameters.
 ```sv
 {#if visible}
 	<div transition:fade="{{ duration: 2000 }}">
-		flies in, fades out over two seconds
+		fades in and out over two seconds
 	</div>
 {/if}
 ```

From 8513e299ef3fb2581b21f61f7795bfd5eb582bd8 Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <danielericsandoval@gmail.com>
Date: Tue, 2 Aug 2022 09:30:05 -0600
Subject: [PATCH 48/89] [docs] "What's new in Svelte" August newsletter (#7741)

---
 ...2-08-01-whats-new-in-svelte-august-2022.md | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md

diff --git a/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
new file mode 100644
index 0000000000..dfea1bcdd2
--- /dev/null
+++ b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
@@ -0,0 +1,119 @@
+---
+title: "What's new in Svelte: August 2022"
+description: "Changes to SvelteKit's `load` before 1.0 plus support for Vite 3 and `vite.config.js`!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+There's a lot to cover this month... big changes are coming to SvelteKit's design before 1.0 can be completed. If you haven't already, check out Rich's Discussion, [Fixing `load`, and tightening up SvelteKit's design before 1.0 #5748](https://github.com/sveltejs/kit/discussions/5748).
+
+Also, [@dummdidumm](https://github.com/dummdidumm) (Simon H) [has joined Vercel to work on Svelte full-time](https://twitter.com/dummdidumm_/status/1549041206348222464) and [@tcc-sejohnson](https://github.com/tcc-sejohnson) has joined the group of SvelteKit maintainers! We're super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!
+
+Now onto the rest of the updates...
+
+## What's new in SvelteKit
+- Dynamically imported styles are now included during SSR ([#5138](https://github.com/sveltejs/kit/pull/5138))
+- Improvements to routes and prop updates to prevent unnecessary rerendering ([#5654](https://github.com/sveltejs/kit/pull/5654), [#5671](https://github.com/sveltejs/kit/pull/5671))
+- Lots of improvements to error handling ([#4665](https://github.com/sveltejs/kit/pull/4665), [#5622](https://github.com/sveltejs/kit/pull/5622), [#5619](https://github.com/sveltejs/kit/pull/5619), [#5616](https://github.com/sveltejs/kit/pull/5616))
+- Custom Vite modes are now respected in SSR builds ([#5602](https://github.com/sveltejs/kit/pull/5602))
+- Custom Vite config locations are now supported ([#5705](https://github.com/sveltejs/kit/pull/5705))
+- Private environment variables (aka "secrets") are now much more secure. Now if you accidentally import them to client-side code, you'll see an error ([#5663](https://github.com/sveltejs/kit/pull/5663), [Docs](https://kit.svelte.dev/docs/configuration#env))
+- Vercel's v3 build output API is now being used in `adapter-vercel` ([#5514](https://github.com/sveltejs/kit/pull/5514))
+- `vite-plugin-svelte` has reached 1.0 and now supports Vite 3. You'll notice new default ports for `dev` (port 5173) and `preview` (port 4173) ([#5005](https://github.com/sveltejs/kit/pull/5005), [vite-plugin-svelte CHANGELOG](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md))
+
+**Breaking changes:**
+- `mode`, `prod` and `server` are no longer available in `$app/env` ([#5602](https://github.com/sveltejs/kit/pull/5602))
+- `svelte-kit` CLI commands are now run using the `vite` command and `vite.config.js` is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook ([#5332](https://github.com/sveltejs/kit/pull/5332), [Docs](https://kit.svelte.dev/docs/project-structure#project-files-vite-config-js))
+- `endpointExtensions` is now `moduleExtensions` and can be used to filter param matchers ([#5085](https://github.com/sveltejs/kit/pull/5085), [Docs](https://kit.svelte.dev/docs/configuration#moduleextensions))
+- Node 16.9 is now the minimum version for SvelteKit ([#5395](https://github.com/sveltejs/kit/pull/5395))
+- %-encoded filenames are now allowed. If you had a `%` in your route, you must now encode it with `%25` ([#5056](https://github.com/sveltejs/kit/pull/5056))
+- Endpoint method names are now uppercased to match HTTP specifications ([#5513](https://github.com/sveltejs/kit/pull/5513), [Docs](https://kit.svelte.dev/docs/routing#endpoints))
+- `writeStatic` has been removed to align with Vite's config ([#5618](https://github.com/sveltejs/kit/pull/5618))
+- `transformPage` is now `transformPageChunk` ([#5657](https://github.com/sveltejs/kit/pull/5657), [Docs](https://kit.svelte.dev/docs/hooks#handle))
+- The `prepare` script is no longer needed in `package.json` ([#5760](https://github.com/sveltejs/kit/pull/5760))
+- `adapter-node` no longer does any compression while we wait for a [bug fix in the `compression` library](https://github.com/expressjs/compression/pull/183) ([#5560](https://github.com/sveltejs/kit/pull/5506))
+
+For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+
+## What's new in Svelte & Language Tools
+- The `@layer` [CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is now supported in Svelte components (**3.49.0**, [PR](https://github.com/sveltejs/svelte/issues/7504))
+- The `inert` [HTML attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute) is now supported in Svelte's language tools and plugins (**105.20.0**, [PR](https://github.com/sveltejs/language-tools/pull/1565))
+- The Svelte plugin will now use `SvelteComponentTyped` typings, if available (**105.19.0**, [PR](https://github.com/sveltejs/language-tools/pull/1548))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [PocketBase](https://github.com/pocketbase/pocketbase) is an open source Go backend with a single file and an admin dashboard built with Svelte
+- [Hondo](https://www.playhondo.com/how-to-play) is a word guessing game with multiple rounds
+- [Hexapipes](https://github.com/gereleth/hexapipes) is a site for playing hexagonal pipes puzzle
+- [Mail Must Move](https://www.mordon.app/) is an email made for those who want to get more done
+- [Jot Down](https://github.com/brysonbw/vscode-jot-down) is a Visual Studio Code extension for quick and simple note taking
+- [Kadium](https://kadium.kasper.space/) is an app for staying on top of YouTube channels' uploads
+- [Samen zjin we #1metS10](https://1mets10.avrotros.nl/) is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
+- [On Writing Code](https://onwritingcode.com/) is an interactive website to learn programming design patterns
+- [Svelte-In-Motion](https://github.com/novacbn/svelte-in-motion) lets you create Svelte-animated videos in your browser
+- [Svelte Terminal](https://github.com/Nico-Mayer/svelte-terminal) is a terminal-like website
+- [Bulletlist](https://bulletlist.com/) is a simple tool with a single purpose: making lists
+- [Remind Me Again](https://github.com/probablykasper/remind-me-again) is an app for toggleable reminders on Mac, Linux and Windows
+- [Heyweek](https://heyweek.com/) is a timetracking app built for freelancers craving that extra pizzazz
+
+**Learning Resources**
+
+_Starring the Svelte team_
+- [The Svelte Documentary is out!](https://www.svelteradio.com/episodes/the-svelte-documentary-is-out) on Svelte Radio
+- [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) by Vercel
+- [Challenge: Explore Svelte by Building a Bubble Popping Game](https://prismic.io/blog/try-svelte-build-game) by Brittney Postma
+- [Let's write a Client-side Routing Library with Svelte](https://www.youtube.com/watch?v=3foVDSknGEY) by lihautan
+- [Svelte Sirens July Talk - Testing in Svelte with Jess Sachs](https://sveltesirens.dev/event/testing-in-svelte)
+
+_To Watch_
+- [10 Awesome Svelte UI Component Libraries](https://www.youtube.com/watch?v=RkD88ARvucM) by LevelUpTuts
+- [Learn How SvelteKit Works](https://www.youtube.com/watch?v=VizuTy3uSNE) and [SvelteKit Endpoints](https://www.youtube.com/watch?v=XnVxDLTgCgo) by Joy of Code
+- [SvelteKit using TS, and Storybook setup](https://www.youtube.com/watch?v=L4F5dSu0FcQ) by Jarrod Kane
+- [Building Apps with Svelte!](https://www.youtube.com/watch?v=prsXVk1fdW4) by Simon Grimm
+- [SvelteKit authentication, the better way - Tutorial](https://www.youtube.com/watch?v=Y98KipzwVdM) by Pilcrow
+
+_To Read_
+- [Some assorted Svelte demos](https://geoffrich.net/posts/assorted-svelte-demos/) by Geoff Rich
+- [Three ways to bootstrap a Svelte project](https://maier.tech/posts/three-ways-to-bootstrap-a-svelte-project) by Thilo Maier
+- [Design & build an app with Svelte](https://bootcamp.uxdesign.cc/design-build-an-app-with-svelte-ecd7ed0729da) by Hugo
+- [Define routes via JS in SvelteKit](https://dev.to/maxcore/define-routes-via-js-in-sveltekit-27e9) by Max Core
+- [Integrating Telegram api with SvelteKit](https://dev.to/theether0/integrating-telegram-api-with-sveltekit-5gb) by Shivam Meena
+- [SvelteKit SSG: how to Prerender your SvelteKit Site](https://rodneylab.com/sveltekit-ssg/) by Rodney Lab
+- [ADEO Design System: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163) by Mohamed Mokhtari
+- [The Svelte Handbook](https://thevalleyofcode.com/svelte/) by The Valley of Code
+- [Test Svelte Component Using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) by David Peng
+- [Transitional Apps with Phoenix and Svelte](https://nathancahill.com/phoenix-svelte) by Nathan Cahill
+
+_Tech Demos_
+- [Bringing the best GraphQL experience to Svelte](https://www.the-guild.dev/blog/houdini-and-kitql) by The Guild
+- [Style your Svelte website faster with Stylify CSS](https://stylifycss.com/blog/style-your-svelte-website-faster-with-stylify-css/) by Stylify
+- [Revamped Auth Helpers for Supabase (with SvelteKit support)](https://supabase.com/blog/2022/07/13/supabase-auth-helpers-with-sveltekit-support) by Supabase
+
+
+**Libraries, Tools & Components**
+- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
+- [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind
+- [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes
+- [@crikey/stores-*](https://www.npmjs.com/package/@crikey/stores-base) is a collection of 8 libraries to extend Svelte stores for common use-cases
+- [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage
+- [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema
+- [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view
+- [Snap Layout](https://github.com/ThaUnknown/snap-layout) and [universal-title-bar](https://github.com/ThaUnknown/universal-title-bar) bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a `.svelte` module or as a web component
+- [svelte-adapter-bun](https://github.com/gornostay25/svelte-adapter-bun) is an adapter for SvelteKit apps that generates a standalone Bun server
+- [json2dir](https://www.npmjs.com/package/json2dir) converts JSON objects into directory trees
+- [Svelte Command Palette](https://github.com/rohitpotato/svelte-command-palette) is a drop-in command palette component
+- [svelte-use-drop-outside](https://github.com/untemps/svelte-use-drop-outside) is a Svelte action to drop an element outside an area
+- [PowerTable](https://github.com/muonw/powertable) is a JavaScript component that turns JSON data into an interactive HTML table
+- [svelte-slides](https://github.com/rajasegar/svelte-slides) is a slide show template for Svelte using Reveal.js
+- [Svelte Theme Light](https://marketplace.visualstudio.com/items?itemName=webmaek.svelte-theme-light) is a Visual Studio Code theme based on the Svelte REPL
+
+Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
+
+Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! [Get your tickets now](https://www.sveltesummit.com/).
+
+See ya next month!

From 816409a27b07090fd6796f585121112e5bd71c88 Mon Sep 17 00:00:00 2001
From: Tal500 <tal_hd@hotmail.com>
Date: Sat, 6 Aug 2022 20:54:23 +0300
Subject: [PATCH 49/89] [fix] Use `Node.parentNode` instead
 `Node.parentElement` for legacy browser support (#7724)

---
 src/runtime/internal/dom.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 072506629c..8a7d3af6da 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -163,7 +163,7 @@ export function append_hydration(target: NodeEx, node: NodeEx) {
 	if (is_hydrating) {
 		init_hydrate(target);
 
-		if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentElement !== target))) {
+		if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentNode !== target))) {
 			target.actual_end_child = target.firstChild;
 		}
 

From 5b29124fbdf5df179fbd1aae7013774bf447fee8 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 7 Aug 2022 02:56:47 +0900
Subject: [PATCH 50/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5df9239972..72b7df838a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
+* Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 
 ## 3.49.0
 

From 419641bb3eefb53b4c627005b3637882e5e5342f Mon Sep 17 00:00:00 2001
From: Niko Simonson <nsimonson1@gmail.com>
Date: Mon, 8 Aug 2022 09:01:54 -0700
Subject: [PATCH 51/89] Recursively check label children for input control
 (#5323)

* Recursively check label children for input control

* Add another test case

* Update snapshot

* clean up test

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/nodes/Element.ts         | 20 ++++++-
 .../input.svelte                              |  3 +
 .../warnings.json                             |  1 +
 .../input.svelte                              |  6 ++
 .../warnings.json                             | 60 +++++++++----------
 5 files changed, 58 insertions(+), 32 deletions(-)
 create mode 100644 test/validator/samples/a11y-label-has-associated-control-2/input.svelte
 create mode 100644 test/validator/samples/a11y-label-has-associated-control-2/warnings.json

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index e351a02499..119e187954 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -626,8 +626,24 @@ export default class Element extends Node {
 		}
 
 		if (this.name === 'label') {
-			const has_input_child = this.children.some(i => (i instanceof Element && a11y_labelable.has(i.name) ));
-			if (!attribute_map.has('for') && !has_input_child) {
+			const has_input_child = (children: INode[]) => {
+				if (children.some(child => (child instanceof Element && (a11y_labelable.has(child.name) || child.name === 'slot')))) {
+					return true;
+				}
+
+				for (const child of children) {
+					if (!('children' in child) || child.children.length === 0) {
+						continue;
+					}
+					if (has_input_child(child.children)) {
+						return true;
+					}
+				}
+
+				return false;
+			};
+
+			if (!attribute_map.has('for') && !has_input_child(this.children)) {
 				component.warn(this, compiler_warnings.a11y_label_has_associated_control);
 			}
 		}
diff --git a/test/validator/samples/a11y-label-has-associated-control-2/input.svelte b/test/validator/samples/a11y-label-has-associated-control-2/input.svelte
new file mode 100644
index 0000000000..de26d50782
--- /dev/null
+++ b/test/validator/samples/a11y-label-has-associated-control-2/input.svelte
@@ -0,0 +1,3 @@
+<label>
+  <slot />
+</label>
diff --git a/test/validator/samples/a11y-label-has-associated-control-2/warnings.json b/test/validator/samples/a11y-label-has-associated-control-2/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/a11y-label-has-associated-control-2/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/a11y-label-has-associated-control/input.svelte b/test/validator/samples/a11y-label-has-associated-control/input.svelte
index 43304689dc..124888c089 100644
--- a/test/validator/samples/a11y-label-has-associated-control/input.svelte
+++ b/test/validator/samples/a11y-label-has-associated-control/input.svelte
@@ -1,6 +1,12 @@
+<script>
+  import LabelComponent from './label.svelte'
+</script>
+
 <label>A</label>
 <label for="id">B</label>
 
 <label>C <input type="text" /></label>
 <label>D <button>D</button></label>
 <label>E <span></span></label>
+<label>F {#if true}<input type="text" />{/if}</label>
+<LabelComponent>G <input type="text" /></LabelComponent>
diff --git a/test/validator/samples/a11y-label-has-associated-control/warnings.json b/test/validator/samples/a11y-label-has-associated-control/warnings.json
index b70a1a47de..f618e16973 100644
--- a/test/validator/samples/a11y-label-has-associated-control/warnings.json
+++ b/test/validator/samples/a11y-label-has-associated-control/warnings.json
@@ -1,32 +1,32 @@
 [
-  {
-    "code": "a11y-label-has-associated-control",
-    "end": {
-      "character": 16,
-      "column": 16,
-      "line": 1
-    },
-    "message": "A11y: A form label must be associated with a control.",
-    "pos": 0,
-    "start": {
-      "character": 0,
-      "column": 0,
-      "line": 1
-    }
-  },
-  {
-    "code": "a11y-label-has-associated-control",
-    "end": {
-      "character": 149,
-      "column": 30,
-      "line": 6
-    },
-    "message": "A11y: A form label must be associated with a control.",
-    "pos": 119,
-    "start": {
-      "character": 119,
-      "column": 0,
-      "line": 6
-    }
-  }
+	{
+		"code": "a11y-label-has-associated-control",
+		"end": {
+			"character": 82,
+			"column": 16,
+			"line": 5
+		},
+		"message": "A11y: A form label must be associated with a control.",
+		"pos": 66,
+		"start": {
+			"character": 66,
+			"column": 0,
+			"line": 5
+		}
+	},
+	{
+		"code": "a11y-label-has-associated-control",
+		"end": {
+			"character": 215,
+			"column": 30,
+			"line": 10
+		},
+		"message": "A11y: A form label must be associated with a control.",
+		"pos": 185,
+		"start": {
+			"character": 185,
+			"column": 0,
+			"line": 10
+		}
+	}
 ]

From dc83d0b30dd981581229a3bb19eaf42bee15ea39 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 9 Aug 2022 00:03:25 +0800
Subject: [PATCH 52/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72b7df838a..313e104df3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
+* Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
 
 ## 3.49.0
 

From 012d639b42f6562f1df42d5bc9f3c79dbc0fd899 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 9 Aug 2022 00:05:51 +0800
Subject: [PATCH 53/89] Update 05-accessibility-warnings.md

reorder a11y warnings
---
 .../content/docs/05-accessibility-warnings.md | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index 495d0107c4..8143f43d09 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -54,17 +54,6 @@ The following elements are visually distracting: `<marquee>` and `<blink>`.
 
 ---
 
-### `role-has-required-aria-props`
-
-Elements with ARIA roles must have all required attributes for that role.
-
-```sv
-<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
-<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
-```
-
----
-
 ### `a11y-hidden`
 
 Certain DOM elements are useful for screen reader navigation and should not be hidden.
@@ -272,6 +261,17 @@ 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.
+
+```sv
+<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
+<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
+```
+
+---
+
 ### `a11y-structure`
 
 Enforce that certain DOM elements have the correct structure.

From 3570a5361e2f9267891fb4c4c858d2a2cf8f49c8 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 14 Aug 2022 17:26:19 +0900
Subject: [PATCH 54/89] [fix] Apply class directive properly after half way
 transition (#7765)

---
 .../render_dom/wrappers/Element/index.ts      |  5 +++-
 .../class-shortcut-with-transition/_config.js | 30 +++++++++++++++++++
 .../main.svelte                               | 17 +++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/class-shortcut-with-transition/_config.js
 create mode 100644 test/runtime/samples/class-shortcut-with-transition/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index eed7c6f4ee..8e8e0d6706 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -1052,7 +1052,10 @@ export default class ElementWrapper extends Wrapper {
 				block.chunks.update.push(updater);
 			} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
 				const all_dependencies = this.class_dependencies.concat(...dependencies);
-				const condition = block.renderer.dirty(all_dependencies);
+				let condition = block.renderer.dirty(all_dependencies);
+				if (block.has_outros) {
+					condition = x`!#current || ${condition}`;
+				}
 
 				// If all of the dependencies are non-dynamic (don't get updated) then there is no reason
 				// to add an updater for this.
diff --git a/test/runtime/samples/class-shortcut-with-transition/_config.js b/test/runtime/samples/class-shortcut-with-transition/_config.js
new file mode 100644
index 0000000000..80df51bd4a
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-transition/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		open: false,
+		border: true
+	},
+	html: '<p>foo</p>',
+
+	test({ assert, component, target, raf }) {
+		component.open = true;
+		raf.tick(100);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
+		);
+
+		component.open = false;
+		raf.tick(150);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>'
+		);
+
+		component.open = true;
+		raf.tick(250);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
+		);
+	}
+};
diff --git a/test/runtime/samples/class-shortcut-with-transition/main.svelte b/test/runtime/samples/class-shortcut-with-transition/main.svelte
new file mode 100644
index 0000000000..3291ec4a10
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-transition/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { slide } from "svelte/transition";
+	export let open = false;
+	export let color = "red";
+	export let border = false;
+</script>
+
+<p>foo</p>
+{#if open}
+	<p class={color} class:border transition:slide|local={{ duration: 100 }}>bar</p>
+{/if}
+
+<style>
+	.border {
+		border: 4px solid black;
+	}
+</style>

From 040192dd59b82e9258738ebc8ac718727828c226 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 14 Aug 2022 17:27:10 +0900
Subject: [PATCH 55/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 313e104df3..a1dcc005fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
+* Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
 
 ## 3.49.0
 

From d5efa2e446d1f6a968ca8441936840da63a1a5d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=9F=E4=B8=96=E5=8D=9A?= <897205285@qq.com>
Date: Fri, 19 Aug 2022 12:30:22 +0800
Subject: [PATCH 56/89] [docs] Typescript -> TypeScript (#7797)

* [docs] fix spellings error

* fix ts
---
 .../blog/2020-12-01-whats-new-in-svelte-december-2020.md      | 2 +-
 .../blog/2021-02-01-whats-new-in-svelte-february-2021.md      | 2 +-
 .../content/blog/2021-03-01-whats-new-in-svelte-march-2021.md | 4 ++--
 .../blog/2021-09-01-whats-new-in-svelte-september-2021.md     | 2 +-
 .../blog/2021-10-01-whats-new-in-svelte-october-2021.md       | 4 ++--
 .../blog/2021-11-01-whats-new-in-svelte-november-2021.md      | 2 +-
 .../content/blog/2022-04-01-whats-new-in-svelte-april-2022.md | 4 ++--
 .../14-composition/04-optional-slots/app-a/App.svelte         | 2 +-
 .../14-composition/04-optional-slots/app-b/App.svelte         | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
index b8b1a9d13a..aac2c80f64 100644
--- a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
+++ b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
@@ -53,7 +53,7 @@ For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github
 
 **Components, Libraries & Tools**
 - [svelte-crossword](https://russellgoldenberg.github.io/svelte-crossword/) is a customizable crossword puzzle component for Svelte.
-- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including Typescript and SSR support)
+- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including TypeScript and SSR support)
 - [Svelte Nova](https://extensions.panic.com/extensions/sb.lao/sb.lao.svelte-nova/) extends the new Nova editor to support Svelte
 - [saos](https://github.com/shiryel/saos) is a small svelte component to animate your elements on scroll.
 - [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features.
diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
index 2d09a3c439..cb7bcb425e 100644
--- a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
+++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
@@ -70,7 +70,7 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv
 - [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app
 - [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
 - [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler
-- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for Typescript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.
+- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for TypeScript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.
 
 **Want to share your Svelte Component with the world?** Head over to the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
 
diff --git a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
index 45a03444c7..ad32088dd3 100644
--- a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
+++ b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
@@ -17,7 +17,7 @@ Let's dive into the news 🐬
 * Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
 * Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
 * A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile))
-* Continued improvement to Typescript definitions
+* Continued improvement to TypeScript definitions
 
 For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
 
@@ -96,7 +96,7 @@ Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](ht
 - [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte
 - [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) demonstrates how to connect the TakeShape CMS with Sapper
 - [YastPack](https://github.com/rodabt/yastpack) is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack
-- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + Typescript template
+- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + TypeScript template
 - [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier
 
 ## See you next month!
diff --git a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
index d4794b3c5e..46c483359a 100644
--- a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
+++ b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
@@ -44,7 +44,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 - [macos-web](https://github.com/PuruVJ/macos-web) by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this [Twitter thread](https://twitter.com/puruvjdev/status/1426267327687847939)
 - [Brave Search](https://search.brave.com/) is using Svelte
 - [exatorrent](https://github.com/varbhat/exatorrent) is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte
-- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to Typescript Types/Interfaces
+- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to TypeScript Types/Interfaces
 - [Histogram.dev](https://histogram.dev/) generates histograms for each feature in a CSV
 - [cybernetic.dev](https://cybernetic.dev/) is a collection of data-centric UI experiments made while learning Svelte
 - [LunaNotes](https://chrome.google.com/webstore/detail/lunanotes-youtube-video-n/oehoffnnkgcdacmbkhmlbjedinpampak?hl=en) is a Chrome extension to help with taking YouTube video notes
diff --git a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
index 4b5b65d6f0..706b4907e0 100644
--- a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
+++ b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
@@ -52,7 +52,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 - [hirehive](https://www.hirehive.com/) is a candidate and job tracking site
 - [Microsocial](https://microsocial.xyz/) is an experimental Peer-to-Peer Social Platform 
 - [Dylan Ipsum](https://www.dylanlyrics.app/) is a random text generator to replace lorem ipsum with Bob Dylan lyrics
-- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 Typescript
+- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 TypeScript
 
 **Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
 
@@ -74,7 +74,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 
 **Libraries, Tools & Components**
 - [sveltekit-netlify-cms](https://github.com/buhrmi/sveltekit-netlify-cms) is a SvelteKit skeleton app configured for use with Netlify CMS
-- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + Typescript + Firebase library inspired by Fireship.io 
+- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + TypeScript + Firebase library inspired by Fireship.io 
 - [stores-x](https://github.com/Anyass3/stores-x) lets you use Svelte stores just like vueX
 - [sveltekit-snippets](https://github.com/stordahl/sveltekit-snippets) is a VSCode extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
 - [svelte-xactor](https://github.com/wobsoriano/svelte-xactor) is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract
diff --git a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
index 12a89a639c..0b2d82c199 100644
--- a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
+++ b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
@@ -72,7 +72,7 @@ To see all updates to Svelte and SvelteKit, check out the [Svelte](https://githu
 - [date-picker-svelte](https://github.com/probablykasper/date-picker-svelte) is a date and time picker for Svelte
 - [TwelveUI](https://twelveui.readme.io/reference/what-is-twelveui) is a Svelte component library with accessibility built-in
 - [svelte-outclick](https://github.com/babakfp/svelte-outclick/) is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event
-- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for Typescript
+- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for TypeScript
 - [svelte-recaptcha-v2](https://github.com/basaran/svelte-recaptcha-v2) is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
 - [Svelte Body](https://github.com/ghostdevv/svelte-body) lets you apply styles to the body in routes - designed to work with SvelteKit and Routify.
 - [svelte-debug-console](https://github.com/basaran/svelte-debug-console) is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser.
diff --git a/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
index 2f9db93580..3858168008 100644
--- a/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
+++ b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
@@ -41,7 +41,7 @@ More on that, and what else is new in Svelte, as we dive in...
 
 **Apps & Sites built with Svelte**
 - [Launcher](https://launcher.team/) is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
-- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, Typescript, Python, Starlette, rclone & Docker.
+- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, TypeScript, Python, Starlette, rclone & Docker.
 - [Simple AF Video Converter](https://github.com/berlyozzy/Simple-AF-Video-Converter) is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
 - [Streamchaser](https://github.com/streamchaser/streamchaser) seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
 - [Svelte Color Picker](https://github.com/V-Py/svelte-material-color-picker) is a simple color picker made with Svelte
@@ -89,7 +89,7 @@ _To Watch_
 
 **Libraries, Tools & Components**
 - [SvelTable](https://sveltable.io/) is a feature rich, data table component built with Svelte
-- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and Typescript
+- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and TypeScript
 - [Flowbite Svelte](https://github.com/shinokada/flowbite-svelte) is an unofficial Flowbite component library for Svelte
 - [Svelte-Tide-Project](https://github.com/jbertovic/svelte-tide-project) is a starter template for Svelte frontend apps with Rust Tide backend server
 - [Fetch Inject](https://github.com/vhscom/fetch-inject#sveltekit) implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
index 19537cb4b3..3dd126be75 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
@@ -10,7 +10,7 @@
 <ul>
 	<li>
 		<Project
-			title="Add Typescript support"
+			title="Add TypeScript support"
 			tasksCompleted={25}
 			totalTasks={57}
 		>
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
index 19537cb4b3..3dd126be75 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
@@ -10,7 +10,7 @@
 <ul>
 	<li>
 		<Project
-			title="Add Typescript support"
+			title="Add TypeScript support"
 			tasksCompleted={25}
 			totalTasks={57}
 		>

From 8d26b4a19d2b92a8334eaf2e030168e4bfcdda89 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Tue, 23 Aug 2022 11:20:46 +0900
Subject: [PATCH 57/89] [chore] improve performance by using `trimRight()`
 instead of regex replace (#7706)

---
 src/compiler/compile/render_ssr/index.ts | 2 +-
 src/compiler/parse/index.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts
index 9d2c1cc60b..e256ba78fb 100644
--- a/src/compiler/compile/render_ssr/index.ts
+++ b/src/compiler/compile/render_ssr/index.ts
@@ -237,7 +237,7 @@ function trim(nodes: TemplateNode[]) {
 		const node = nodes[end - 1] as Text;
 		if (node.type !== 'Text') break;
 
-		node.data = node.data.replace(/\s+$/, '');
+		node.data = node.data.trimRight();
 		if (node.data) break;
 	}
 
diff --git a/src/compiler/parse/index.ts b/src/compiler/parse/index.ts
index 836fb670cf..e5e2260bc0 100644
--- a/src/compiler/parse/index.ts
+++ b/src/compiler/parse/index.ts
@@ -34,7 +34,7 @@ export class Parser {
 			throw new TypeError('Template must be a string');
 		}
 
-		this.template = template.replace(/\s+$/, '');
+		this.template = template.trimRight();
 		this.filename = options.filename;
 		this.customElement = options.customElement;
 

From 8238ac46dc27ae15a46c2ff1cc5222298304eccc Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 22 Aug 2022 19:22:04 -0700
Subject: [PATCH 58/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1dcc005fa..5fee76add2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
 * Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
+* Improve parsing speed when encountering large blocks of whitespace [#7675](https://github.com/sveltejs/svelte/issues/7675)
 
 ## 3.49.0
 

From a8616701e7b3c4efe48d1f3cc795d47782c85335 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 29 Aug 2022 12:47:20 -0700
Subject: [PATCH 59/89] [docs] clarify reactivity rules (#7802)

---
 site/content/docs/01-component-format.md | 28 ++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index 1c64094002..23508b5c7b 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -55,9 +55,7 @@ In development mode (see the [compiler options](/docs#compile-time-svelte-compil
 
 ---
 
-If you export a `const`, `class` or `function`, it is readonly from outside the component. Function *expressions* are valid props, however.
-
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this).
+If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
 
 ```sv
 <script>
@@ -73,6 +71,8 @@ Readonly props can be accessed as properties on the element, tied to the compone
 </script>
 ```
 
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this).
+
 ---
 
 You can use reserved words as prop names.
@@ -125,15 +125,29 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
 </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.
+
+```sv
+<script>
+	export let person;
+	// this will only set `name` on component creation
+	// it will not update when `person` does
+	let { name } = person;
+</script>
+```
+
 #### 3. `$:` marks a statement as reactive
 
 ---
 
-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 immediately before the component updates, whenever the values that they depend on have changed.
+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.
 
 ```sv
 <script>
 	export let title;
+	export let person
 
 	// this will update `document.title` whenever
 	// the `title` prop changes
@@ -143,6 +157,12 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
 		console.log(`multiple statements can be combined`);
 		console.log(`the current title is ${title}`);
 	}
+
+	// this will update `name` when 'person' changes
+	$: ({ name } = person);
+
+	// don't do this. it will run before the previous line
+	let name2 = name;
 </script>
 ```
 

From 0ed453dc11133e5dab902f7f44c807624d6d4c1f Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <daniel@desandoval.net>
Date: Thu, 1 Sep 2022 16:42:09 -0600
Subject: [PATCH 60/89] [docs] "What's new in Svelte" September newsletter
 (#7814)

---
 ...2-08-01-whats-new-in-svelte-august-2022.md |   2 +-
 ...9-01-whats-new-in-svelte-september-2022.md | 105 ++++++++++++++++++
 2 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md

diff --git a/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
index dfea1bcdd2..7757fab9ec 100644
--- a/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
+++ b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
@@ -99,7 +99,7 @@ _Tech Demos_
 - [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
 - [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind
 - [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes
-- [@crikey/stores-*](https://www.npmjs.com/package/@crikey/stores-base) is a collection of 8 libraries to extend Svelte stores for common use-cases
+- [@crikey/stores-*](https://whenderson.github.io/stores-mono/) is a collection of libraries to extend Svelte stores for common use-cases
 - [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage
 - [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema
 - [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view
diff --git a/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md b/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
new file mode 100644
index 0000000000..a4a8ecfd04
--- /dev/null
+++ b/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
@@ -0,0 +1,105 @@
+---
+title: "What's new in Svelte: September 2022"
+description: "Migrating to SvelteKit's new filesystem-based router"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Still looking for something to do this month? It's your last chance to get tickets to Svelte Summit, Stockholm! [Join us on Sept 8-9th](https://www.sveltesummit.com/) 🎉
+
+With the redesign of SvelteKit's filesystem-based router merging early last month, there's lots to cover this month - from the [migration script](https://github.com/sveltejs/kit/discussions/5774) to a number of new blog posts, videos and tutorials.
+
+But the new routing isn't the only new feature in SvelteKit...
+
+## What's new in SvelteKit
+- `Link` is now supported as an HTTP header and works out of the box with Cloudflare's [Automatic Early Hints](https://github.com/sveltejs/kit/issues/5455) (**1.0.0-next.405**, [PR](https://github.com/sveltejs/kit/pull/5735))
+- `$env/static/*` are now virtual to prevent writing sensitive values to disk (**1.0.0-next.413**, [PR](https://github.com/sveltejs/kit/pull/5825))
+- `$app/stores` can now be used from anywhere on the browser (**1.0.0-next.428**, [PR](https://github.com/sveltejs/kit/pull/6100))
+- `config.kit.env.dir` is a new config that sets the directory to search for `.env` files (**1.0.0-next.430**, [PR](https://github.com/sveltejs/kit/pull/6175))
+
+**Breaking changes:**
+- The filesystem-based router and `load` API improves the way routes are managed. **Before installing version `@sveltejs/kit@1.0.0-next.406` or later, [follow this migration guide](https://github.com/sveltejs/kit/discussions/5774)** ([PR](https://github.com/sveltejs/kit/pull/5778), [Issue](https://github.com/sveltejs/kit/discussions/5748))
+- `event.session` has been removed from `load` along with the `session` store and `getSession`. Use `event.locals` instead (**1.0.0-next.415**, [PR](https://github.com/sveltejs/kit/pull/5946))
+- Named layouts have been removed in favor of `(groups)` (**1.0.0-next.432**, [Docs](https://kit.svelte.dev/docs/advanced-routing#advanced-layouts), [PR & Migration Instructions](https://github.com/sveltejs/kit/pull/6174))
+- `event.clientAddress` is now `event.getClientAddress()` (**1.0.0-next.438**, [PR](https://github.com/sveltejs/kit/pull/6237))
+- `$app/env` has been renamed to `$app/environment`, to disambiguate with `$env/...` (**1.0.0-next.445**, [PR](https://github.com/sveltejs/kit/pull/6334))
+
+For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+**Updates to language tools**
+- TypeScript doesn't resolve imports to SvelteKit's $types very well, the latest version of Svelte's language tools makes it better (**105.21.0**, [#1592](https://github.com/sveltejs/language-tools/pull/1592))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [canno](https://twitter.com/a_warnes/status/1556724034959818754?s=20&t=RyKWALPByqMT5A_PkLtUew) is a simple interactive 3d physics game with adjustable gravity, cannon power, and debug visualizer - made with threlte
+- [straw.page](https://straw.page/) is an extremely simple website builder that lets you create unique websites straight from your phone
+- [Patra](https://patra.webjeda.com/) lets you share short notes just with a link. No database. No storage
+- [promptoMANIA](https://promptomania.com/) is an AI art community with an online prompt builder
+- [Album by Mood](https://www.albumbymood.com/) lets you listen to music based on your mood
+- [Daily Sumeiro](https://digivaux.com/sumeiro/daily/) is a daily game to test your math and logic skills
+- [Lofi and Games](https://www.lofiandgames.com/) - play relaxing, casual games right from your browser
+- [Pitch Pipe](https://github.com/joelgibson/pitch-pipe) is a digital pitch pipe with a frequency analyser and just-intonation intervals
+- [classes.wtf](https://github.com/ekzhang/classes.wtf) is a custom, distributed search engine written in Go and Svelte to make searching for Harvard courses much quicker than the standard course catalog
+- [Scrumpack](https://scrumpack.io/) is a set of tools to help agile/scrum teams with their ceremonies like Planning Poker and Retrospectives
+
+**Learning Resources**
+
+_Starring the Svelte team_
+- [Supper Club × Rich Harris, Author of Svelte — Syntax Podcast 499](https://syntax.fm/show/499/supper-club-rich-harris-author-of-svelte)
+- [Let's talk routing with Rich Harris on Svelte Radio](https://www.svelteradio.com/episodes/lets-talk-routing-with-rich-harris)
+- [2.17 - Building the Future of Svelte at Vercel with Rich Harris](https://www.youtube.com/watch?v=F1sSUDVoij4)
+- [1.15 - What's Up With SvelteKit with Shawn Wang (swyx)](https://www.youtube.com/watch?v=xLhuUShkYkM)
+- [Adding Notion Tailwindcss and DaisyUI to Svelte App](https://www.youtube.com/watch?v=l4sbqrY0XGk)
+- [Svelte 101 Session](https://www.youtube.com/watch?v=IIeBERpyxx4)
+- [Astro and Svelte](https://www.youtube.com/watch?v=iYKKg-50Gm4)
+- [Storyblok in Svelte](https://www.youtube.com/watch?v=xXHFRzqUxoE)
+- [Svelte London August Recording](https://www.youtube.com/watch?v=ua6gE2zPulw)
+
+_Learning the new SvelteKit routing_
+- [Migrating Breaking Changes in SvelteKit](https://www.netlify.com/blog/migrating-breaking-changes-in-sveltekit/) by Brittney Postma (Netlify)
+- [Major Svelte Kit API Change - Fixing `load`, and tightening up SvelteKit's design before 1.0](https://www.youtube.com/watch?v=OUGn7VifUCg) - Video by LevelUpTuts
+- [SvelteKit Is Never Going To Be The Same](https://www.youtube.com/watch?v=eVFcGA-15LA) - Video by Joy of Code
+- [Let's learn SvelteKit by building a static Markdown blog from scratch](https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog) by Josh Collinsworth (updated Aug 26th to keep up with the new changes)
+
+_To Watch_
+- [Svelte Guide For React Developers](https://www.youtube.com/watch?v=uWDBEUkTRGk) and [Svelte State Management Guide](https://www.youtube.com/watch?v=4dDjQiOVrOo) by Joy of Code
+- [What Is Bookit? The Svelte Kit Storybook Killer](https://www.youtube.com/watch?v=aOBGhvggsq0) and [What Is @type{import In Svelte Kit - JSDoc Syntax](https://www.youtube.com/watch?v=y0DvJTVO65M) by LevelUpTuts
+- [TWF Yet another JS Framework... or not? Svelte!](https://www.youtube.com/watch?app=desktop&v=nT8QtDBIKZA) by TWF meetup
+
+
+_To Read_
+- [Creating a Figma Plugin with Svelte](https://www.lekoarts.de/javascript/creating-a-figma-plugin-with-svelte) by Lennart
+- [Svelte Video Blog: Vlog with Mux from your own SvelteKit Site](https://plus.rodneylab.com/tutorials/svelte-video-blog) and [Svelte Shy Header: Peekaboo Sticky Header with CSS](https://rodneylab.com/svelte-shy-header/) by Rodney Lab
+
+
+**Libraries, Tools & Components**
+- [@svelte-plugins/tooltips](https://github.com/svelte-plugins/tooltips) is a simple tooltip action and component designed for Svelte
+- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple authentication library for SvelteKit that connects your SvelteKit app to your database
+- [remix-router-svelte](https://github.com/brophdawg11/remix-routers/tree/main/packages/svelte) is a Svelte implementation of the `react-router-dom` API (driven by `@remix-run/router`)
+- [MKRT](https://github.com/j4w8n/mkrt) is a CLI to help you create SvelteKit routes, fast
+- [Histoire](https://histoire.dev/guide/) is a tool to generate stories applications - scenarios where you showcase components for specific use cases
+- [sveltekit-flash-message](https://www.npmjs.com/package/sveltekit-flash-message) is a Sveltekit library that passes temporary data to the next request, usually from endpoints
+- [svelte-particles](https://github.com/matteobruni/tsparticles#svelte) is a lightweight TypeScript library for creating particles
+- [svelte-claps](https://github.com/bufgix/svelte-claps) adds clap button (like Medium) to any page for your SvelteKit apps
+- [Neon Flicker](https://svelte.dev/repl/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style
+- [ComboBox](https://svelte.dev/repl/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items
+- [@svelte-put](https://github.com/vnphanquang/svelte-put) is useful svelte stuff to put in your projects
+- [vite-plugin-svelte-bridge](https://github.com/joshnuss/vite-plugin-svelte-bridge) lets you write Svelte components and use them from React & Vue
+
+_UI Kits and Starters_
+- [Svelte-spectre](https://github.com/basf/svelte-spectre) is a UI-kit based on spectre.css and powered by Svelte
+- [Skeleton](https://skeleton.brainandbonesllc.com/) allows you to build fast and reactive web UI using the power of Svelte + Tailwind
+- [iconsax-svelte](https://www.npmjs.com/package/iconsax-svelte) brings the popular icon kit to Svelte
+- [laravel-vite-svelte-spa-template](https://github.com/NukeJS/laravel-vite-svelte-spa-template) is a Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios, & TypeScript starter template
+- [neutralino-svelte-boilerplate-js](https://github.com/Raffaele/neutralino-svelte-boilerplate-js) is a cross platform desktop template for Neutralino and Svelte 
+- [figma-plugin-svelte-vite](https://github.com/candidosales/figma-plugin-svelte-vite) is a boilerplate for creating Figma plugins using Svelte, Vite and Typescript
+- [Urara](https://github.com/importantimport/urara) is a sweet & powerful SvelteKit blog starter
+- [SvelteKit Commerce](https://vercel.com/templates/svelte/sveltekit-commerce) is an all-in-one starter kit for high-performance e-commerce sites built with SvelteKit by Vercel
+
+Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
+
+See ya next month!

From bddd795746c2cdfe04e8256d7a50f4d38ef09238 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:21:28 +0200
Subject: [PATCH 61/89] [feat] enhance action typings (#7805)

Allows a way to tell language tools which additional attributes and events the action brings to the HTML element
Related https://github.com/sveltejs/language-tools/pull/1553
---
 src/runtime/action/index.ts | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/runtime/action/index.ts b/src/runtime/action/index.ts
index d7cbf04b12..388f6f040e 100644
--- a/src/runtime/action/index.ts
+++ b/src/runtime/action/index.ts
@@ -4,9 +4,17 @@
  *   immediately after Svelte has applied updates to the markup.
  * - destroy: Method that is called after the element is unmounted
  *
+ * 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.
+ *
  * Example usage:
  * ```ts
- * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter> {
+ * interface Attributes {
+ * 	newprop?: string;
+ *	'on:event': (e: CustomEvent<boolean>) => void;
+ * }
+ *
+ * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
  *   // ...
  *   return {
  *     update: (updatedParameter) => {...},
@@ -17,9 +25,15 @@
  *
  * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
  */
-export interface ActionReturn<Parameter = any> {
+export interface ActionReturn<Parameter = any, Attributes extends Record<string, any> = Record<never, any>> {
 	update?: (parameter: Parameter) => void;
 	destroy?: () => void;
+	/**
+	 * ### DO NOT USE THIS
+	 * This exists solely for type-checking and has no effect at runtime.
+	 * Set this through the `Attributes` generic instead.
+	 */
+	$$_attributes?: Attributes;
 }
 
 /**
@@ -32,11 +46,11 @@ export interface ActionReturn<Parameter = any> {
  *   // ...
  * }
  * ```
- * You can return an object with methods `update` and `destroy` from the function.
+ * 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.
  *
  * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
  */
-export interface Action<Element = HTMLElement, Parameter = any> {
-	<Node extends Element>(node: Node, parameter?: Parameter): void | ActionReturn<Parameter>;
+export interface Action<Element = HTMLElement, Parameter = any, Attributes extends Record<string, any> = Record<never, any>> {
+	<Node extends Element>(node: Node, parameter?: Parameter): void | ActionReturn<Parameter, Attributes>;
 }

From af64ad94836a26a3868aa7e00fba89cf42ef2eda Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:32:19 +0200
Subject: [PATCH 62/89] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fee76add2..456d65b699 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
+* Enhance action typings ([#7805](https://github.com/sveltejs/svelte/pull/7805))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))

From efe1df0e23a650b458d0c79f9d9ac382378380a9 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:48:40 +0200
Subject: [PATCH 63/89] [fix] Only show lowercase component warning for
 non-html/svg elements (#7826)

Fixes #5712
---
 CHANGELOG.md                                        |  1 +
 src/compiler/compile/nodes/Element.ts               | 12 +++++-------
 src/shared/utils/names.ts                           | 13 +++++++++++++
 .../samples/component-name-lowercase/input.svelte   |  5 ++++-
 .../samples/component-name-lowercase/warnings.json  | 10 +++++-----
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 456d65b699..407c868d53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
 * Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
 * Improve parsing speed when encountering large blocks of whitespace [#7675](https://github.com/sveltejs/svelte/issues/7675)
+* Only show lowercase component warning for non-html/svg elements [#5712](https://github.com/sveltejs/svelte/issues/5712)
 
 ## 3.49.0
 
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 119e187954..df0e649122 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -1,4 +1,4 @@
-import { is_void } from '../../../shared/utils/names';
+import { is_html, is_svg, is_void } from '../../../shared/utils/names';
 import Node from './shared/Node';
 import Attribute from './Attribute';
 import Binding from './Binding';
@@ -26,8 +26,6 @@ import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
 import { is_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y';
 
-const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
-
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
 
@@ -166,13 +164,13 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st
 	const parent_element = parent.find_nearest(/^Element/);
 
 	if (!parent_element) {
-		return explicit_namespace || (svg.test(element.name)
+		return explicit_namespace || (is_svg(element.name)
 			? namespaces.svg
 			: null);
 	}
 
 	if (parent_element.namespace !== namespaces.foreign) {
-		if (svg.test(element.name.toLowerCase())) return namespaces.svg;
+		if (is_svg(element.name.toLowerCase())) return namespaces.svg;
 		if (parent_element.name.toLowerCase() === 'foreignobject') return null;
 	}
 
@@ -373,7 +371,7 @@ export default class Element extends Node {
 	}
 
 	validate() {
-		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) {
+		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported && !is_svg(this.name) && !is_html(this.name)) {
 			this.component.warn(this, compiler_warnings.component_name_lowercase(this.name));
 		}
 
@@ -827,7 +825,7 @@ export default class Element extends Node {
 			} else if (dimensions.test(name)) {
 				if (this.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `<svg>. Use '${name.replace('offset', 'client')}' instead`));
-				} else if (svg.test(this.name)) {
+				} else if (is_svg(this.name)) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, 'SVG elements'));
 				} else if (is_void(this.name)) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `void elements like <${this.name}>. Use a wrapper element instead`));
diff --git a/src/shared/utils/names.ts b/src/shared/utils/names.ts
index 5e13e6cd87..7c7cf07cff 100644
--- a/src/shared/utils/names.ts
+++ b/src/shared/utils/names.ts
@@ -1,5 +1,18 @@
+/** regex of all html void element names */
 const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
+/** regex of all html element names. svg and math are omitted because they belong to the svg elements namespace */
+const html_element_names = /^(?:a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)$/;
+/** regex of all svg element names */
+const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
 export function is_void(name: string) {
 	return void_element_names.test(name) || name.toLowerCase() === '!doctype';
 }
+
+export function is_html(name: string) {
+	return html_element_names.test(name);
+}
+
+export function is_svg(name: string) {
+	return svg.test(name);
+}
diff --git a/test/validator/samples/component-name-lowercase/input.svelte b/test/validator/samples/component-name-lowercase/input.svelte
index ebd7cf3481..bfca8cc471 100644
--- a/test/validator/samples/component-name-lowercase/input.svelte
+++ b/test/validator/samples/component-name-lowercase/input.svelte
@@ -1,7 +1,10 @@
 <script>
 	import thisShouldWarnMe from './MyComponent.svelte';
+	import { form } from './form';
 	let i;
+	form;
 </script>
 
 <thisShouldWarnMe />
-<i />
\ No newline at end of file
+<i />
+<form />
diff --git a/test/validator/samples/component-name-lowercase/warnings.json b/test/validator/samples/component-name-lowercase/warnings.json
index 37765b423d..57aac0c2a5 100644
--- a/test/validator/samples/component-name-lowercase/warnings.json
+++ b/test/validator/samples/component-name-lowercase/warnings.json
@@ -2,16 +2,16 @@
 	{
 		"code": "component-name-lowercase",
 		"message": "<thisShouldWarnMe> will be treated as an HTML element unless it begins with a capital letter",
-		"pos": 82,
+		"pos": 121,
 		"start": {
-			"character": 82,
+			"character": 121,
 			"column": 0,
-			"line": 6
+			"line": 8
 		},
 		"end": {
-			"character": 102,
+			"character": 141,
 			"column": 20,
-			"line": 6
+			"line": 8
 		}
 	}
 ]

From 46990652c00542c13044219991f9a1149a37cc52 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Fri, 2 Sep 2022 08:12:22 -0400
Subject: [PATCH 64/89] -> v3.50.0

---
 CHANGELOG.md      | 25 +++++++++++++------------
 package-lock.json |  2 +-
 package.json      |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 407c868d53..4b150bb169 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,22 +1,23 @@
 # Svelte changelog
 
-## Unreleased
+## 3.50.0
 
-* Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852))
-* Add a11y warning `aria-proptypes` which checks ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
-* Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241))
-* Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
-* Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
-* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
+* Add a11y warnings:
+	* `a11y-incorrect-aria-attribute-type`: check ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
+	* `a11y-no-abstract-role`: check that ARIA roles are non-abstract ([#6241](https://github.com/sveltejs/svelte/pull/6241))
+	* `a11y-no-interactive-element-to-noninteractive-role`: check for non-interactive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
+	* `a11y-role-has-required-aria-props`: check that elements with `role` attribute have all required attributes for that role ([#5852](https://github.com/sveltejs/svelte/pull/5852))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Enhance action typings ([#7805](https://github.com/sveltejs/svelte/pull/7805))
-* Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
+* Remove empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
+* Make `a11y-label-has-associated-control` warning check all descendants for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
+* Only show lowercase component name warnings for non-HTML/SVG elements ([#5712](https://github.com/sveltejs/svelte/issues/5712))
+* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
-* Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
-* Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
-* Improve parsing speed when encountering large blocks of whitespace [#7675](https://github.com/sveltejs/svelte/issues/7675)
-* Only show lowercase component warning for non-html/svg elements [#5712](https://github.com/sveltejs/svelte/issues/5712)
+* Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
+* Improve parsing speed when encountering large blocks of whitespace ([#7675](https://github.com/sveltejs/svelte/issues/7675))
+* Fix `class:` directive updates in aborted/restarted transitions ([#7764](https://github.com/sveltejs/svelte/issues/7764))
 
 ## 3.49.0
 
diff --git a/package-lock.json b/package-lock.json
index 0db7287a64..8beef8470a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.49.0",
+  "version": "3.50.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 4a4d5266c3..3e22d8b627 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.49.0",
+  "version": "3.50.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From f3f3d074c59c79836a42f53ecd0cece3a916ef61 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Sat, 3 Sep 2022 18:06:57 +0200
Subject: [PATCH 65/89] [docs] use KeyboardEvent.code (#7809)

---
 .../16-special-elements/04-svelte-window/app-a/App.svelte | 8 ++++----
 .../16-special-elements/04-svelte-window/app-b/App.svelte | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
index 24c9a6368a..47f3d8a87f 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
@@ -1,10 +1,10 @@
 <script>
 	let key;
-	let keyCode;
+	let code;
 
 	function handleKeydown(event) {
 		key = event.key;
-		keyCode = event.keyCode;
+		code = event.code;
 	}
 </script>
 
@@ -13,7 +13,7 @@
 <div style="text-align: center">
 	{#if key}
 		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
+		<p>{code}</p>
 	{:else}
 		<p>Focus this window and press any key</p>
 	{/if}
@@ -39,4 +39,4 @@
 		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
 		color: #555;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
index 026dfa94f7..c4b5ae53b3 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
@@ -1,10 +1,10 @@
 <script>
 	let key;
-	let keyCode;
+	let code;
 
 	function handleKeydown(event) {
 		key = event.key;
-		keyCode = event.keyCode;
+		code = event.code;
 	}
 </script>
 
@@ -13,7 +13,7 @@
 <div style="text-align: center">
 	{#if key}
 		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
+		<p>{code}</p>
 	{:else}
 		<p>Focus this window and press any key</p>
 	{/if}

From feb8dfce61212affedfede786fd571dbd55905cb Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 4 Sep 2022 13:13:55 +0900
Subject: [PATCH 66/89] [fix] add all global objects / functions (#7786)

---
 CHANGELOG.md                      |   4 +
 scripts/globals-extractor.mjs     |  91 ++++
 src/compiler/compile/Component.ts |   3 +-
 src/compiler/utils/globals.ts     | 840 ++++++++++++++++++++++++++++++
 src/compiler/utils/names.ts       |  65 ---
 5 files changed, 937 insertions(+), 66 deletions(-)
 create mode 100644 scripts/globals-extractor.mjs
 create mode 100644 src/compiler/utils/globals.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b150bb169..92155c0be8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issue/3805), [#7223](https://github.com/sveltejs/svelte/issue/7223), [#7240](https://github.com/sveltejs/svelte/issue/7240))
+
 ## 3.50.0
 
 * Add a11y warnings:
diff --git a/scripts/globals-extractor.mjs b/scripts/globals-extractor.mjs
new file mode 100644
index 0000000000..1c4274a024
--- /dev/null
+++ b/scripts/globals-extractor.mjs
@@ -0,0 +1,91 @@
+/** ----------------------------------------------------------------------
+This script gets a list of global objects/functions of browser.
+This process is simple for now, so it is handled without AST parser.
+Please run `node scripts/globals-extractor.mjs` at the project root.
+
+see: https://github.com/microsoft/TypeScript/tree/main/lib
+ ---------------------------------------------------------------------- */
+
+import http from 'https';
+import fs from 'fs';
+
+const GLOBAL_TS_PATH = './src/compiler/utils/globals.ts';
+
+// MEMO: add additional objects/functions which existed in `src/compiler/utils/names.ts`
+//       before this script was introduced but could not be retrieved by this process.
+const SPECIALS = ['global', 'globalThis', 'InternalError', 'process', 'undefined'];
+
+const get_url = (name) => `https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/lib.${name}.d.ts`;
+const extract_name = (split) => split.match(/^[a-zA-Z0-9_$]+/)[0];
+
+const extract_functions_and_references = (name, data) => {
+	const functions = [];
+	const references = [];
+	data.split('\n').forEach(line => {
+		const trimmed = line.trim();
+		const split = trimmed.replace(/[\s+]/, ' ').split(' ');
+		if (split[0] === 'declare' && split[1] !== 'type') {
+			functions.push(extract_name(split[2]));
+		} else if (trimmed.startsWith('/// <reference')) {
+			const matched = trimmed.match(/ lib="(.+)"/);
+			const reference = matched && matched[1];
+			if (reference) references.push(reference);
+		}
+	});
+	return { functions, references };
+};
+
+const do_get = (url) => new Promise((resolve, reject) => {
+	http.get(url, (res) => {
+		let body = '';
+		res.setEncoding('utf8');
+		res.on('data', (chunk) => body += chunk);
+		res.on('end', () => resolve(body));
+	}).on('error', (e) => {
+		console.error(e.message);
+		reject(e);
+	});
+});
+
+const fetched_names = new Set();
+const get_functions = async (name) => {
+	const res = [];
+	if (fetched_names.has(name)) return res;
+	fetched_names.add(name);
+	const body = await do_get(get_url(name));
+	const { functions, references } = extract_functions_and_references(name, body);
+	res.push(...functions);
+	const chile_functions = await Promise.all(references.map(get_functions));
+	chile_functions.forEach(i => res.push(...i));
+	return res;
+};
+
+const build_output = (functions) => {
+	const sorted = Array.from(new Set(functions.sort()));
+	return `\
+/** ----------------------------------------------------------------------
+This file is automatically generated by \`scripts/globals-extractor.mjs\`.
+Generated At: ${new Date().toISOString()}
+---------------------------------------------------------------------- */
+
+export default new Set([
+${sorted.map((i) => `\t'${i}'`).join(',\n')}
+]);
+`;
+};
+
+const get_exists_globals = () => {
+	const regexp = /^\s*["'](.+)["'],?\s*$/;
+	return fs.readFileSync(GLOBAL_TS_PATH, 'utf8')
+		.split('\n')
+		.filter(line => line.match(regexp))
+		.map(line => line.match(regexp)[1]);
+};
+
+(async () => {
+	const globals = get_exists_globals();
+	const new_globals = await get_functions('es2021.full');
+	globals.forEach((g) => new_globals.push(g));
+	SPECIALS.forEach((g) => new_globals.push(g));
+	fs.writeFileSync(GLOBAL_TS_PATH, build_output(new_globals));
+})();
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 63c62a256a..2f8874de7a 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1,7 +1,8 @@
 import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Stats from '../Stats';
-import { globals, reserved, is_valid } from '../utils/names';
+import { reserved, is_valid } from '../utils/names';
+import globals from '../utils/globals';
 import { namespaces, valid_namespaces } from '../utils/namespaces';
 import create_module from './create_module';
 import {
diff --git a/src/compiler/utils/globals.ts b/src/compiler/utils/globals.ts
new file mode 100644
index 0000000000..ee43af3b91
--- /dev/null
+++ b/src/compiler/utils/globals.ts
@@ -0,0 +1,840 @@
+/** ----------------------------------------------------------------------
+This file is automatically generated by `scripts/globals-extractor.mjs`.
+Generated At: 2022-09-03T15:22:37.415Z
+---------------------------------------------------------------------- */
+
+export default new Set([
+	'AbortController',
+	'AbortSignal',
+	'AbstractRange',
+	'ActiveXObject',
+	'AggregateError',
+	'AnalyserNode',
+	'Animation',
+	'AnimationEffect',
+	'AnimationEvent',
+	'AnimationPlaybackEvent',
+	'AnimationTimeline',
+	'Array',
+	'ArrayBuffer',
+	'Atomics',
+	'Attr',
+	'Audio',
+	'AudioBuffer',
+	'AudioBufferSourceNode',
+	'AudioContext',
+	'AudioDestinationNode',
+	'AudioListener',
+	'AudioNode',
+	'AudioParam',
+	'AudioParamMap',
+	'AudioProcessingEvent',
+	'AudioScheduledSourceNode',
+	'AudioWorklet',
+	'AudioWorkletNode',
+	'AuthenticatorAssertionResponse',
+	'AuthenticatorAttestationResponse',
+	'AuthenticatorResponse',
+	'BarProp',
+	'BaseAudioContext',
+	'BeforeUnloadEvent',
+	'BigInt',
+	'BigInt64Array',
+	'BigUint64Array',
+	'BiquadFilterNode',
+	'Blob',
+	'BlobEvent',
+	'Boolean',
+	'BroadcastChannel',
+	'ByteLengthQueuingStrategy',
+	'CDATASection',
+	'CSS',
+	'CSSAnimation',
+	'CSSConditionRule',
+	'CSSCounterStyleRule',
+	'CSSFontFaceRule',
+	'CSSGroupingRule',
+	'CSSImportRule',
+	'CSSKeyframeRule',
+	'CSSKeyframesRule',
+	'CSSMediaRule',
+	'CSSNamespaceRule',
+	'CSSPageRule',
+	'CSSRule',
+	'CSSRuleList',
+	'CSSStyleDeclaration',
+	'CSSStyleRule',
+	'CSSStyleSheet',
+	'CSSSupportsRule',
+	'CSSTransition',
+	'Cache',
+	'CacheStorage',
+	'CanvasCaptureMediaStreamTrack',
+	'CanvasGradient',
+	'CanvasPattern',
+	'CanvasRenderingContext2D',
+	'ChannelMergerNode',
+	'ChannelSplitterNode',
+	'CharacterData',
+	'ClientRect',
+	'Clipboard',
+	'ClipboardEvent',
+	'ClipboardItem',
+	'CloseEvent',
+	'Comment',
+	'CompositionEvent',
+	'ConstantSourceNode',
+	'ConvolverNode',
+	'CountQueuingStrategy',
+	'Credential',
+	'CredentialsContainer',
+	'Crypto',
+	'CryptoKey',
+	'CustomElementRegistry',
+	'CustomEvent',
+	'DOMException',
+	'DOMImplementation',
+	'DOMMatrix',
+	'DOMMatrixReadOnly',
+	'DOMParser',
+	'DOMPoint',
+	'DOMPointReadOnly',
+	'DOMQuad',
+	'DOMRect',
+	'DOMRectList',
+	'DOMRectReadOnly',
+	'DOMStringList',
+	'DOMStringMap',
+	'DOMTokenList',
+	'DataTransfer',
+	'DataTransferItem',
+	'DataTransferItemList',
+	'DataView',
+	'Date',
+	'DelayNode',
+	'DeviceMotionEvent',
+	'DeviceOrientationEvent',
+	'Document',
+	'DocumentFragment',
+	'DocumentTimeline',
+	'DocumentType',
+	'DragEvent',
+	'DynamicsCompressorNode',
+	'Element',
+	'ElementInternals',
+	'Enumerator',
+	'Error',
+	'ErrorEvent',
+	'EvalError',
+	'Event',
+	'EventCounts',
+	'EventSource',
+	'EventTarget',
+	'External',
+	'File',
+	'FileList',
+	'FileReader',
+	'FileSystem',
+	'FileSystemDirectoryEntry',
+	'FileSystemDirectoryHandle',
+	'FileSystemDirectoryReader',
+	'FileSystemEntry',
+	'FileSystemFileEntry',
+	'FileSystemFileHandle',
+	'FileSystemHandle',
+	'FinalizationRegistry',
+	'Float32Array',
+	'Float64Array',
+	'FocusEvent',
+	'FontFace',
+	'FontFaceSet',
+	'FontFaceSetLoadEvent',
+	'FormData',
+	'FormDataEvent',
+	'Function',
+	'GainNode',
+	'Gamepad',
+	'GamepadButton',
+	'GamepadEvent',
+	'GamepadHapticActuator',
+	'Geolocation',
+	'GeolocationCoordinates',
+	'GeolocationPosition',
+	'GeolocationPositionError',
+	'HTMLAllCollection',
+	'HTMLAnchorElement',
+	'HTMLAreaElement',
+	'HTMLAudioElement',
+	'HTMLBRElement',
+	'HTMLBaseElement',
+	'HTMLBodyElement',
+	'HTMLButtonElement',
+	'HTMLCanvasElement',
+	'HTMLCollection',
+	'HTMLDListElement',
+	'HTMLDataElement',
+	'HTMLDataListElement',
+	'HTMLDetailsElement',
+	'HTMLDialogElement',
+	'HTMLDirectoryElement',
+	'HTMLDivElement',
+	'HTMLDocument',
+	'HTMLElement',
+	'HTMLEmbedElement',
+	'HTMLFieldSetElement',
+	'HTMLFontElement',
+	'HTMLFormControlsCollection',
+	'HTMLFormElement',
+	'HTMLFrameElement',
+	'HTMLFrameSetElement',
+	'HTMLHRElement',
+	'HTMLHeadElement',
+	'HTMLHeadingElement',
+	'HTMLHtmlElement',
+	'HTMLIFrameElement',
+	'HTMLImageElement',
+	'HTMLInputElement',
+	'HTMLLIElement',
+	'HTMLLabelElement',
+	'HTMLLegendElement',
+	'HTMLLinkElement',
+	'HTMLMapElement',
+	'HTMLMarqueeElement',
+	'HTMLMediaElement',
+	'HTMLMenuElement',
+	'HTMLMetaElement',
+	'HTMLMeterElement',
+	'HTMLModElement',
+	'HTMLOListElement',
+	'HTMLObjectElement',
+	'HTMLOptGroupElement',
+	'HTMLOptionElement',
+	'HTMLOptionsCollection',
+	'HTMLOutputElement',
+	'HTMLParagraphElement',
+	'HTMLParamElement',
+	'HTMLPictureElement',
+	'HTMLPreElement',
+	'HTMLProgressElement',
+	'HTMLQuoteElement',
+	'HTMLScriptElement',
+	'HTMLSelectElement',
+	'HTMLSlotElement',
+	'HTMLSourceElement',
+	'HTMLSpanElement',
+	'HTMLStyleElement',
+	'HTMLTableCaptionElement',
+	'HTMLTableCellElement',
+	'HTMLTableColElement',
+	'HTMLTableElement',
+	'HTMLTableRowElement',
+	'HTMLTableSectionElement',
+	'HTMLTemplateElement',
+	'HTMLTextAreaElement',
+	'HTMLTimeElement',
+	'HTMLTitleElement',
+	'HTMLTrackElement',
+	'HTMLUListElement',
+	'HTMLUnknownElement',
+	'HTMLVideoElement',
+	'HashChangeEvent',
+	'Headers',
+	'History',
+	'IDBCursor',
+	'IDBCursorWithValue',
+	'IDBDatabase',
+	'IDBFactory',
+	'IDBIndex',
+	'IDBKeyRange',
+	'IDBObjectStore',
+	'IDBOpenDBRequest',
+	'IDBRequest',
+	'IDBTransaction',
+	'IDBVersionChangeEvent',
+	'IIRFilterNode',
+	'IdleDeadline',
+	'Image',
+	'ImageBitmap',
+	'ImageBitmapRenderingContext',
+	'ImageData',
+	'Infinity',
+	'InputDeviceInfo',
+	'InputEvent',
+	'Int16Array',
+	'Int32Array',
+	'Int8Array',
+	'InternalError',
+	'IntersectionObserver',
+	'IntersectionObserverEntry',
+	'Intl',
+	'JSON',
+	'KeyboardEvent',
+	'KeyframeEffect',
+	'Location',
+	'Lock',
+	'LockManager',
+	'Map',
+	'Math',
+	'MathMLElement',
+	'MediaCapabilities',
+	'MediaDeviceInfo',
+	'MediaDevices',
+	'MediaElementAudioSourceNode',
+	'MediaEncryptedEvent',
+	'MediaError',
+	'MediaKeyMessageEvent',
+	'MediaKeySession',
+	'MediaKeyStatusMap',
+	'MediaKeySystemAccess',
+	'MediaKeys',
+	'MediaList',
+	'MediaMetadata',
+	'MediaQueryList',
+	'MediaQueryListEvent',
+	'MediaRecorder',
+	'MediaRecorderErrorEvent',
+	'MediaSession',
+	'MediaSource',
+	'MediaStream',
+	'MediaStreamAudioDestinationNode',
+	'MediaStreamAudioSourceNode',
+	'MediaStreamTrack',
+	'MediaStreamTrackEvent',
+	'MessageChannel',
+	'MessageEvent',
+	'MessagePort',
+	'MimeType',
+	'MimeTypeArray',
+	'MouseEvent',
+	'MutationEvent',
+	'MutationObserver',
+	'MutationRecord',
+	'NaN',
+	'NamedNodeMap',
+	'NavigationPreloadManager',
+	'Navigator',
+	'NetworkInformation',
+	'Node',
+	'NodeFilter',
+	'NodeIterator',
+	'NodeList',
+	'Notification',
+	'Number',
+	'Object',
+	'OfflineAudioCompletionEvent',
+	'OfflineAudioContext',
+	'Option',
+	'OscillatorNode',
+	'OverconstrainedError',
+	'PageTransitionEvent',
+	'PannerNode',
+	'Path2D',
+	'PaymentAddress',
+	'PaymentMethodChangeEvent',
+	'PaymentRequest',
+	'PaymentRequestUpdateEvent',
+	'PaymentResponse',
+	'Performance',
+	'PerformanceEntry',
+	'PerformanceEventTiming',
+	'PerformanceMark',
+	'PerformanceMeasure',
+	'PerformanceNavigation',
+	'PerformanceNavigationTiming',
+	'PerformanceObserver',
+	'PerformanceObserverEntryList',
+	'PerformancePaintTiming',
+	'PerformanceResourceTiming',
+	'PerformanceServerTiming',
+	'PerformanceTiming',
+	'PeriodicWave',
+	'PermissionStatus',
+	'Permissions',
+	'PictureInPictureWindow',
+	'Plugin',
+	'PluginArray',
+	'PointerEvent',
+	'PopStateEvent',
+	'ProcessingInstruction',
+	'ProgressEvent',
+	'Promise',
+	'PromiseRejectionEvent',
+	'Proxy',
+	'PublicKeyCredential',
+	'PushManager',
+	'PushSubscription',
+	'PushSubscriptionOptions',
+	'RTCCertificate',
+	'RTCDTMFSender',
+	'RTCDTMFToneChangeEvent',
+	'RTCDataChannel',
+	'RTCDataChannelEvent',
+	'RTCDtlsTransport',
+	'RTCEncodedAudioFrame',
+	'RTCEncodedVideoFrame',
+	'RTCError',
+	'RTCErrorEvent',
+	'RTCIceCandidate',
+	'RTCIceTransport',
+	'RTCPeerConnection',
+	'RTCPeerConnectionIceErrorEvent',
+	'RTCPeerConnectionIceEvent',
+	'RTCRtpReceiver',
+	'RTCRtpSender',
+	'RTCRtpTransceiver',
+	'RTCSctpTransport',
+	'RTCSessionDescription',
+	'RTCStatsReport',
+	'RTCTrackEvent',
+	'RadioNodeList',
+	'Range',
+	'RangeError',
+	'ReadableByteStreamController',
+	'ReadableStream',
+	'ReadableStreamBYOBReader',
+	'ReadableStreamBYOBRequest',
+	'ReadableStreamDefaultController',
+	'ReadableStreamDefaultReader',
+	'ReferenceError',
+	'Reflect',
+	'RegExp',
+	'RemotePlayback',
+	'Request',
+	'ResizeObserver',
+	'ResizeObserverEntry',
+	'ResizeObserverSize',
+	'Response',
+	'SVGAElement',
+	'SVGAngle',
+	'SVGAnimateElement',
+	'SVGAnimateMotionElement',
+	'SVGAnimateTransformElement',
+	'SVGAnimatedAngle',
+	'SVGAnimatedBoolean',
+	'SVGAnimatedEnumeration',
+	'SVGAnimatedInteger',
+	'SVGAnimatedLength',
+	'SVGAnimatedLengthList',
+	'SVGAnimatedNumber',
+	'SVGAnimatedNumberList',
+	'SVGAnimatedPreserveAspectRatio',
+	'SVGAnimatedRect',
+	'SVGAnimatedString',
+	'SVGAnimatedTransformList',
+	'SVGAnimationElement',
+	'SVGCircleElement',
+	'SVGClipPathElement',
+	'SVGComponentTransferFunctionElement',
+	'SVGCursorElement',
+	'SVGDefsElement',
+	'SVGDescElement',
+	'SVGElement',
+	'SVGEllipseElement',
+	'SVGFEBlendElement',
+	'SVGFEColorMatrixElement',
+	'SVGFEComponentTransferElement',
+	'SVGFECompositeElement',
+	'SVGFEConvolveMatrixElement',
+	'SVGFEDiffuseLightingElement',
+	'SVGFEDisplacementMapElement',
+	'SVGFEDistantLightElement',
+	'SVGFEDropShadowElement',
+	'SVGFEFloodElement',
+	'SVGFEFuncAElement',
+	'SVGFEFuncBElement',
+	'SVGFEFuncGElement',
+	'SVGFEFuncRElement',
+	'SVGFEGaussianBlurElement',
+	'SVGFEImageElement',
+	'SVGFEMergeElement',
+	'SVGFEMergeNodeElement',
+	'SVGFEMorphologyElement',
+	'SVGFEOffsetElement',
+	'SVGFEPointLightElement',
+	'SVGFESpecularLightingElement',
+	'SVGFESpotLightElement',
+	'SVGFETileElement',
+	'SVGFETurbulenceElement',
+	'SVGFilterElement',
+	'SVGForeignObjectElement',
+	'SVGGElement',
+	'SVGGeometryElement',
+	'SVGGradientElement',
+	'SVGGraphicsElement',
+	'SVGImageElement',
+	'SVGLength',
+	'SVGLengthList',
+	'SVGLineElement',
+	'SVGLinearGradientElement',
+	'SVGMPathElement',
+	'SVGMarkerElement',
+	'SVGMaskElement',
+	'SVGMatrix',
+	'SVGMetadataElement',
+	'SVGNumber',
+	'SVGNumberList',
+	'SVGPathElement',
+	'SVGPatternElement',
+	'SVGPoint',
+	'SVGPointList',
+	'SVGPolygonElement',
+	'SVGPolylineElement',
+	'SVGPreserveAspectRatio',
+	'SVGRadialGradientElement',
+	'SVGRect',
+	'SVGRectElement',
+	'SVGSVGElement',
+	'SVGScriptElement',
+	'SVGSetElement',
+	'SVGStopElement',
+	'SVGStringList',
+	'SVGStyleElement',
+	'SVGSwitchElement',
+	'SVGSymbolElement',
+	'SVGTSpanElement',
+	'SVGTextContentElement',
+	'SVGTextElement',
+	'SVGTextPathElement',
+	'SVGTextPositioningElement',
+	'SVGTitleElement',
+	'SVGTransform',
+	'SVGTransformList',
+	'SVGUnitTypes',
+	'SVGUseElement',
+	'SVGViewElement',
+	'SafeArray',
+	'Screen',
+	'ScreenOrientation',
+	'ScriptProcessorNode',
+	'SecurityPolicyViolationEvent',
+	'Selection',
+	'ServiceWorker',
+	'ServiceWorkerContainer',
+	'ServiceWorkerRegistration',
+	'Set',
+	'ShadowRoot',
+	'SharedArrayBuffer',
+	'SharedWorker',
+	'SourceBuffer',
+	'SourceBufferList',
+	'SpeechRecognitionAlternative',
+	'SpeechRecognitionErrorEvent',
+	'SpeechRecognitionResult',
+	'SpeechRecognitionResultList',
+	'SpeechSynthesis',
+	'SpeechSynthesisErrorEvent',
+	'SpeechSynthesisEvent',
+	'SpeechSynthesisUtterance',
+	'SpeechSynthesisVoice',
+	'StaticRange',
+	'StereoPannerNode',
+	'Storage',
+	'StorageEvent',
+	'StorageManager',
+	'String',
+	'StyleMedia',
+	'StyleSheet',
+	'StyleSheetList',
+	'SubmitEvent',
+	'SubtleCrypto',
+	'Symbol',
+	'SyntaxError',
+	'Text',
+	'TextDecoder',
+	'TextDecoderStream',
+	'TextEncoder',
+	'TextEncoderStream',
+	'TextMetrics',
+	'TextTrack',
+	'TextTrackCue',
+	'TextTrackCueList',
+	'TextTrackList',
+	'TimeRanges',
+	'Touch',
+	'TouchEvent',
+	'TouchList',
+	'TrackEvent',
+	'TransformStream',
+	'TransformStreamDefaultController',
+	'TransitionEvent',
+	'TreeWalker',
+	'TypeError',
+	'UIEvent',
+	'URIError',
+	'URL',
+	'URLSearchParams',
+	'Uint16Array',
+	'Uint32Array',
+	'Uint8Array',
+	'Uint8ClampedArray',
+	'VBArray',
+	'VTTCue',
+	'VTTRegion',
+	'ValidityState',
+	'VarDate',
+	'VideoColorSpace',
+	'VideoPlaybackQuality',
+	'VisualViewport',
+	'WSH',
+	'WScript',
+	'WaveShaperNode',
+	'WeakMap',
+	'WeakRef',
+	'WeakSet',
+	'WebAssembly',
+	'WebGL2RenderingContext',
+	'WebGLActiveInfo',
+	'WebGLBuffer',
+	'WebGLContextEvent',
+	'WebGLFramebuffer',
+	'WebGLProgram',
+	'WebGLQuery',
+	'WebGLRenderbuffer',
+	'WebGLRenderingContext',
+	'WebGLSampler',
+	'WebGLShader',
+	'WebGLShaderPrecisionFormat',
+	'WebGLSync',
+	'WebGLTexture',
+	'WebGLTransformFeedback',
+	'WebGLUniformLocation',
+	'WebGLVertexArrayObject',
+	'WebKitCSSMatrix',
+	'WebSocket',
+	'WheelEvent',
+	'Window',
+	'Worker',
+	'Worklet',
+	'WritableStream',
+	'WritableStreamDefaultController',
+	'WritableStreamDefaultWriter',
+	'XMLDocument',
+	'XMLHttpRequest',
+	'XMLHttpRequestEventTarget',
+	'XMLHttpRequestUpload',
+	'XMLSerializer',
+	'XPathEvaluator',
+	'XPathExpression',
+	'XPathResult',
+	'XSLTProcessor',
+	'addEventListener',
+	'alert',
+	'atob',
+	'blur',
+	'btoa',
+	'caches',
+	'cancelAnimationFrame',
+	'cancelIdleCallback',
+	'captureEvents',
+	'clearInterval',
+	'clearTimeout',
+	'clientInformation',
+	'close',
+	'closed',
+	'confirm',
+	'console',
+	'createImageBitmap',
+	'crossOriginIsolated',
+	'crypto',
+	'customElements',
+	'decodeURI',
+	'decodeURIComponent',
+	'devicePixelRatio',
+	'dispatchEvent',
+	'document',
+	'encodeURI',
+	'encodeURIComponent',
+	'escape',
+	'eval',
+	'event',
+	'external',
+	'fetch',
+	'focus',
+	'frameElement',
+	'frames',
+	'getComputedStyle',
+	'getSelection',
+	'global',
+	'globalThis',
+	'history',
+	'importScripts',
+	'indexedDB',
+	'innerHeight',
+	'innerWidth',
+	'isFinite',
+	'isNaN',
+	'isSecureContext',
+	'length',
+	'localStorage',
+	'location',
+	'locationbar',
+	'matchMedia',
+	'menubar',
+	'moveBy',
+	'moveTo',
+	'name',
+	'navigator',
+	'onabort',
+	'onafterprint',
+	'onanimationcancel',
+	'onanimationend',
+	'onanimationiteration',
+	'onanimationstart',
+	'onauxclick',
+	'onbeforeprint',
+	'onbeforeunload',
+	'onblur',
+	'oncanplay',
+	'oncanplaythrough',
+	'onchange',
+	'onclick',
+	'onclose',
+	'oncontextmenu',
+	'oncuechange',
+	'ondblclick',
+	'ondevicemotion',
+	'ondeviceorientation',
+	'ondrag',
+	'ondragend',
+	'ondragenter',
+	'ondragleave',
+	'ondragover',
+	'ondragstart',
+	'ondrop',
+	'ondurationchange',
+	'onemptied',
+	'onended',
+	'onerror',
+	'onfocus',
+	'onformdata',
+	'ongamepadconnected',
+	'ongamepaddisconnected',
+	'ongotpointercapture',
+	'onhashchange',
+	'oninput',
+	'oninvalid',
+	'onkeydown',
+	'onkeypress',
+	'onkeyup',
+	'onlanguagechange',
+	'onload',
+	'onloadeddata',
+	'onloadedmetadata',
+	'onloadstart',
+	'onlostpointercapture',
+	'onmessage',
+	'onmessageerror',
+	'onmousedown',
+	'onmouseenter',
+	'onmouseleave',
+	'onmousemove',
+	'onmouseout',
+	'onmouseover',
+	'onmouseup',
+	'onoffline',
+	'ononline',
+	'onorientationchange',
+	'onpagehide',
+	'onpageshow',
+	'onpause',
+	'onplay',
+	'onplaying',
+	'onpointercancel',
+	'onpointerdown',
+	'onpointerenter',
+	'onpointerleave',
+	'onpointermove',
+	'onpointerout',
+	'onpointerover',
+	'onpointerup',
+	'onpopstate',
+	'onprogress',
+	'onratechange',
+	'onrejectionhandled',
+	'onreset',
+	'onresize',
+	'onscroll',
+	'onsecuritypolicyviolation',
+	'onseeked',
+	'onseeking',
+	'onselect',
+	'onselectionchange',
+	'onselectstart',
+	'onslotchange',
+	'onstalled',
+	'onstorage',
+	'onsubmit',
+	'onsuspend',
+	'ontimeupdate',
+	'ontoggle',
+	'ontouchcancel',
+	'ontouchend',
+	'ontouchmove',
+	'ontouchstart',
+	'ontransitioncancel',
+	'ontransitionend',
+	'ontransitionrun',
+	'ontransitionstart',
+	'onunhandledrejection',
+	'onunload',
+	'onvolumechange',
+	'onwaiting',
+	'onwebkitanimationend',
+	'onwebkitanimationiteration',
+	'onwebkitanimationstart',
+	'onwebkittransitionend',
+	'onwheel',
+	'open',
+	'opener',
+	'orientation',
+	'origin',
+	'outerHeight',
+	'outerWidth',
+	'pageXOffset',
+	'pageYOffset',
+	'parent',
+	'parseFloat',
+	'parseInt',
+	'performance',
+	'personalbar',
+	'postMessage',
+	'print',
+	'process',
+	'prompt',
+	'queueMicrotask',
+	'releaseEvents',
+	'removeEventListener',
+	'reportError',
+	'requestAnimationFrame',
+	'requestIdleCallback',
+	'resizeBy',
+	'resizeTo',
+	'screen',
+	'screenLeft',
+	'screenTop',
+	'screenX',
+	'screenY',
+	'scroll',
+	'scrollBy',
+	'scrollTo',
+	'scrollX',
+	'scrollY',
+	'scrollbars',
+	'self',
+	'sessionStorage',
+	'setInterval',
+	'setTimeout',
+	'speechSynthesis',
+	'status',
+	'statusbar',
+	'stop',
+	'structuredClone',
+	'toString',
+	'toolbar',
+	'top',
+	'undefined',
+	'unescape',
+	'visualViewport',
+	'webkitURL',
+	'window'
+]);
diff --git a/src/compiler/utils/names.ts b/src/compiler/utils/names.ts
index e091edb19e..9d5b78fceb 100644
--- a/src/compiler/utils/names.ts
+++ b/src/compiler/utils/names.ts
@@ -1,71 +1,6 @@
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import full_char_code_at from './full_char_code_at';
 
-export const globals = new Set([
-	'alert',
-	'Array',
-	'BigInt',
-	'Boolean',
-	'clearInterval',
-	'clearTimeout',
-	'confirm',
-	'console',
-	'Date',
-	'decodeURI',
-	'decodeURIComponent',
-	'document',
-	'Element',
-	'encodeURI',
-	'encodeURIComponent',
-	'Error',
-	'EvalError',
-	'Event',
-	'EventSource',
-	'fetch',
-	'FormData',
-	'global',
-	'globalThis',
-	'history',
-	'HTMLElement',
-	'Infinity',
-	'InternalError',
-	'Intl',
-	'isFinite',
-	'isNaN',
-	'JSON',
-	'localStorage',
-	'location',
-	'Map',
-	'Math',
-	'NaN',
-	'navigator',
-	'Node',
-	'Number',
-	'Object',
-	'parseFloat',
-	'parseInt',
-	'process',
-	'Promise',
-	'prompt',
-	'RangeError',
-	'ReferenceError',
-	'RegExp',
-	'sessionStorage',
-	'Set',
-	'setInterval',
-	'setTimeout',
-	'String',
-	'SVGElement',
-	'Symbol',
-	'SyntaxError',
-	'TypeError',
-	'undefined',
-	'URIError',
-	'URL',
-	'URLSearchParams',
-	'window'
-]);
-
 export const reserved = new Set([
 	'arguments',
 	'await',

From ed078e31fe1d3594c105a17f7fb6def769b386f6 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 4 Sep 2022 19:08:46 +0900
Subject: [PATCH 67/89] update changelog (#7835)

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92155c0be8..18c0b63d06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issue/3805), [#7223](https://github.com/sveltejs/svelte/issue/7223), [#7240](https://github.com/sveltejs/svelte/issue/7240))
+* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))
 
 ## 3.50.0
 

From 07d6d179abb7fb86f45cd5175820bbb1c5cbf0e9 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Fri, 9 Sep 2022 05:49:57 +0900
Subject: [PATCH 68/89] [fix] style manager transition regression (#7831)

---
 src/runtime/internal/dom.ts                   |  8 +++++++-
 src/runtime/internal/style_manager.ts         | 16 +++++++--------
 test/runtime-puppeteer/index.ts               | 17 ++++++++++++++--
 .../samples/style_manager-cleanup/_config.js  | 17 ++++++++++++++++
 .../samples/style_manager-cleanup/main.svelte | 16 +++++++++++++++
 .../samples/transition-css-out-in/_config.js  | 14 +++++++++++++
 .../samples/transition-css-out-in/main.svelte | 20 +++++++++++++++++++
 .../samples/style_manager-cleanup/_config.js  | 14 -------------
 .../samples/style_manager-cleanup/main.svelte | 14 -------------
 9 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/style_manager-cleanup/_config.js
 create mode 100644 test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/transition-css-out-in/_config.js
 create mode 100644 test/runtime-puppeteer/samples/transition-css-out-in/main.svelte
 delete mode 100644 test/runtime/samples/style_manager-cleanup/_config.js
 delete mode 100644 test/runtime/samples/style_manager-cleanup/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 8a7d3af6da..e678481a5f 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -154,7 +154,13 @@ export function get_root_for_style(node: Node): ShadowRoot | Document {
 	return node.ownerDocument;
 }
 
-export function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
+export function append_empty_stylesheet(node: Node) {
+	const style_element = element('style') as HTMLStyleElement;
+	append_stylesheet(get_root_for_style(node), style_element);
+	return style_element.sheet as CSSStyleSheet;
+}
+
+function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
 	append((node as Document).head || node, style);
 	return style.sheet as CSSStyleSheet;
 }
diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts
index 67236cabab..36dc1e6044 100644
--- a/src/runtime/internal/style_manager.ts
+++ b/src/runtime/internal/style_manager.ts
@@ -1,8 +1,8 @@
-import { append_stylesheet, detach, element, get_root_for_style } from './dom';
+import { append_empty_stylesheet, detach, get_root_for_style } from './dom';
 import { raf } from './environment';
 
 interface StyleInformation {
-	style_element: HTMLStyleElement;
+	stylesheet: CSSStyleSheet;
 	rules: Record<string, true>;
 }
 
@@ -20,8 +20,8 @@ function hash(str: string) {
 	return hash >>> 0;
 }
 
-function create_style_information(doc: Document | ShadowRoot) {
-	const info = { style_element: element('style'), rules: {} };
+function create_style_information(doc: Document | ShadowRoot, node: Element & ElementCSSInlineStyle) {
+	const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
 	managed_styles.set(doc, info);
 	return info;
 }
@@ -39,10 +39,9 @@ export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b:
 	const name = `__svelte_${hash(rule)}_${uid}`;
 	const doc = get_root_for_style(node);
 
-	const { style_element, rules } = managed_styles.get(doc) || create_style_information(doc);
+	const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
 
 	if (!rules[name]) {
-		const stylesheet = append_stylesheet(doc, style_element);
 		rules[name] = true;
 		stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
 	}
@@ -72,8 +71,9 @@ export function clear_rules() {
 	raf(() => {
 		if (active) return;
 		managed_styles.forEach(info => {
-			const { style_element } = info;
-			detach(style_element);
+			const { ownerNode } = info.stylesheet;
+			// there is no ownerNode if it runs on jsdom.
+			if (ownerNode) detach(ownerNode);
 		});
 		managed_styles.clear();
 	});
diff --git a/test/runtime-puppeteer/index.ts b/test/runtime-puppeteer/index.ts
index 8e6f813de4..62952ad9f7 100644
--- a/test/runtime-puppeteer/index.ts
+++ b/test/runtime-puppeteer/index.ts
@@ -117,8 +117,12 @@ describe('runtime (puppeteer)', function() {
 						load(id) {
 							if (id === 'main') {
 								return `
-									import SvelteComponent from ${JSON.stringify(path.join(__dirname, 'samples', dir, 'main.svelte'))};
-									import config from ${JSON.stringify(path.join(__dirname, 'samples', dir, '_config.js'))};
+									import SvelteComponent from ${JSON.stringify(
+										path.join(__dirname, 'samples', dir, 'main.svelte')
+									)};
+									import config from ${JSON.stringify(
+										path.join(__dirname, 'samples', dir, '_config.js')
+									)};
 									import * as assert from 'assert';
 
 									export default async function (target) {
@@ -140,6 +144,14 @@ describe('runtime (puppeteer)', function() {
 
 											const component = new SvelteComponent(options);
 
+											const waitUntil = async (fn, ms = 500) => {
+												const start = new Date().getTime();
+												do {
+													if (fn()) return;
+													await new Promise(resolve => window.setTimeout(resolve, 1));
+												} while (new Date().getTime() <= start + ms);
+											};
+
 											if (config.html) {
 												assert.htmlEqual(target.innerHTML, config.html);
 											}
@@ -150,6 +162,7 @@ describe('runtime (puppeteer)', function() {
 													component,
 													target,
 													window,
+													waitUntil,
 												});
 
 												component.$destroy();
diff --git a/test/runtime-puppeteer/samples/style_manager-cleanup/_config.js b/test/runtime-puppeteer/samples/style_manager-cleanup/_config.js
new file mode 100644
index 0000000000..b3a5a97e45
--- /dev/null
+++ b/test/runtime-puppeteer/samples/style_manager-cleanup/_config.js
@@ -0,0 +1,17 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	skip_if_hydrate_from_ssr: true,
+	test: async ({ component, assert, window, waitUntil }) => {
+		assert.htmlEqual(window.document.head.innerHTML, '');
+		component.visible = true;
+		assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
+		await waitUntil(() => window.document.head.innerHTML === '');
+		assert.htmlEqual(window.document.head.innerHTML, '');
+
+		component.visible = false;
+		assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
+		await waitUntil(() => window.document.head.innerHTML === '');
+		assert.htmlEqual(window.document.head.innerHTML, '');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte b/test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte
new file mode 100644
index 0000000000..ab13073b1e
--- /dev/null
+++ b/test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
diff --git a/test/runtime-puppeteer/samples/transition-css-out-in/_config.js b/test/runtime-puppeteer/samples/transition-css-out-in/_config.js
new file mode 100644
index 0000000000..a50d28b257
--- /dev/null
+++ b/test/runtime-puppeteer/samples/transition-css-out-in/_config.js
@@ -0,0 +1,14 @@
+export default {
+	test: async ({ assert, component, window, waitUntil }) => {
+		component.visible = true;
+		await waitUntil(() => window.document.head.querySelector('style').sheet.rules.length === 2);
+		assert.equal(window.document.head.querySelector('style').sheet.rules.length, 2);
+		await waitUntil(() => window.document.head.querySelector('style') === null);
+		assert.equal(window.document.head.querySelector('style'), null);
+		component.visible = false;
+		await waitUntil(() => window.document.head.querySelector('style').sheet.rules.length === 2);
+		assert.equal(window.document.head.querySelector('style').sheet.rules.length, 2);
+		await waitUntil(() => window.document.head.querySelector('style') === null);
+		assert.equal(window.document.head.querySelector('style'), null);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/transition-css-out-in/main.svelte b/test/runtime-puppeteer/samples/transition-css-out-in/main.svelte
new file mode 100644
index 0000000000..3ee93f0b55
--- /dev/null
+++ b/test/runtime-puppeteer/samples/transition-css-out-in/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
+
+{#if !visible}
+	<div transition:foo></div>
+{/if}
diff --git a/test/runtime/samples/style_manager-cleanup/_config.js b/test/runtime/samples/style_manager-cleanup/_config.js
deleted file mode 100644
index 7609d76cf2..0000000000
--- a/test/runtime/samples/style_manager-cleanup/_config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
-	skip_if_ssr: true,
-	skip_if_hydrate: true,
-	skip_if_hydrate_from_ssr: true,
-	test({ raf, assert, component, window }) {
-		component.visible = true;
-		raf.tick(100);
-		component.visible = false;
-		raf.tick(200);
-		raf.tick(0);
-
-		assert.htmlEqual(window.document.head.innerHTML, '');
-	}
-};
diff --git a/test/runtime/samples/style_manager-cleanup/main.svelte b/test/runtime/samples/style_manager-cleanup/main.svelte
deleted file mode 100644
index c2ccdc7c09..0000000000
--- a/test/runtime/samples/style_manager-cleanup/main.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-    export let visible = false;
-    
-    function foo() {
-        return {
-            duration: 100,
-            css: () => ''
-        };
-    }
-    </script>
-    
-    {#if visible}
-        <div transition:foo></div>
-    {/if}
\ No newline at end of file

From 24aff3032d7af26162fb6a319b07131d21739e9c Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 8 Sep 2022 16:52:21 -0400
Subject: [PATCH 69/89] -> v3.50.1

---
 CHANGELOG.md      | 5 +++--
 package-lock.json | 2 +-
 package.json      | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18c0b63d06..a90eb4aa3d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,9 @@
 # Svelte changelog
 
-## Unreleased
+## 3.50.1
 
-* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))
+* Add all global objects and functions as known globals ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))
+* Fix regression with style manager ([#7828](https://github.com/sveltejs/svelte/issues/7828))
 
 ## 3.50.0
 
diff --git a/package-lock.json b/package-lock.json
index 8beef8470a..23ccc6b66f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.50.0",
+  "version": "3.50.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 3e22d8b627..836fa33267 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.50.0",
+  "version": "3.50.1",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From 7ac3854613ebad0b30a1d1b8dc0a2a34542a8de5 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sat, 10 Sep 2022 14:00:50 -0700
Subject: [PATCH 70/89] [docs] remove beta label from SvelteKit mention (#7853)

---
 site/content/faq/900-is-there-a-router.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/faq/900-is-there-a-router.md b/site/content/faq/900-is-there-a-router.md
index 9d50bbe490..2f11e0e626 100644
--- a/site/content/faq/900-is-there-a-router.md
+++ b/site/content/faq/900-is-there-a-router.md
@@ -2,7 +2,7 @@
 question: Is there a router?
 ---
 
-The official routing library is [SvelteKit](https://kit.svelte.dev/), which is currently in beta. 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.
+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.
 
 However, you can use any router lib you want. 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.
 

From 8ffc8fd77bf667fdf41bb1f08ed4d1da6641320f Mon Sep 17 00:00:00 2001
From: Maximiliano Ruani <maxi.ruani@hotmail.com>
Date: Sun, 11 Sep 2022 15:35:17 -0300
Subject: [PATCH 71/89] [fix] Fix hydration duplicate `svelte:head` tag issue
 with `@html` expressions and nested components (#7745)

* Fix hydration duplicate `svelte:head` tag issue with `@html` and nested components #7444 #6463

* - Changed comment style to HEAD_${head_id}_START and HEAD_${head_id}_END
- Improved claim logic
- Changed tests accordingly
---
 .../compile/render_dom/wrappers/Head.ts       |  2 +-
 .../compile/render_ssr/handlers/Element.ts    |  4 ----
 .../compile/render_ssr/handlers/Head.ts       |  2 +-
 src/runtime/internal/dom.ts                   | 21 +++++++++++++++++++
 .../head-html-and-component/HeadNested.svelte |  2 ++
 .../head-html-and-component/Nested.svelte     |  5 +++++
 .../head-html-and-component/_after.html       |  0
 .../head-html-and-component/_after_head.html  | 12 +++++++++++
 .../head-html-and-component/_before.html      |  0
 .../head-html-and-component/_before_head.html | 11 ++++++++++
 .../head-html-and-component/main.svelte       | 12 +++++++++++
 .../_after_head.html                          |  8 ++++---
 .../_before_head.html                         |  8 ++++---
 .../head-html-and-component/HeadNested.svelte |  2 ++
 .../head-html-and-component/Nested.svelte     |  5 +++++
 .../_expected-head.html                       | 11 ++++++++++
 .../head-html-and-component/_expected.html    |  0
 .../head-html-and-component/main.svelte       | 12 +++++++++++
 .../_expected-head.html                       |  8 ++++---
 19 files changed, 110 insertions(+), 15 deletions(-)
 create mode 100644 test/hydration/samples/head-html-and-component/HeadNested.svelte
 create mode 100644 test/hydration/samples/head-html-and-component/Nested.svelte
 create mode 100644 test/hydration/samples/head-html-and-component/_after.html
 create mode 100644 test/hydration/samples/head-html-and-component/_after_head.html
 create mode 100644 test/hydration/samples/head-html-and-component/_before.html
 create mode 100644 test/hydration/samples/head-html-and-component/_before_head.html
 create mode 100644 test/hydration/samples/head-html-and-component/main.svelte
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/Nested.svelte
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/_expected-head.html
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/_expected.html
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts
index e0b723d6dd..3869994ae4 100644
--- a/src/compiler/compile/render_dom/wrappers/Head.ts
+++ b/src/compiler/compile/render_dom/wrappers/Head.ts
@@ -36,7 +36,7 @@ export default class HeadWrapper extends Wrapper {
 		let nodes;
 		if (this.renderer.options.hydratable && this.fragment.nodes.length) {
 			nodes = block.get_unique_name('head_nodes');
-			block.chunks.claim.push(b`const ${nodes} = @query_selector_all('[data-svelte="${this.node.id}"]', @_document.head);`);
+			block.chunks.claim.push(b`const ${nodes} = @head_selector('${this.node.id}', @_document.head);`);
 		}
 
 		this.fragment.render(block, x`@_document.head` as unknown as Identifier, nodes);
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 7f7672349e..2af0343b2a 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -157,10 +157,6 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 		}
 	});
 
-	if (options.hydratable && options.head_id) {
-		renderer.add_string(` data-svelte="${options.head_id}"`);
-	}
-
 	renderer.add_string('>');
 
 	if (node_contents !== undefined) {
diff --git a/src/compiler/compile/render_ssr/handlers/Head.ts b/src/compiler/compile/render_ssr/handlers/Head.ts
index cf1e6bd555..f4bb3fa118 100644
--- a/src/compiler/compile/render_ssr/handlers/Head.ts
+++ b/src/compiler/compile/render_ssr/handlers/Head.ts
@@ -12,5 +12,5 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions)
 	renderer.render(node.children, head_options);
 	const result = renderer.pop();
 
-	renderer.add_expression(x`$$result.head += ${result}, ""`);
+	renderer.add_expression(x`$$result.head += '<!-- HEAD_${node.id}_START -->' + ${result} + '<!-- HEAD_${node.id}_END -->', ""`);
 }
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index e678481a5f..090b8925e1 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -646,6 +646,27 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum
 	return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray;
 }
 
+export function head_selector(nodeId: string, head: HTMLElement) {
+	const result = [];
+	let started = 0;
+
+	for (const node of head.childNodes) {
+		if (node.nodeType === 8 /* comment node */) {
+			const comment = node.textContent.trim();
+			if (comment === `HEAD_${nodeId}_END`) {
+				started -= 1;
+				result.push(node);
+			} else if (comment === `HEAD_${nodeId}_START`) {
+				started += 1;
+				result.push(node);
+			}
+		} else if (started > 0) {
+			result.push(node);
+		}
+	}
+	return result;
+}
+
 export class HtmlTag {
 	private is_svg = false;
 	// parent for creating node
diff --git a/test/hydration/samples/head-html-and-component/HeadNested.svelte b/test/hydration/samples/head-html-and-component/HeadNested.svelte
new file mode 100644
index 0000000000..33bbdd1fd1
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/HeadNested.svelte
@@ -0,0 +1,2 @@
+{@html '<meta name="head_nested_html" content="head_nested_html">'}
+<meta name="head_nested" content="head_nested">
diff --git a/test/hydration/samples/head-html-and-component/Nested.svelte b/test/hydration/samples/head-html-and-component/Nested.svelte
new file mode 100644
index 0000000000..28f5371910
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/Nested.svelte
@@ -0,0 +1,5 @@
+
+<svelte:head>
+	{@html '<meta name="nested_html" content="nested_html">'}
+	<meta name="nested" content="nested">
+</svelte:head>
diff --git a/test/hydration/samples/head-html-and-component/_after.html b/test/hydration/samples/head-html-and-component/_after.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/hydration/samples/head-html-and-component/_after_head.html b/test/hydration/samples/head-html-and-component/_after_head.html
new file mode 100644
index 0000000000..d7f94eda1b
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/_after_head.html
@@ -0,0 +1,12 @@
+<!-- HEAD_svelte-17ibcve_START -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_svelte-17ibcve_END -->
+
+<!-- HEAD_svelte-1gqzvnn_START -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_svelte-1gqzvnn_END -->
+
diff --git a/test/hydration/samples/head-html-and-component/_before.html b/test/hydration/samples/head-html-and-component/_before.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/hydration/samples/head-html-and-component/_before_head.html b/test/hydration/samples/head-html-and-component/_before_head.html
new file mode 100644
index 0000000000..da265f414d
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/_before_head.html
@@ -0,0 +1,11 @@
+<!-- HEAD_svelte-17ibcve_START -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_svelte-17ibcve_END -->
+
+<!-- HEAD_svelte-1gqzvnn_START -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_svelte-1gqzvnn_END -->
diff --git a/test/hydration/samples/head-html-and-component/main.svelte b/test/hydration/samples/head-html-and-component/main.svelte
new file mode 100644
index 0000000000..188ecace6b
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+	import Nested from './Nested.svelte';
+</script>
+
+<svelte:head>
+	{@html '<meta name="main_html" content="main_html">'}
+	<meta name="main" content="main">
+	<HeadNested />
+</svelte:head>
+
+<Nested/>
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
index be7a01ba4f..bdd08c32f5 100644
--- a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link href="/" rel="canonical">
-<meta content="some description" name="description">
-<meta content="some keywords" name="keywords">
+<!-- HEAD_svelte-1s8aodm_START -->
+<link rel="canonical" href="/">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_svelte-1s8aodm_END -->
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
index 107753cdd0..bdd08c32f5 100644
--- a/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
-<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
-<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
\ No newline at end of file
+<!-- HEAD_svelte-1s8aodm_START -->
+<link rel="canonical" href="/">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_svelte-1s8aodm_END -->
diff --git a/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte b/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
new file mode 100644
index 0000000000..33bbdd1fd1
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
@@ -0,0 +1,2 @@
+{@html '<meta name="head_nested_html" content="head_nested_html">'}
+<meta name="head_nested" content="head_nested">
diff --git a/test/server-side-rendering/samples/head-html-and-component/Nested.svelte b/test/server-side-rendering/samples/head-html-and-component/Nested.svelte
new file mode 100644
index 0000000000..28f5371910
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/Nested.svelte
@@ -0,0 +1,5 @@
+
+<svelte:head>
+	{@html '<meta name="nested_html" content="nested_html">'}
+	<meta name="nested" content="nested">
+</svelte:head>
diff --git a/test/server-side-rendering/samples/head-html-and-component/_expected-head.html b/test/server-side-rendering/samples/head-html-and-component/_expected-head.html
new file mode 100644
index 0000000000..da265f414d
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/_expected-head.html
@@ -0,0 +1,11 @@
+<!-- HEAD_svelte-17ibcve_START -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_svelte-17ibcve_END -->
+
+<!-- HEAD_svelte-1gqzvnn_START -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_svelte-1gqzvnn_END -->
diff --git a/test/server-side-rendering/samples/head-html-and-component/_expected.html b/test/server-side-rendering/samples/head-html-and-component/_expected.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/server-side-rendering/samples/head-html-and-component/main.svelte b/test/server-side-rendering/samples/head-html-and-component/main.svelte
new file mode 100644
index 0000000000..188ecace6b
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+	import Nested from './Nested.svelte';
+</script>
+
+<svelte:head>
+	{@html '<meta name="main_html" content="main_html">'}
+	<meta name="main" content="main">
+	<HeadNested />
+</svelte:head>
+
+<Nested/>
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
index 107753cdd0..bdd08c32f5 100644
--- a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
-<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
-<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
\ No newline at end of file
+<!-- HEAD_svelte-1s8aodm_START -->
+<link rel="canonical" href="/">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_svelte-1s8aodm_END -->

From adcaa3c0503cacd7b61129bfebba8972cc49b661 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 02:41:18 +0800
Subject: [PATCH 72/89] Update CHANGELOG.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a90eb4aa3d..9612c8c53f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix hydration issue with using `{@html}` and components in `svelte:head` ([#4533](https://github.com/sveltejs/svelte/issues/4533), [#6463](https://github.com/sveltejs/svelte/issues/6463), [#7444](https://github.com/sveltejs/svelte/issues/7444))
+
 ## 3.50.1
 
 * Add all global objects and functions as known globals ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))

From 1e2a55c88e753cefc6acc668c83fee6cdbc70f31 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 12 Sep 2022 03:48:13 +0900
Subject: [PATCH 73/89] throw warning instead of error (#7834)

---
 src/runtime/internal/dev.ts                            |  4 +++-
 .../dynamic-element-void-with-content-1/_config.js     |  2 +-
 .../dynamic-element-void-with-content-2/_config.js     |  2 +-
 .../dynamic-element-void-with-content-3/_config.js     |  2 +-
 .../dynamic-element-void-with-content-5/_config.js     |  6 ++++++
 .../dynamic-element-void-with-content-5/main.svelte    | 10 ++++++++++
 6 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-5/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-5/main.svelte

diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index df40f94230..02677172fa 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -117,7 +117,9 @@ export function validate_dynamic_element(tag: unknown) {
 
 export function validate_void_dynamic_element(tag: undefined | string) {
 	if (tag && is_void(tag)) {
-		throw new Error(`<svelte:element this="${tag}"> is self-closing and cannot have content.`);
+		console.warn(
+			`<svelte:element this="${tag}"> is self-closing and cannot have content.`
+		);
 	}
 }
 
diff --git a/test/runtime/samples/dynamic-element-void-with-content-1/_config.js b/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
index 4016725e21..2888a8437b 100644
--- a/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
+++ b/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
@@ -5,5 +5,5 @@ export default {
 	props: {
 		tag: 'br'
 	},
-	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+	warnings: ['<svelte:element this="br"> is self-closing and cannot have content.']
 };
diff --git a/test/runtime/samples/dynamic-element-void-with-content-2/_config.js b/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
index 4016725e21..2888a8437b 100644
--- a/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
+++ b/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
@@ -5,5 +5,5 @@ export default {
 	props: {
 		tag: 'br'
 	},
-	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+	warnings: ['<svelte:element this="br"> is self-closing and cannot have content.']
 };
diff --git a/test/runtime/samples/dynamic-element-void-with-content-3/_config.js b/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
index 4016725e21..2888a8437b 100644
--- a/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
+++ b/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
@@ -5,5 +5,5 @@ export default {
 	props: {
 		tag: 'br'
 	},
-	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+	warnings: ['<svelte:element this="br"> is self-closing and cannot have content.']
 };
diff --git a/test/runtime/samples/dynamic-element-void-with-content-5/_config.js b/test/runtime/samples/dynamic-element-void-with-content-5/_config.js
new file mode 100644
index 0000000000..6e56f6bdba
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-5/_config.js
@@ -0,0 +1,6 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	warnings: ['<svelte:element this="input"> is self-closing and cannot have content.']
+};
diff --git a/test/runtime/samples/dynamic-element-void-with-content-5/main.svelte b/test/runtime/samples/dynamic-element-void-with-content-5/main.svelte
new file mode 100644
index 0000000000..990772b1e6
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-5/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	const tags = [{ t: 'div', content: 'hello world' }, { t: 'input' }];
+</script>
+
+{#each tags as tag}
+	{tag.t} <br />
+	<svelte:element this={tag.t}>
+		{#if tag.t !== 'input'}{tag.content}{/if}
+	</svelte:element>
+{/each}

From 2f6afefab053a52b8dac31aee35635df837c8f61 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 02:49:22 +0800
Subject: [PATCH 74/89] Update CHANGELOG.md

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9612c8c53f..1d8ad6f630 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ## Unreleased
 
 * Fix hydration issue with using `{@html}` and components in `svelte:head` ([#4533](https://github.com/sveltejs/svelte/issues/4533), [#6463](https://github.com/sveltejs/svelte/issues/6463), [#7444](https://github.com/sveltejs/svelte/issues/7444))
+* Warn instead of throwing error if `<svelte:element>` is void tag ([#7566](https://github.com/sveltejs/svelte/issues/7566))
+
 
 ## 3.50.1
 

From a5ca0ad65be5b79c51c9653f1ec16e84fbabba24 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 12 Sep 2022 04:03:02 +0900
Subject: [PATCH 75/89] [fix] added support for inert (remove duplicated code)
 (#7785)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: added support for inert

* remove duplicated boolean_attributes

Co-authored-by: Gautier Ben Aïm <48261497+GauBen@users.noreply.github.com>
---
 .../render_dom/wrappers/Element/Attribute.ts  | 32 ++-----------------
 src/shared/boolean_attributes.ts              |  2 ++
 2 files changed, 4 insertions(+), 30 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index 7b6aed0d5a..21a44ab92a 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -9,6 +9,7 @@ import Text from '../../../nodes/Text';
 import handle_select_value_binding from './handle_select_value_binding';
 import { Identifier, Node } from 'estree';
 import { namespaces } from '../../../../utils/namespaces';
+import { boolean_attributes } from '../../../../../shared/boolean_attributes';
 
 const non_textlike_input_types = new Set([
 	'button',
@@ -255,7 +256,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 
 	get_value(block) {
 		if (this.node.is_true) {
-			if (this.metadata && boolean_attribute.has(this.metadata.property_name.toLowerCase())) {
+			if (this.metadata && boolean_attributes.has(this.metadata.property_name.toLowerCase())) {
 				return x`true`;
 			}
 			return x`""`;
@@ -376,35 +377,6 @@ Object.keys(attribute_lookup).forEach(name => {
 	if (!metadata.property_name) metadata.property_name = name;
 });
 
-// source: https://html.spec.whatwg.org/multipage/indices.html
-const boolean_attribute = new Set([
-	'allowfullscreen',
-	'allowpaymentrequest',
-	'async',
-	'autofocus',
-	'autoplay',
-	'checked',
-	'controls',
-	'default',
-	'defer',
-	'disabled',
-	'formnovalidate',
-	'hidden',
-	'ismap',
-	'itemscope',
-	'loop',
-	'multiple',
-	'muted',
-	'nomodule',
-	'novalidate',
-	'open',
-	'playsinline',
-	'readonly',
-	'required',
-	'reversed',
-	'selected'
-]);
-
 function should_cache(attribute: AttributeWrapper) {
 	return attribute.is_src || attribute.node.should_cache();
 }
diff --git a/src/shared/boolean_attributes.ts b/src/shared/boolean_attributes.ts
index 4520a2064e..e29f921e32 100644
--- a/src/shared/boolean_attributes.ts
+++ b/src/shared/boolean_attributes.ts
@@ -12,7 +12,9 @@ export const boolean_attributes = new Set([
 	'disabled',
 	'formnovalidate',
 	'hidden',
+	'inert',
 	'ismap',
+	'itemscope',
 	'loop',
 	'multiple',
 	'muted',

From 78a249be36b1fa75a59755452554a531d0d4194a Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:04:47 +0800
Subject: [PATCH 76/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d8ad6f630..711e8a3d90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Fix hydration issue with using `{@html}` and components in `svelte:head` ([#4533](https://github.com/sveltejs/svelte/issues/4533), [#6463](https://github.com/sveltejs/svelte/issues/6463), [#7444](https://github.com/sveltejs/svelte/issues/7444))
 * Warn instead of throwing error if `<svelte:element>` is void tag ([#7566](https://github.com/sveltejs/svelte/issues/7566))
+* Treat `inert` as boolean attribute ([#7785](https://github.com/sveltejs/svelte/pull/7785))
 
 
 ## 3.50.1

From e2ef2b8731a897b36d81d130c78cd4a9019aa41f Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 11 Sep 2022 21:14:47 +0200
Subject: [PATCH 77/89] apply class for dynamic elements (#7652)

---
 src/compiler/compile/css/Selector.ts          |  2 +-
 .../samples/dynamic-element-tag/_config.js    |  3 ++
 .../samples/dynamic-element-tag/expected.css  |  1 +
 .../samples/dynamic-element-tag/expected.html |  4 +++
 .../samples/dynamic-element-tag/input.svelte  | 32 +++++++++++++++++++
 5 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 test/css/samples/dynamic-element-tag/_config.js
 create mode 100644 test/css/samples/dynamic-element-tag/expected.css
 create mode 100644 test/css/samples/dynamic-element-tag/expected.html
 create mode 100644 test/css/samples/dynamic-element-tag/input.svelte

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index d61ba1f510..17302c4abd 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -311,7 +311,7 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN
 				return BlockAppliesToNode.NotPossible;
 			}
 		} else if (selector.type === 'TypeSelector') {
-			if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*') return BlockAppliesToNode.NotPossible;
+			if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*' && !node.is_dynamic_element) return BlockAppliesToNode.NotPossible;
 		} else {
 			return BlockAppliesToNode.UnknownSelectorType;
 		}
diff --git a/test/css/samples/dynamic-element-tag/_config.js b/test/css/samples/dynamic-element-tag/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/dynamic-element-tag/expected.css b/test/css/samples/dynamic-element-tag/expected.css
new file mode 100644
index 0000000000..6af254e948
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>p.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz span.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>span.svelte-xyz>b.svelte-xyz{color:red}h2.svelte-xyz span b.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz b.svelte-xyz.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/dynamic-element-tag/expected.html b/test/css/samples/dynamic-element-tag/expected.html
new file mode 100644
index 0000000000..509ad1d839
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/expected.html
@@ -0,0 +1,4 @@
+<div class="svelte-xyz"></div>
+<h2 class="svelte-xyz">
+	<div class="svelte-xyz"><b class="svelte-xyz">text</b></div>
+</h2>
diff --git a/test/css/samples/dynamic-element-tag/input.svelte b/test/css/samples/dynamic-element-tag/input.svelte
new file mode 100644
index 0000000000..6e8851b3f9
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/input.svelte
@@ -0,0 +1,32 @@
+<script>
+	export let element = 'div';
+</script>
+
+<svelte:element this={element} />
+
+<h2>
+	<svelte:element this={element}>
+		<b>text</b>
+	</svelte:element>
+</h2>
+
+<style>
+	div {
+		color: red;
+	}
+	h2 > p {
+		color: red;
+	}
+	h2 span {
+		color: red;
+	}
+	h2 > span > b {
+		color: red;
+	}
+	h2 span b {
+		color: red;
+	}
+	h2 b {
+		color: red;
+	}
+</style>

From 1afcfd2b5f30216164c582d703eb29a6ad4bd831 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:15:45 +0800
Subject: [PATCH 78/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 711e8a3d90..25d819449d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Fix hydration issue with using `{@html}` and components in `svelte:head` ([#4533](https://github.com/sveltejs/svelte/issues/4533), [#6463](https://github.com/sveltejs/svelte/issues/6463), [#7444](https://github.com/sveltejs/svelte/issues/7444))
 * Warn instead of throwing error if `<svelte:element>` is void tag ([#7566](https://github.com/sveltejs/svelte/issues/7566))
 * Treat `inert` as boolean attribute ([#7785](https://github.com/sveltejs/svelte/pull/7785))
+* Supporting scoped style for `<svelte:element>` ([#7443](https://github.com/sveltejs/svelte/issues/7443))
 
 
 ## 3.50.1

From 6ec8ecf7999ad74ce8cf735a98adca630f9de105 Mon Sep 17 00:00:00 2001
From: Mathias Picker <48158184+MathiasWP@users.noreply.github.com>
Date: Sun, 11 Sep 2022 21:22:17 +0200
Subject: [PATCH 79/89] [fix] render of svg elements when using svelte:element
 (#7695)

* fixed render statement for svg when using  svelte:element

* removed unecessary stuff in test
---
 .../render_dom/wrappers/Element/index.ts      |   4 +-
 .../js/samples/svelte-element-svg/expected.js | 111 ++++++++++++++++++
 .../samples/svelte-element-svg/input.svelte   |   3 +
 3 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 test/js/samples/svelte-element-svg/expected.js
 create mode 100644 test/js/samples/svelte-element-svg/input.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 8e8e0d6706..531208c476 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -504,9 +504,10 @@ export default class ElementWrapper extends Wrapper {
 
 	get_render_statement(block: Block) {
 		const { name, namespace, tag_expr } = this.node;
+		const reference = tag_expr.manipulate(block);
 
 		if (namespace === namespaces.svg) {
-			return x`@svg_element("${name}")`;
+			return x`@svg_element(${reference})`;
 		}
 
 		if (namespace) {
@@ -518,7 +519,6 @@ export default class ElementWrapper extends Wrapper {
 			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
 		}
 
-		const reference = tag_expr.manipulate(block);
 		return x`@element(${reference})`;
 	}
 
diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js
new file mode 100644
index 0000000000..f9ca24ff30
--- /dev/null
+++ b/test/js/samples/svelte-element-svg/expected.js
@@ -0,0 +1,111 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	assign,
+	detach,
+	empty,
+	get_spread_update,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_svg_attributes,
+	svg_element
+} from "svelte/internal";
+
+function create_dynamic_element_1(ctx) {
+	return { c: noop, m: noop, p: noop, d: noop };
+}
+
+// (1:0) <svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+function create_dynamic_element(ctx) {
+	let svelte_element1;
+	let svelte_element0;
+	let svelte_element0_levels = [{ xmlns: "http://www.w3.org/2000/svg" }];
+	let svelte_element0_data = {};
+
+	for (let i = 0; i < svelte_element0_levels.length; i += 1) {
+		svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]);
+	}
+
+	let svelte_element1_levels = [{ xmlns: "http://www.w3.org/2000/svg" }];
+	let svelte_element1_data = {};
+
+	for (let i = 0; i < svelte_element1_levels.length; i += 1) {
+		svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]);
+	}
+
+	return {
+		c() {
+			svelte_element1 = svg_element("svg");
+			svelte_element0 = svg_element("path");
+			set_svg_attributes(svelte_element0, svelte_element0_data);
+			set_svg_attributes(svelte_element1, svelte_element1_data);
+		},
+		m(target, anchor) {
+			insert(target, svelte_element1, anchor);
+			append(svelte_element1, svelte_element0);
+		},
+		p(ctx, dirty) {
+			set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+			set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+		},
+		d(detaching) {
+			if (detaching) detach(svelte_element1);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let previous_tag = "svg";
+	let svelte_element1_anchor;
+	let svelte_element1 = "svg" && create_dynamic_element(ctx);
+
+	return {
+		c() {
+			if (svelte_element1) svelte_element1.c();
+			svelte_element1_anchor = empty();
+		},
+		m(target, anchor) {
+			if (svelte_element1) svelte_element1.m(target, anchor);
+			insert(target, svelte_element1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if ("svg") {
+				if (!previous_tag) {
+					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element1.c();
+					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+				} else if (safe_not_equal(previous_tag, "svg")) {
+					svelte_element1.d(1);
+					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element1.c();
+					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+				} else {
+					svelte_element1.p(ctx, dirty);
+				}
+			} else if (previous_tag) {
+				svelte_element1.d(1);
+				svelte_element1 = null;
+			}
+
+			previous_tag = "svg";
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svelte_element1_anchor);
+			if (svelte_element1) svelte_element1.d(detaching);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/svelte-element-svg/input.svelte b/test/js/samples/svelte-element-svg/input.svelte
new file mode 100644
index 0000000000..2dc4d54814
--- /dev/null
+++ b/test/js/samples/svelte-element-svg/input.svelte
@@ -0,0 +1,3 @@
+<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+    <svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
+</svelte:element>
\ No newline at end of file

From 87f0c461a84ae64ccd2d246e775b6deefc4150b9 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:23:12 +0800
Subject: [PATCH 80/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25d819449d..066df51b00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Warn instead of throwing error if `<svelte:element>` is void tag ([#7566](https://github.com/sveltejs/svelte/issues/7566))
 * Treat `inert` as boolean attribute ([#7785](https://github.com/sveltejs/svelte/pull/7785))
 * Supporting scoped style for `<svelte:element>` ([#7443](https://github.com/sveltejs/svelte/issues/7443))
+* Supports SVG elements with `<svelte:element>`([#7613](https://github.com/sveltejs/svelte/issues/7613))
 
 
 ## 3.50.1

From 78b81277e7bbce3bad5f287312d22ce5dc339d2e Mon Sep 17 00:00:00 2001
From: Vaibhav Rai <raivaibhav08@gmail.com>
Date: Mon, 12 Sep 2022 00:58:30 +0530
Subject: [PATCH 81/89] [fix]: Warn user when binding rest operator (#7526)

* Fix 6860: Warn user when binding rest operator

* move the binding validation to Binding node

* update test

Co-authored-by: vaibhav rai <vaibhavrai@vaibhavs-MacBook-Pro.local>

* add more test case, supporting deep destructuring and array destructuring

Co-authored-by: vaibhav rai <vaibhavrai@vaibhavs-MacBook-Pro.local>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/compiler_warnings.ts     |  6 ++++-
 src/compiler/compile/nodes/AwaitBlock.ts      |  6 +++--
 src/compiler/compile/nodes/Binding.ts         | 14 +++++++++++
 src/compiler/compile/nodes/ConstTag.ts        |  5 +++-
 src/compiler/compile/nodes/EachBlock.ts       |  6 ++---
 src/compiler/compile/nodes/shared/Context.ts  | 25 +++++++++++++------
 .../rest-eachblock-binding-2/input.svelte     | 11 ++++++++
 .../rest-eachblock-binding-2/warnings.json    |  9 +++++++
 .../rest-eachblock-binding-3/input.svelte     |  8 ++++++
 .../rest-eachblock-binding-3/warnings.json    |  9 +++++++
 .../rest-eachblock-binding/input.svelte       |  8 ++++++
 .../rest-eachblock-binding/warnings.json      |  9 +++++++
 12 files changed, 102 insertions(+), 14 deletions(-)
 create mode 100644 test/validator/samples/rest-eachblock-binding-2/input.svelte
 create mode 100644 test/validator/samples/rest-eachblock-binding-2/warnings.json
 create mode 100644 test/validator/samples/rest-eachblock-binding-3/input.svelte
 create mode 100644 test/validator/samples/rest-eachblock-binding-3/warnings.json
 create mode 100644 test/validator/samples/rest-eachblock-binding/input.svelte
 create mode 100644 test/validator/samples/rest-eachblock-binding/warnings.json

diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 5fc5faa8f1..b3e2e36797 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -186,5 +186,9 @@ export default {
 	redundant_event_modifier_passive: {
 		code: 'redundant-event-modifier',
 		message: 'The passive modifier only works with wheel and touch events'
-	}
+	},
+	invalid_rest_eachblock_binding: (rest_element_name: string) => ({
+		code: 'invalid-rest-eachblock-binding',
+		message: `...${rest_element_name} operator will create a new object and binding propogation with original object will not work`
+	})
 };
diff --git a/src/compiler/compile/nodes/AwaitBlock.ts b/src/compiler/compile/nodes/AwaitBlock.ts
index 735fdbfff3..4a669b6365 100644
--- a/src/compiler/compile/nodes/AwaitBlock.ts
+++ b/src/compiler/compile/nodes/AwaitBlock.ts
@@ -23,6 +23,8 @@ export default class AwaitBlock extends Node {
 	then: ThenBlock;
 	catch: CatchBlock;
 
+	context_rest_properties: Map<string, ESTreeNode> = new Map();
+
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 
@@ -33,12 +35,12 @@ export default class AwaitBlock extends Node {
 
 		if (this.then_node) {
 			this.then_contexts = [];
-			unpack_destructuring({ contexts: this.then_contexts, node: info.value, scope, component });
+			unpack_destructuring({ contexts: this.then_contexts, node: info.value, scope, component, context_rest_properties: this.context_rest_properties });
 		}
 
 		if (this.catch_node) {
 			this.catch_contexts = [];
-			unpack_destructuring({ contexts: this.catch_contexts, node: info.error, scope, component });
+			unpack_destructuring({ contexts: this.catch_contexts, node: info.error, scope, component, context_rest_properties: this.context_rest_properties });
 		}
 
 		this.pending = new PendingBlock(component, this, scope, info.pending);
diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index 39f6fa374e..594490a5fb 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -11,6 +11,7 @@ import InlineComponent from './InlineComponent';
 import Window from './Window';
 import { clone } from '../../utils/clone';
 import compiler_errors from '../compiler_errors';
+import compiler_warnings from '../compiler_warnings';
 
 // TODO this should live in a specific binding
 const read_only_media_attributes = new Set([
@@ -47,6 +48,7 @@ export default class Binding extends Node {
 		const { name } = get_object(this.expression.node);
 
 		this.is_contextual = Array.from(this.expression.references).some(name => scope.names.has(name));
+		if (this.is_contextual) this.validate_binding_rest_properties(scope);
 
 		// make sure we track this as a mutable ref
 		if (scope.is_let(name)) {
@@ -95,6 +97,18 @@ export default class Binding extends Node {
 	is_readonly_media_attribute() {
 		return read_only_media_attributes.has(this.name);
 	}
+
+	validate_binding_rest_properties(scope: TemplateScope) {
+		this.expression.references.forEach(name => {
+			const each_block = scope.get_owner(name);
+			if (each_block && each_block.type === 'EachBlock') {
+				const rest_node = each_block.context_rest_properties.get(name);
+				if (rest_node) {
+					this.component.warn(rest_node as any, compiler_warnings.invalid_rest_eachblock_binding(name));
+				}
+			}
+		});
+	}
 }
 
 function isElement(node: Node): node is Element {
diff --git a/src/compiler/compile/nodes/ConstTag.ts b/src/compiler/compile/nodes/ConstTag.ts
index 87a9039008..44a50aa005 100644
--- a/src/compiler/compile/nodes/ConstTag.ts
+++ b/src/compiler/compile/nodes/ConstTag.ts
@@ -10,6 +10,7 @@ import { extract_identifiers } from 'periscopic';
 import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
 import get_object from '../utils/get_object';
 import compiler_errors from '../compiler_errors';
+import { Node as ESTreeNode } from 'estree';
 
 const allowed_parents = new Set(['EachBlock', 'CatchBlock', 'ThenBlock', 'InlineComponent', 'SlotTemplate', 'IfBlock', 'ElseBlock']);
 
@@ -19,6 +20,7 @@ export default class ConstTag extends Node {
 	contexts: Context[] = [];
 	node: ConstTagType;
 	scope: TemplateScope;
+	context_rest_properties: Map<string, ESTreeNode> = new Map();
 
 	assignees: Set<string> = new Set();
   dependencies: Set<string> = new Set();
@@ -58,7 +60,8 @@ export default class ConstTag extends Node {
 			contexts: this.contexts,
 			node: this.node.expression.left,
 			scope: this.scope,
-			component: this.component
+			component: this.component,
+			context_rest_properties: this.context_rest_properties
 		});
 		this.expression = new Expression(this.component, this, this.scope, this.node.expression.right);
 		this.contexts.forEach(context => {
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index bea6fb7910..4a5ea19e37 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -28,7 +28,7 @@ export default class EachBlock extends AbstractBlock {
 	has_animation: boolean;
 	has_binding = false;
 	has_index_binding = false;
-
+	context_rest_properties: Map<string, Node>;
 	else?: ElseBlock;
 
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
@@ -40,9 +40,9 @@ export default class EachBlock extends AbstractBlock {
 		this.index = info.index;
 
 		this.scope = scope.child();
-
+		this.context_rest_properties = new Map();
 		this.contexts = [];
-		unpack_destructuring({ contexts: this.contexts, node: info.context, scope, component });
+		unpack_destructuring({ contexts: this.contexts, node: info.context, scope, component, context_rest_properties: this.context_rest_properties });
 
 		this.contexts.forEach(context => {
 			this.scope.add(context.key.name, this.expression.dependencies, this);
diff --git a/src/compiler/compile/nodes/shared/Context.ts b/src/compiler/compile/nodes/shared/Context.ts
index 670f0531e6..47180d24cd 100644
--- a/src/compiler/compile/nodes/shared/Context.ts
+++ b/src/compiler/compile/nodes/shared/Context.ts
@@ -20,7 +20,8 @@ export function unpack_destructuring({
 	modifier = (node) => node,
 	default_modifier = (node) => node,
 	scope,
-	component
+	component,
+	context_rest_properties
 }: {
 	contexts: Context[];
 	node: Node;
@@ -28,6 +29,7 @@ export function unpack_destructuring({
 	default_modifier?: Context['default_modifier'];
 	scope: TemplateScope;
 	component: Component;
+	context_rest_properties: Map<string, Node>;
 }) {
 	if (!node) return;
 
@@ -43,6 +45,7 @@ export function unpack_destructuring({
 			modifier,
 			default_modifier
 		});
+		context_rest_properties.set((node.argument as Identifier).name, node);
 	} else if (node.type === 'ArrayPattern') {
 		node.elements.forEach((element, i) => {
 			if (element && element.type === 'RestElement') {
@@ -52,8 +55,10 @@ export function unpack_destructuring({
 					modifier: (node) => x`${modifier(node)}.slice(${i})` as Node,
 					default_modifier,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
+				context_rest_properties.set((element.argument as Identifier).name, element);
 			} else if (element && element.type === 'AssignmentPattern') {
 				const n = contexts.length;
 				mark_referenced(element.right, scope, component);
@@ -70,7 +75,8 @@ export function unpack_destructuring({
 							to_ctx
 						)}` as Node,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
 			} else {
 				unpack_destructuring({
@@ -79,7 +85,8 @@ export function unpack_destructuring({
 					modifier: (node) => x`${modifier(node)}[${i}]` as Node,
 					default_modifier,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
 			}
 		});
@@ -97,8 +104,10 @@ export function unpack_destructuring({
 						)}, [${used_properties}])` as Node,
 					default_modifier,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
+				context_rest_properties.set((property.argument as Identifier).name, property);
 			} else {
 				const key = property.key as Identifier;
 				const value = property.value;
@@ -121,7 +130,8 @@ export function unpack_destructuring({
 								to_ctx
 							)}` as Node,
 						scope,
-						component
+						component,
+						context_rest_properties
 					});
 				} else {
 					unpack_destructuring({
@@ -130,7 +140,8 @@ export function unpack_destructuring({
 						modifier: (node) => x`${modifier(node)}.${key.name}` as Node,
 						default_modifier,
 						scope,
-						component
+						component,
+						context_rest_properties
 					});
 				}
 			}
diff --git a/test/validator/samples/rest-eachblock-binding-2/input.svelte b/test/validator/samples/rest-eachblock-binding-2/input.svelte
new file mode 100644
index 0000000000..d92557673b
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-2/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	let objArray = [
+		[1, 2, 3, "4"],
+		[5, 6, 7, "8"],
+	];
+</script>
+
+{#each objArray as [id, ...rest] (id)}
+	<input bind:value={rest[0]} type="text" placeholder={rest[2]} />
+	<br />
+{/each}
diff --git a/test/validator/samples/rest-eachblock-binding-2/warnings.json b/test/validator/samples/rest-eachblock-binding-2/warnings.json
new file mode 100644
index 0000000000..a55e08ac05
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-2/warnings.json
@@ -0,0 +1,9 @@
+[
+  {
+    "code": "invalid-rest-eachblock-binding",
+    "message": "...rest operator will create a new object and binding propogation with original object will not work",
+		"pos": 102,
+    "start": { "line": 8, "column": 24, "character": 102 },
+		"end": { "line": 8, "column": 31, "character": 109 }
+  }
+]
diff --git a/test/validator/samples/rest-eachblock-binding-3/input.svelte b/test/validator/samples/rest-eachblock-binding-3/input.svelte
new file mode 100644
index 0000000000..b8bae0cd7f
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-3/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	let objArray = [{ bar: {foo: '1', id: 0, innerValue: "test"} }, { bar: {foo: '2', id:1, innerValue: "Somethin"} }]
+</script>
+
+{#each objArray as { bar: { id, ...rest } } (id)}
+	<input bind:value={rest.innerValue} type="text" placeholder={rest.foo}/>
+	<br/>
+{/each}
diff --git a/test/validator/samples/rest-eachblock-binding-3/warnings.json b/test/validator/samples/rest-eachblock-binding-3/warnings.json
new file mode 100644
index 0000000000..c3410b3888
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-3/warnings.json
@@ -0,0 +1,9 @@
+[
+  {
+    "code": "invalid-rest-eachblock-binding",
+    "message": "...rest operator will create a new object and binding propogation with original object will not work",
+		"pos": 168,
+    "start": { "line": 5, "column": 32, "character": 168 },
+		"end": { "line": 5, "column": 39, "character": 175 }
+  }
+]
diff --git a/test/validator/samples/rest-eachblock-binding/input.svelte b/test/validator/samples/rest-eachblock-binding/input.svelte
new file mode 100644
index 0000000000..7b96705448
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	let objArray = [{foo: '1', id: 0, innerValue: "test"}, {foo: '2', id:1, innerValue: "Somethin"}]
+</script>
+
+{#each objArray as { id, ...rest } (id)}
+	<input bind:value={rest.innerValue} type="text" placeholder={rest.foo}/>
+	<br/>
+{/each}
diff --git a/test/validator/samples/rest-eachblock-binding/warnings.json b/test/validator/samples/rest-eachblock-binding/warnings.json
new file mode 100644
index 0000000000..d5d34f31d1
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding/warnings.json
@@ -0,0 +1,9 @@
+[
+  {
+    "code": "invalid-rest-eachblock-binding",
+    "message": "...rest operator will create a new object and binding propogation with original object will not work",
+		"pos": 143,
+		"start": { "line": 5, "column": 25, "character": 143 },
+    "end": { "line": 5, "column": 32, "character": 150 }
+  }
+]

From 7331c06a74622a4635968a0c8d87b91fda4a1110 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:30:02 +0800
Subject: [PATCH 82/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 066df51b00..442c941571 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Treat `inert` as boolean attribute ([#7785](https://github.com/sveltejs/svelte/pull/7785))
 * Supporting scoped style for `<svelte:element>` ([#7443](https://github.com/sveltejs/svelte/issues/7443))
 * Supports SVG elements with `<svelte:element>`([#7613](https://github.com/sveltejs/svelte/issues/7613))
+* Warn user when binding on a `{...rest}` object in `{#each}` block ([#6860](https://github.com/sveltejs/svelte/issues/6860))
 
 
 ## 3.50.1

From 2cd661156e3646b5b8c9e93f06e240f3613737e8 Mon Sep 17 00:00:00 2001
From: Shinobu Hayashi <PhilisPaxil@gmail.com>
Date: Tue, 13 Sep 2022 20:10:45 +0900
Subject: [PATCH 83/89] [feat] Add a11y rule to check no tabindex in
 nointeractive element (#6693)

* [feature] add util module to check element is interactive element

* [feature] add util module to check role is interactive role

* [feature] add a11y checker for no-nointeractive-tabindex

* [chore] add test for no-nointeractive-tabindex

* [chore] fix tabindex-no-positive test div -> button

* [refactor] bundle up two filter into one

* Refactor: export a11y-no-nointeractive-tabindex warning from compiler_warning

* slight refactor to use existing utils

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/compiler_warnings.ts     |  4 ++
 src/compiler/compile/nodes/Element.ts         | 11 +++-
 src/compiler/compile/utils/a11y.ts            |  4 ++
 .../input.svelte                              | 14 +++++
 .../warnings.json                             | 62 +++++++++++++++++++
 .../a11y-tabindex-no-positive/input.svelte    |  8 +--
 .../a11y-tabindex-no-positive/warnings.json   | 10 +--
 7 files changed, 102 insertions(+), 11 deletions(-)
 create mode 100644 test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
 create mode 100644 test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json

diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index b3e2e36797..7b1a3b3d29 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -179,6 +179,10 @@ export default {
 		code: 'a11y-missing-content',
 		message: `A11y: <${name}> element should have child content`
 	}),
+	a11y_no_nointeractive_tabindex: {
+		code: 'a11y-no-nointeractive-tabindex',
+		message: 'A11y: not interactive element cannot have positive tabIndex value'
+	},
 	redundant_event_modifier_for_touch: {
 		code: 'redundant-event-modifier',
 		message: 'Touch event handlers that don\'t use the \'event\' object are passive by default'
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index df0e649122..b5f9caa6b8 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -24,7 +24,7 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles } from '../utils/a11y';
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
@@ -549,8 +549,15 @@ export default class Element extends Node {
 				}
 			}
 		});
-	}
 
+		// no-nointeractive-tabindex
+		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
+			const tab_index = attribute_map.get('tabindex');
+			if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
+				component.warn(this, compiler_warnings.a11y_no_nointeractive_tabindex);
+			}
+		}
+	}
 
 	validate_special_cases() {
 		const { component, attributes, handlers } = this;
diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
index 1e06608b54..5b300eac13 100644
--- a/src/compiler/compile/utils/a11y.ts
+++ b/src/compiler/compile/utils/a11y.ts
@@ -51,6 +51,10 @@ export function is_non_interactive_roles(role: ARIARoleDefintionKey) {
 	return non_interactive_roles.has(role);
 }
 
+export function is_interactive_roles(role: ARIARoleDefintionKey) {
+	return interactive_roles.has(role);
+}
+
 const presentation_roles = new Set(['presentation', 'none']);
 
 export function is_presentation_role(role: ARIARoleDefintionKey) {
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
new file mode 100644
index 0000000000..e9ac0d3c9f
--- /dev/null
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
@@ -0,0 +1,14 @@
+<!-- valid -->
+<button />
+<button tabindex='0' />
+<button tabindex='{0}' />
+<div />
+<div tabindex='-1' />
+<div role='button' tabindex='0' />
+<div role='article' tabindex='-1' />
+<article tabindex='-1' />
+<!-- invalid -->
+<div tabindex='0' />
+<div role='article' tabindex='0' />
+<article tabindex='0' />
+<article tabindex='{0}' />
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
new file mode 100644
index 0000000000..3508feca8e
--- /dev/null
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
@@ -0,0 +1,62 @@
+[
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 241,
+			"column": 20,
+			"line": 11
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 221,
+		"start": {
+			"character": 221,
+			"column": 0,
+			"line": 11
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 277,
+			"column": 35,
+			"line": 12
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 242,
+		"start": {
+			"character": 242,
+			"column": 0,
+			"line": 12
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 302,
+			"column": 24,
+			"line": 13
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 278,
+		"start": {
+			"character": 278,
+			"column": 0,
+			"line": 13
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 329,
+			"column": 26,
+			"line": 14
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 303,
+		"start": {
+			"character": 303,
+			"column": 0,
+			"line": 14
+		}
+	}
+]
diff --git a/test/validator/samples/a11y-tabindex-no-positive/input.svelte b/test/validator/samples/a11y-tabindex-no-positive/input.svelte
index 5a90e32f8d..f525fca777 100644
--- a/test/validator/samples/a11y-tabindex-no-positive/input.svelte
+++ b/test/validator/samples/a11y-tabindex-no-positive/input.svelte
@@ -2,7 +2,7 @@
 	let foo;
 </script>
 
-<div tabindex='-1'/>
-<div tabindex='0'/>
-<div tabindex='1'/>
-<div tabindex='{foo}'/>
\ No newline at end of file
+<button tabindex='-1'/>
+<button tabindex='0'/>
+<button tabindex='1'/>
+<button tabindex='{foo}'/>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-tabindex-no-positive/warnings.json b/test/validator/samples/a11y-tabindex-no-positive/warnings.json
index ac3c6bd994..90f9decbad 100644
--- a/test/validator/samples/a11y-tabindex-no-positive/warnings.json
+++ b/test/validator/samples/a11y-tabindex-no-positive/warnings.json
@@ -4,14 +4,14 @@
 		"message": "A11y: avoid tabindex values above zero",
 		"start": {
 			"line": 7,
-			"column": 5,
-			"character": 76
+			"column": 8,
+			"character": 85
 		},
 		"end": {
 			"line": 7,
-			"column": 17,
-			"character": 88
+			"column": 20,
+			"character": 97
 		},
-		"pos": 76
+		"pos": 85
 	}
 ]

From 899d0cc67ca8e8c18c747fb2906461c018498c70 Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Tue, 13 Sep 2022 19:16:58 +0800
Subject: [PATCH 84/89] update docs for a11y-no-noninteractive-tabindex and
 rename from a11y-no-nointeractive-tabindex -> a11y-no-noninteractive-tabindex

---
 site/content/docs/05-accessibility-warnings.md        | 11 +++++++++++
 src/compiler/compile/compiler_warnings.ts             |  4 ++--
 src/compiler/compile/nodes/Element.ts                 |  4 ++--
 .../a11y-no-nointeractive-tabindex/warnings.json      |  8 ++++----
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index 8143f43d09..a7c1b8ded8 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -250,6 +250,17 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
 
 ---
 
+### `a11y-no-noninteractive-tabindex`
+
+Tab key navigation should be limited to elements on the page that can be interacted with.
+
+```sv
+<!-- A11y: not interactive element cannot have positive tabIndex value -->
+<div tabindex='0' />
+```
+
+---
+
 ### `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.
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 7b1a3b3d29..2834847b8b 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -179,8 +179,8 @@ export default {
 		code: 'a11y-missing-content',
 		message: `A11y: <${name}> element should have child content`
 	}),
-	a11y_no_nointeractive_tabindex: {
-		code: 'a11y-no-nointeractive-tabindex',
+	a11y_no_noninteractive_tabindex: {
+		code: 'a11y-no-noninteractive-tabindex',
 		message: 'A11y: not interactive element cannot have positive tabIndex value'
 	},
 	redundant_event_modifier_for_touch: {
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index b5f9caa6b8..48ea0ec3e1 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -550,11 +550,11 @@ export default class Element extends Node {
 			}
 		});
 
-		// no-nointeractive-tabindex
+		// no-noninteractive-tabindex
 		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
 			const tab_index = attribute_map.get('tabindex');
 			if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
-				component.warn(this, compiler_warnings.a11y_no_nointeractive_tabindex);
+				component.warn(this, compiler_warnings.a11y_no_noninteractive_tabindex);
 			}
 		}
 	}
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
index 3508feca8e..97b8ccd9b3 100644
--- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
@@ -1,6 +1,6 @@
 [
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 241,
 			"column": 20,
@@ -15,7 +15,7 @@
 		}
 	},
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 277,
 			"column": 35,
@@ -30,7 +30,7 @@
 		}
 	},
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 302,
 			"column": 24,
@@ -45,7 +45,7 @@
 		}
 	},
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 329,
 			"column": 26,

From 75a7c3e68f8e2b9ca449c5ed1343f761966202e3 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 19:19:35 +0800
Subject: [PATCH 85/89] Update CHANGELOG.md

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 442c941571..84e7879ff1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,8 @@
 * Supporting scoped style for `<svelte:element>` ([#7443](https://github.com/sveltejs/svelte/issues/7443))
 * Supports SVG elements with `<svelte:element>`([#7613](https://github.com/sveltejs/svelte/issues/7613))
 * Warn user when binding on a `{...rest}` object in `{#each}` block ([#6860](https://github.com/sveltejs/svelte/issues/6860))
-
+* Add a11y warnings:
+	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
 
 ## 3.50.1
 

From e2538c594bb2fa3c12d06e9acfc592d6dc099d55 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Tue, 13 Sep 2022 20:20:45 +0900
Subject: [PATCH 86/89] [feat] support `--style-props` for `<svelte:component>`
 (#7468)

* add test

* support --style-props for <svelte:component>

* refactor

* add more test

* support switching instance

* add test with svelte:self

* merge duplicated if statement

* slight refactor

* remove unnecessary anchor

* reorder insertion

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 .../wrappers/InlineComponent/index.ts         | 157 ++++++++++--------
 .../Slider.svelte                             |  17 ++
 .../_config.js                                |  41 +++++
 .../main.svelte                               |  25 +++
 .../Slider1.svelte                            |  17 ++
 .../Slider2.svelte                            |  17 ++
 .../_config.js                                |  57 +++++++
 .../main.svelte                               |  20 +++
 .../Slider1.svelte                            |  17 ++
 .../Slider2.svelte                            |  17 ++
 .../_config.js                                |  59 +++++++
 .../main.svelte                               |  22 +++
 .../Slider.svelte                             |  29 ++++
 .../_config.js                                |  71 ++++++++
 .../main.svelte                               |  32 ++++
 .../Slider1.svelte                            |  27 +++
 .../Slider2.svelte                            |  27 +++
 .../_config.js                                |  47 ++++++
 .../main.svelte                               |  16 ++
 .../Slider1.svelte                            |  27 +++
 .../Slider2.svelte                            |  27 +++
 .../_config.js                                |  84 ++++++++++
 .../main.svelte                               |  20 +++
 23 files changed, 808 insertions(+), 65 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index e6eab33fbd..f44170cda1 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -399,12 +399,21 @@ export default class InlineComponentWrapper extends Wrapper {
 			return b`${name}.$on("${handler.name}", ${snippet});`;
 		});
 
+		const mount_target = has_css_custom_properties ? css_custom_properties_wrapper : (parent_node || '#target');
+		const mount_anchor = has_css_custom_properties ? 'null' : (parent_node ? 'null' : '#anchor');
+		const to_claim = parent_nodes && this.renderer.options.hydratable;
+		let claim_nodes = parent_nodes;
+
 		if (this.node.name === 'svelte:component') {
 			const switch_value = block.get_unique_name('switch_value');
 			const switch_props = block.get_unique_name('switch_props');
 
 			const snippet = this.node.expression.manipulate(block);
 
+			if (has_css_custom_properties) {
+				this.set_css_custom_properties(block, css_custom_properties_wrapper);
+			}
+
 			block.chunks.init.push(b`
 				var ${switch_value} = ${snippet};
 
@@ -427,20 +436,13 @@ export default class InlineComponentWrapper extends Wrapper {
 				b`if (${name}) @create_component(${name}.$$.fragment);`
 			);
 
-			if (parent_nodes && this.renderer.options.hydratable) {
-				block.chunks.claim.push(
-					b`if (${name}) @claim_component(${name}.$$.fragment, ${parent_nodes});`
-				);
-			}
-
-			block.chunks.mount.push(b`
-				if (${name}) {
-					@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
-				}
-			`);
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+			block.chunks.mount.push(b`if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`);
 
-			const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
-			const update_mount_node = this.get_update_mount_node(anchor);
+			if (to_claim) {
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+				block.chunks.claim.push(b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`);
+			}
 
 			if (updates.length) {
 				block.chunks.update.push(b`
@@ -448,6 +450,15 @@ export default class InlineComponentWrapper extends Wrapper {
 				`);
 			}
 
+			const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+			const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
+			const update_mount_node = has_css_custom_properties ? css_custom_properties_wrapper : this.get_update_mount_node(tmp_anchor);
+			const update_insert =
+				css_custom_properties_wrapper &&
+				(tmp_anchor.name !== 'null'
+					? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
+					: b`@insert(${parent_node}, ${css_custom_properties_wrapper}, ${tmp_anchor});`);
+
 			block.chunks.update.push(b`
 				if (${switch_value} !== (${switch_value} = ${snippet})) {
 					if (${name}) {
@@ -455,11 +466,13 @@ export default class InlineComponentWrapper extends Wrapper {
 						const old_component = ${name};
 						@transition_out(old_component.$$.fragment, 1, 0, () => {
 							@destroy_component(old_component, 1);
+							${has_css_custom_properties ? b`@detach(${update_mount_node})` : null}
 						});
 						@check_outros();
 					}
 
 					if (${switch_value}) {
+						${update_insert}
 						${name} = new ${switch_value}(${switch_props}(#ctx));
 
 						${munged_bindings}
@@ -501,62 +514,16 @@ export default class InlineComponentWrapper extends Wrapper {
 			`);
 
 			if (has_css_custom_properties) {
-				block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
-				block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
-				this.node.css_custom_properties.forEach(attr => {
-					const dependencies = attr.get_dependencies();
-					const should_cache = attr.should_cache();
-					const last = should_cache && block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
-					if (should_cache) block.add_variable(last);
-					const value = attr.get_value(block);
-					const init = should_cache ? x`${last} = ${value}` : value;
-
-					block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`);
-					if (dependencies.length > 0) {
-						let condition = block.renderer.dirty(dependencies);
-						if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
-
-						block.chunks.update.push(b`
-							if (${condition}) {
-								@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
-							}
-						`);
-					}
-				});
+				this.set_css_custom_properties(block, css_custom_properties_wrapper);
 			}
 			block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
 
-			if (parent_nodes && this.renderer.options.hydratable) {
-				let nodes = parent_nodes;
-				if (has_css_custom_properties) {
-					nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
-					block.chunks.claim.push(b`
-						${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
-						var ${nodes} = @children(${css_custom_properties_wrapper});
-					`);
-				}
-				block.chunks.claim.push(
-					b`@claim_component(${name}.$$.fragment, ${nodes});`
-				);
-			}
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+			block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
 
-			if (has_css_custom_properties) {
-				if (parent_node) {
-					block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
-					if (is_head(parent_node)) {
-						block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
-					}
-				} else {
-					block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
-					// TODO we eventually need to consider what happens to elements
-					// that belong to the same outgroup as an outroing element...
-					block.chunks.destroy.push(b`if (detaching) @detach(${css_custom_properties_wrapper});`);
-				}
-				block.chunks.mount.push(b`@mount_component(${name}, ${css_custom_properties_wrapper}, null);`);
-			} else {
-				block.chunks.mount.push(
-					b`@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`
-				);
+			if (to_claim) {
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+				block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${claim_nodes});`);
 			}
 
 			block.chunks.intro.push(b`
@@ -579,4 +546,64 @@ export default class InlineComponentWrapper extends Wrapper {
 			);
 		}
 	}
+
+	private create_css_custom_properties_wrapper_mount_chunk(
+		block: Block,
+		parent_node: Identifier,
+		css_custom_properties_wrapper: Identifier | null
+	) {
+			if (parent_node) {
+				block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
+				if (is_head(parent_node)) {
+					block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
+				}
+			} else {
+				block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
+				// TODO we eventually need to consider what happens to elements
+				// that belong to the same outgroup as an outroing element...
+				block.chunks.destroy.push(b`if (detaching && ${this.var}) @detach(${css_custom_properties_wrapper});`);
+			}
+	}
+
+	private create_css_custom_properties_wrapper_claim_chunk(
+		block: Block,
+		parent_nodes: Identifier,
+		css_custom_properties_wrapper: Identifier | null
+	) {
+		const nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
+		block.chunks.claim.push(b`
+			${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
+			var ${nodes} = @children(${css_custom_properties_wrapper});
+		`);
+		return nodes;
+	}
+
+	private set_css_custom_properties(
+		block: Block,
+		css_custom_properties_wrapper: Identifier
+	) {
+		block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
+		block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
+		this.node.css_custom_properties.forEach((attr) => {
+			const dependencies = attr.get_dependencies();
+			const should_cache = attr.should_cache();
+			const last = should_cache &&	block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
+			if (should_cache) block.add_variable(last);
+			const value = attr.get_value(block);
+			const init = should_cache ? x`${last} = ${value}` : value;
+
+			block.chunks.hydrate.push(
+				b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`
+			);
+			if (dependencies.length > 0) {
+				let condition = block.renderer.dirty(dependencies);
+				if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
+				block.chunks.update.push(b`
+					if (${condition}) {
+						@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
+					}
+				`);
+			}
+		});
+	}
 }
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..4863966f85
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..96965c223b
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,41 @@
+export default {
+	props: {
+		railColor1: 'black',
+		trackColor1: 'red',
+		railColor2: 'green',
+		trackColor2: 'blue'
+	},
+	html: `
+		<div style="display: contents; --rail-color:black; --track-color:red;">
+			<div id="slider-1">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:green; --track-color:blue;">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ component, assert, target }) {
+		component.railColor1 = 'yellow';
+		component.trackColor2 = 'orange';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div style="display: contents; --rail-color:yellow; --track-color:red;">
+				<div id="slider-1">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:green; --track-color:orange;">
+				<div id="slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..00be45a8a4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import Slider from './Slider.svelte';
+	export let railColor1;
+	export let railColor2;
+	export let trackColor1;
+	export let trackColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<svelte:component
+	this={Slider}
+	id="slider-1"
+	--rail-color={railColor1}
+	--track-color={trackColor1}
+/>
+
+<svelte:component
+	this={Slider}
+	id="slider-2"
+	--rail-color={railColor2}
+	--track-color={identity(trackColor2)}
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
new file mode 100644
index 0000000000..f9c9048fee
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
new file mode 100644
index 0000000000..efbf225f25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
@@ -0,0 +1,57 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+			<div id="component1">
+				<p class="svelte-17ay6rc">Slider1</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+			<div id="component2">
+				<p class="svelte-17ay6rc">Slider1</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..2c6d05dc25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<svelte:component
+	this={slider}
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<svelte:component
+	this={slider}
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..f9c9048fee
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5aa30c7aa4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
@@ -0,0 +1,59 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<section>
+			<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+				<div id="component1">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+				<div id="component2">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</section>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..dded9b8f5c
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<section>
+	<svelte:component
+		this={slider}
+		id="component1"
+		--rail-color="rgb(0, 0, 0)"
+		--track-color="rgb(255, 0, 0)"
+	/>
+
+	<svelte:component
+		this={slider}
+		id="component2"
+		--rail-color="rgb(0, 255, 0)"
+		--track-color="rgb(0, 0, 255)"
+	/>
+</section>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..210e34cbe9
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,29 @@
+<script>
+  export let id;
+	export let count = 0;
+	export let railColor1;
+	export let trackColor1;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count="{count + 1}"
+		--rail-color={railColor1}
+		--track-color={trackColor1}
+	/>
+{/if}
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..c7d1369edc
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,71 @@
+export default {
+	props: {
+		railColor1: 'black',
+		trackColor1: 'red',
+		railColor2: 'green',
+		trackColor2: 'blue',
+		nestRailColor1: 'white',
+		nestTrackColor1: 'gray',
+		nestRailColor2: 'aqua',
+		nestTrackColor2: 'pink'
+	},
+	html: `
+		<div style="display: contents; --rail-color:black; --track-color:red;">
+			<div id="slider-1">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:white; --track-color:gray;">
+				<div id="nest-slider-1">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:green; --track-color:blue;">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:aqua; --track-color:pink;">
+				<div id="nest-slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ component, assert, target }) {
+		component.railColor1 = 'yellow';
+		component.trackColor2 = 'orange';
+		component.nestRailColor1 = 'lime';
+		component.nestTrackColor2 = 'gold';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div style="display: contents; --rail-color:yellow; --track-color:red;">
+				<div id="slider-1">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+				<div style="display: contents; --rail-color:lime; --track-color:gray;">
+					<div id="nest-slider-1">
+						<p class="svelte-17ay6rc">Slider</p>
+						<span class="svelte-17ay6rc">Track</span>
+					</div>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:green; --track-color:orange;">
+				<div id="slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+				<div style="display: contents; --rail-color:aqua; --track-color:gold;">
+					<div id="nest-slider-2">
+						<p class="svelte-17ay6rc">Slider</p>
+						<span class="svelte-17ay6rc">Track</span>
+					</div>
+				</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..69c31fff35
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	import Slider from './Slider.svelte';
+	export let railColor1;
+	export let railColor2;
+	export let trackColor1;
+	export let trackColor2;
+	export let nestRailColor1;
+	export let nestRailColor2;
+	export let nestTrackColor1;
+	export let nestTrackColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<Slider
+	id="slider-1"
+	--rail-color={railColor1}
+	--track-color={trackColor1}
+	railColor1={nestRailColor1}
+	trackColor1={nestTrackColor1}
+/>
+
+<svelte:component
+	this={Slider}
+	id="slider-2"
+	--rail-color={railColor2}
+	--track-color={identity(trackColor2)}
+	railColor1={nestRailColor2}
+	trackColor1={nestTrackColor2}
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider1</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(255, 255, 0)"
+		--track-color="rgb(255, 0, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider2</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(0, 255, 255)"
+		--track-color="rgb(255, 255, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
new file mode 100644
index 0000000000..f3023db3c4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
@@ -0,0 +1,47 @@
+export default {
+	props: {},
+	html: `
+		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+			<div id="component1">
+				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
+				<div id="nest-component1">
+					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
+				</div>
+			</div>
+		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+			<div id="component2">
+				<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(0, 255, 255); --track-color:rgb(255, 255, 255);">
+				<div id="nest-component2">
+					<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert }) {
+		const railColor1 = target.querySelector('#component1 p');
+		const trackColor1 = target.querySelector('#component1 span');
+		const railColor2 = target.querySelector('#component2 p');
+		const trackColor2 = target.querySelector('#component2 span');
+		const nestRailColor1 = target.querySelector('#nest-component1 p');
+		const nestTrackColor1 = target.querySelector('#nest-component1 span');
+		const nestRailColor2 = target.querySelector('#nest-component2 p');
+		const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+		assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+		assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+		assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+		assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+		assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+		assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+		assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+		assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+		assert.equal(railColor1.textContent, 'Slider1');
+		assert.equal(railColor2.textContent, 'Slider2');
+		assert.equal(nestRailColor1.textContent, 'Slider1');
+		assert.equal(nestRailColor2.textContent, 'Slider2');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..1a4ed02959
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+</script>
+
+<Slider1
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<Slider2
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider1</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(255, 255, 0)"
+		--track-color="rgb(255, 0, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider2</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(0, 255, 255)"
+		--track-color="rgb(255, 255, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5efc8f0c70
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
@@ -0,0 +1,84 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+			<div id="component1">
+				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
+				<div id="nest-component1">
+					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
+				</div>
+			</div>
+		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+			<div id="component2">
+				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
+				<div id="nest-component2">
+					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+			const nestRailColor1 = target.querySelector('#nest-component1 p');
+			const nestTrackColor1 = target.querySelector('#nest-component1 span');
+			const nestRailColor2 = target.querySelector('#nest-component2 p');
+			const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+			assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(255, 255, 0)');
+			assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+			assert.equal(nestRailColor1.textContent, 'Slider1');
+			assert.equal(nestRailColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+			const nestRailColor1 = target.querySelector('#nest-component1 p');
+			const nestTrackColor1 = target.querySelector('#nest-component1 span');
+			const nestRailColor2 = target.querySelector('#nest-component2 p');
+			const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(0, 255, 255)');
+			assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 255, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+			assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+			assert.equal(nestRailColor1.textContent, 'Slider2');
+			assert.equal(nestRailColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..2c6d05dc25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<svelte:component
+	this={slider}
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<svelte:component
+	this={slider}
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>

From 64690974dd37960d23ead5ee97b543abf2394bfc Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 19:22:02 +0800
Subject: [PATCH 87/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84e7879ff1..210561cdbd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * Supporting scoped style for `<svelte:element>` ([#7443](https://github.com/sveltejs/svelte/issues/7443))
 * Supports SVG elements with `<svelte:element>`([#7613](https://github.com/sveltejs/svelte/issues/7613))
 * Warn user when binding on a `{...rest}` object in `{#each}` block ([#6860](https://github.com/sveltejs/svelte/issues/6860))
+* support `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
 * Add a11y warnings:
 	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
 

From 82013aa1610e9d8c73064e449d3b2c1304987896 Mon Sep 17 00:00:00 2001
From: MCMXC <16797721+mcmxcdev@users.noreply.github.com>
Date: Tue, 13 Sep 2022 15:22:10 +0200
Subject: [PATCH 88/89] feat(a11y): add click-events-have-key-events rule
 (#5073)

* feat(a11y): add click-events-have-key-events rule

Signed-off-by: mhatvan <markus_hatvan@aon.at>

* Fine-tune click-events-have-key-events rule

Signed-off-by: mhatvan <markus_hatvan@aon.at>

* Implement PR feedback

Signed-off-by: Markus Hatvan <markus_hatvan@aon.at>

* Implement PR feedback

Signed-off-by: Markus Hatvan <markus_hatvan@aon.at>

* slight refactor to use existing utils

* update docs

* fix rebase conflicts

Signed-off-by: mhatvan <markus_hatvan@aon.at>
Signed-off-by: Markus Hatvan <markus_hatvan@aon.at>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: dsfx3d <dsfx3d@gmail.com>
---
 .../content/docs/05-accessibility-warnings.md |  13 +++
 src/compiler/compile/compiler_warnings.ts     |   4 +
 src/compiler/compile/nodes/Element.ts         |  36 +++++-
 src/compiler/compile/utils/a11y.ts            |  16 +++
 .../input.svelte                              |  49 ++++++++
 .../warnings.json                             | 107 ++++++++++++++++++
 6 files changed, 222 insertions(+), 3 deletions(-)
 create mode 100644 test/validator/samples/a11y-click-events-have-key-events/input.svelte
 create mode 100644 test/validator/samples/a11y-click-events-have-key-events/warnings.json

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index a7c1b8ded8..c82ef21fcb 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -41,6 +41,19 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 
 ---
 
+### `a11y-click-events-have-key-events`
+
+Enforce `on:click` is accompanied by at least one of the following: `onKeyUp`, `onKeyDown`, `onKeyPress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. 
+
+This does not apply for interactive or hidden elements.
+
+```sv
+<!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event. -->
+<div on:click={() => {}} />
+```
+
+---
+
 ### `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.
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 2834847b8b..f194090870 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -175,6 +175,10 @@ export default {
 		code: 'a11y-mouse-events-have-key-events',
 		message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
 	}),
+	a11y_click_events_have_key_events: () => ({
+		code: 'a11y-click-events-have-key-events',
+		message: 'A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.'
+	}),
 	a11y_missing_content: (name: string) => ({
 		code: 'a11y-missing-content',
 		message: `A11y: <${name}> element should have child content`
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 48ea0ec3e1..20381ee4f6 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -24,7 +24,7 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader } from '../utils/a11y';
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
@@ -434,12 +434,17 @@ export default class Element extends Node {
 	}
 
 	validate_attributes_a11y() {
-		const { component, attributes } = this;
+		const { component, attributes, handlers } = this;
 
 		const attribute_map = new Map<string, Attribute>();
+		const handlers_map = new Map();
+
 		attributes.forEach(attribute => (
 			attribute_map.set(attribute.name, attribute)
 		));
+		handlers.forEach(handler => (
+			handlers_map.set(handler.name, handler)
+		));
 
 		attributes.forEach(attribute => {
 			if (attribute.is_spread) return;
@@ -484,7 +489,7 @@ export default class Element extends Node {
 				}
 
 				const value = attribute.get_static_value() as ARIARoleDefintionKey;
-				
+
 				if (value && aria_role_abstract_set.has(value)) {
 					component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value));
 				} else if (value && !aria_role_set.has(value)) {
@@ -550,6 +555,31 @@ export default class Element extends Node {
 			}
 		});
 
+		// click-events-have-key-events
+		if (handlers_map.has('click')) {
+			const role = attribute_map.get('role');
+			const is_non_presentation_role = role?.is_static && !is_presentation_role(role.get_static_value() as ARIARoleDefintionKey);
+
+			if (
+				!is_hidden_from_screen_reader(this.name, attribute_map) &&
+				(!role || is_non_presentation_role) &&
+				!is_interactive_element(this.name, attribute_map) &&
+				!this.attributes.find(attr => attr.is_spread)
+			) {
+				const has_key_event =
+					handlers_map.has('keydown') ||
+					handlers_map.has('keyup') ||
+					handlers_map.has('keypress');
+
+				if (!has_key_event) {
+					component.warn(
+						this,
+						compiler_warnings.a11y_click_events_have_key_events()
+					);
+				}
+			}
+		}
+
 		// no-noninteractive-tabindex
 		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
 			const tab_index = attribute_map.get('tabindex');
diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
index 5b300eac13..3f35327e7c 100644
--- a/src/compiler/compile/utils/a11y.ts
+++ b/src/compiler/compile/utils/a11y.ts
@@ -61,6 +61,22 @@ export function is_presentation_role(role: ARIARoleDefintionKey) {
 	return presentation_roles.has(role);
 }
 
+export function is_hidden_from_screen_reader(tag_name: string, attribute_map: Map<string, Attribute>) {
+	if (tag_name === 'input') {
+		const type = attribute_map.get('type')?.get_static_value();
+
+		if (type && type === 'hidden') {
+			return true;
+		}
+	}
+
+	const aria_hidden = attribute_map.get('aria-hidden');
+	if (!aria_hidden) return false;
+	if (!aria_hidden.is_static) return true;
+	const aria_hidden_value = aria_hidden.get_static_value();
+	return aria_hidden_value === true || aria_hidden_value === 'true';
+}
+
 const non_interactive_element_role_schemas: ARIARoleRelationConcept[] = [];
 
 elementRoles.entries().forEach(([schema, roles]) => {
diff --git a/test/validator/samples/a11y-click-events-have-key-events/input.svelte b/test/validator/samples/a11y-click-events-have-key-events/input.svelte
new file mode 100644
index 0000000000..a63ea92fbc
--- /dev/null
+++ b/test/validator/samples/a11y-click-events-have-key-events/input.svelte
@@ -0,0 +1,49 @@
+<script>
+	function noop() {}
+
+	let props = {};
+
+	const dynamicTypeValue = "checkbox";
+	const dynamicAriaHiddenValue = "false";
+	const dynamicRole = "button";
+</script>
+
+<!-- should warn -->
+<div on:click={noop} />
+<div on:click={noop} aria-hidden="false" />
+
+<section on:click={noop} />
+<main on:click={noop} />
+<article on:click={noop} />
+<header on:click={noop} />
+<footer on:click={noop} />
+
+<!-- should not warn -->
+<div class="foo" />
+
+<a href="http://x.y.z" on:click={noop}>foo</a>
+<button on:click={noop} />
+<select on:click={noop} />
+
+<input type="button" on:click={noop} />
+<input type={dynamicTypeValue} on:click={noop} />
+
+<div on:click={noop} {...props} />
+<div on:click={noop} on:keydown={noop} />
+<div on:click={noop} on:keyup={noop} />
+<div on:click={noop} on:keypress={noop} />
+<div on:click={noop} on:keydown={noop} on:keyup={noop} />
+<div on:click={noop} on:keyup={noop} on:keypress={noop} />
+<div on:click={noop} on:keypress={noop} on:keydown={noop} />
+<div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop} />
+
+<input on:click={noop} type="hidden" />
+
+<div on:click={noop} aria-hidden />
+<div on:click={noop} aria-hidden="true" />
+<div on:click={noop} aria-hidden="false" on:keydown={noop} />
+<div on:click={noop} aria-hidden={dynamicAriaHiddenValue} />
+
+<div on:click={noop} role="presentation" />
+<div on:click={noop} role="none" />
+<div on:click={noop} role={dynamicRole} />
diff --git a/test/validator/samples/a11y-click-events-have-key-events/warnings.json b/test/validator/samples/a11y-click-events-have-key-events/warnings.json
new file mode 100644
index 0000000000..220f8377a3
--- /dev/null
+++ b/test/validator/samples/a11y-click-events-have-key-events/warnings.json
@@ -0,0 +1,107 @@
+[
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 12,
+			"column": 0,
+			"character": 190
+		},
+		"end": {
+			"line": 12,
+			"column": 23,
+			"character": 213
+		},
+		"pos": 190
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 13,
+			"column": 0,
+			"character": 214
+		},
+		"end": {
+			"line": 13,
+			"column": 43,
+			"character": 257
+		},
+		"pos": 214
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 15,
+			"column": 0,
+			"character": 259
+		},
+		"end": {
+			"line": 15,
+			"column": 27,
+			"character": 286
+		},
+		"pos": 259
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 16,
+			"column": 0,
+			"character": 287
+		},
+		"end": {
+			"line": 16,
+			"column": 24,
+			"character": 311
+		},
+		"pos": 287
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 17,
+			"column": 0,
+			"character": 312
+		},
+		"end": {
+			"line": 17,
+			"column": 27,
+			"character": 339
+		},
+		"pos": 312
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 18,
+			"column": 0,
+			"character": 340
+		},
+		"end": {
+			"line": 18,
+			"column": 26,
+			"character": 366
+		},
+		"pos": 340
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 19,
+			"column": 0,
+			"character": 367
+		},
+		"end": {
+			"line": 19,
+			"column": 26,
+			"character": 393
+		},
+		"pos": 367
+	}
+]

From d7cfe22f3702af28334a541f204eafe7f0c0d9db Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 21:40:09 +0800
Subject: [PATCH 89/89] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 210561cdbd..c5fc0b6123 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * support `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
 * Add a11y warnings:
 	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
+	* `a11y-click-events-have-key-events`: check if click event is accompanied by key events ([#5073](https://github.com/sveltejs/svelte/pull/5073))
 
 ## 3.50.1