diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbc87cdb0e..097cfd51ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Svelte changelog
 
+## 3.57.0
+
+* Add `<svelte:document>` ([#3310](https://github.com/sveltejs/svelte/issues/3310))
+* Add a11y `no-noninteractive-element-to-interactive-role` ([#8167](https://github.com/sveltejs/svelte/pull/8167))
+* Stop intro transition from triggering incorrectly ([#6152](https://github.com/sveltejs/svelte/issues/6152), [#6812](https://github.com/sveltejs/svelte/issues/6812))
+* Support computed and literal properties when destructuring objects in the template ([#6609](https://github.com/sveltejs/svelte/issues/6609))
+* Give `style:` directive precedence over `style=` attribute ([#7475](https://github.com/sveltejs/svelte/issues/7475))
+* Select `<option>` with `selected` attribute when initial state is `undefined` ([#8361](https://github.com/sveltejs/svelte/issues/8361))
+* Prevent derived store callbacks after store is unsubscribed from ([#8364](https://github.com/sveltejs/svelte/issues/8364))
+* Account for `bind:group` members being spread across multiple control flow blocks ([#8372](https://github.com/sveltejs/svelte/issues/8372))
+* Revert buggy reactive statement optimization ([#8374](https://github.com/sveltejs/svelte/issues/8374))
+
 ## 3.56.0
 
 * Add `|stopImmediatePropagation` event modifier ([#5085](https://github.com/sveltejs/svelte/issues/5085))
diff --git a/elements/index.d.ts b/elements/index.d.ts
index 72a077a7d5..4ad2f2880f 100644
--- a/elements/index.d.ts
+++ b/elements/index.d.ts
@@ -534,13 +534,17 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	is?: string | undefined | null;
 
 	/**
-	 * Elements with the contenteditable attribute support innerHTML and textContent bindings.
+	 * Elements with the contenteditable attribute support `innerHTML`, `textContent` and `innerText` bindings.
 	 */
 	'bind:innerHTML'?: string | undefined | null;
 	/**
-	 * Elements with the contenteditable attribute support innerHTML and textContent bindings.
+	 * Elements with the contenteditable attribute support `innerHTML`, `textContent` and `innerText` bindings.
 	 */
 	'bind:textContent'?: string | undefined | null;
+	/**
+	 * Elements with the contenteditable attribute support `innerHTML`, `textContent` and `innerText` bindings.
+	 */
+	'bind:innerText'?: string | undefined | null;
 
 	// SvelteKit
 	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
diff --git a/generate-type-definitions.js b/generate-type-definitions.js
index 6ec2f313c3..4a36330b13 100644
--- a/generate-type-definitions.js
+++ b/generate-type-definitions.js
@@ -3,12 +3,7 @@
 const { execSync } = require('child_process');
 const { readFileSync, writeFileSync } = require('fs');
 
-try {
-	execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly');
-} catch (err) {
-	console.error(err.stderr.toString());
-	throw err;
-}
+execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly', { stdio: 'inherit' });
 // 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.
diff --git a/package-lock.json b/package-lock.json
index ed58f94c7e..adb27b7556 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.56.0",
+  "version": "3.57.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.56.0",
+      "version": "3.57.0",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index 6720938b98..88375069c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.56.0",
+  "version": "3.57.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",
diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index ebc4ee8ef2..170c303b85 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -691,7 +691,12 @@ When the value of an `<option>` matches its text content, the attribute can be o
 
 ---
 
-Elements with the `contenteditable` attribute support `innerHTML` and `textContent` bindings.
+Elements with the `contenteditable` attribute support the following bindings:
+- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
+- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
+- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+
+There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
 
 ```sv
 <div contenteditable="true" bind:innerHTML={html}></div>
@@ -1746,6 +1751,25 @@ All except `scrollX` and `scrollY` are readonly.
 
 > Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
 
+### `<svelte:document>`
+
+```sv
+<svelte:document on:event={handler}/>
+```
+
+---
+
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs#template-syntax-element-directives-use-action) on `document`.
+
+As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
+
+```sv
+<svelte:document
+	on:visibilitychange={handleVisibilityChange}
+	use:someAction
+/>
+```
+
 ### `<svelte:body>`
 
 ```sv
@@ -1756,7 +1780,7 @@ All except `scrollX` and `scrollY` are readonly.
 
 Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs#template-syntax-element-directives-use-action) on the `<body>` element.
 
-As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
+As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
 
 ```sv
 <svelte:body
@@ -1777,7 +1801,7 @@ As with `<svelte:window>`, this element may only appear the top level of your co
 
 This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content.
 
-As with `<svelte:window>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
+As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
 
 ```sv
 <svelte:head>
diff --git a/site/content/docs/04-run-time.md b/site/content/docs/04-run-time.md
index 46d025fe3e..440d8aeccf 100644
--- a/site/content/docs/04-run-time.md
+++ b/site/content/docs/04-run-time.md
@@ -693,7 +693,7 @@ Animates a `blur` filter alongside an element's opacity.
 * `duration` (`number`, default 400) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
-* `amount` (`number`, default 5) - the size of the blur in pixels
+* `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
 
 ```sv
 <script>
@@ -728,10 +728,11 @@ Animates the x and y positions and the opacity of an element. `in` transitions a
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
-* `x` (`number`, default 0) - the x offset to animate out to and in from
-* `y` (`number`, default 0) - the y offset to animate out to and in from
+* `x` (`number | string`, default 0) - the x offset to animate out to and in from
+* `y` (`number | string`, default 0) - the y offset to animate out to and in from
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
+x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
 You can see the `fly` transition in action in the [transition tutorial](/tutorial/adding-parameters-to-transitions).
 
 ```sv
diff --git a/site/content/docs/06-accessibility-warnings.md b/site/content/docs/06-accessibility-warnings.md
index 4324ed7b75..bc793d80e7 100644
--- a/site/content/docs/06-accessibility-warnings.md
+++ b/site/content/docs/06-accessibility-warnings.md
@@ -277,6 +277,17 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
 
 ---
 
+### `a11y-no-noninteractive-element-to-interactive-role`
+
+[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.
+
+```sv
+<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
+<h3 role="searchbox">Button</h3>
+```
+
+---
+
 ### `a11y-no-noninteractive-tabindex`
 
 Tab key navigation should be limited to elements on the page that can be interacted with.
diff --git a/site/content/examples/17-special-elements/05-svelte-document/App.svelte b/site/content/examples/17-special-elements/05-svelte-document/App.svelte
new file mode 100644
index 0000000000..5dd44aa389
--- /dev/null
+++ b/site/content/examples/17-special-elements/05-svelte-document/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	let selection = '';
+
+	const handleSelectionChange = (e) => selection = document.getSelection();
+</script>
+
+<svelte:document on:selectionchange={handleSelectionChange} />
+
+<p>Select this text to fire events</p>
+<p>Selection: {selection}</p>
diff --git a/site/content/examples/17-special-elements/05-svelte-document/meta.json b/site/content/examples/17-special-elements/05-svelte-document/meta.json
new file mode 100644
index 0000000000..c48db2e62a
--- /dev/null
+++ b/site/content/examples/17-special-elements/05-svelte-document/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:document>"
+}
diff --git a/site/content/examples/17-special-elements/05-svelte-body/App.svelte b/site/content/examples/17-special-elements/06-svelte-body/App.svelte
similarity index 100%
rename from site/content/examples/17-special-elements/05-svelte-body/App.svelte
rename to site/content/examples/17-special-elements/06-svelte-body/App.svelte
diff --git a/site/content/examples/17-special-elements/05-svelte-body/meta.json b/site/content/examples/17-special-elements/06-svelte-body/meta.json
similarity index 100%
rename from site/content/examples/17-special-elements/05-svelte-body/meta.json
rename to site/content/examples/17-special-elements/06-svelte-body/meta.json
diff --git a/site/content/examples/17-special-elements/06-svelte-head/App.svelte b/site/content/examples/17-special-elements/07-svelte-head/App.svelte
similarity index 100%
rename from site/content/examples/17-special-elements/06-svelte-head/App.svelte
rename to site/content/examples/17-special-elements/07-svelte-head/App.svelte
diff --git a/site/content/examples/17-special-elements/06-svelte-head/meta.json b/site/content/examples/17-special-elements/07-svelte-head/meta.json
similarity index 100%
rename from site/content/examples/17-special-elements/06-svelte-head/meta.json
rename to site/content/examples/17-special-elements/07-svelte-head/meta.json
diff --git a/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md b/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md
index a73b07c0ba..4d4b52f3b8 100644
--- a/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md
+++ b/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md
@@ -2,11 +2,16 @@
 title: Contenteditable bindings
 ---
 
-Elements with a `contenteditable="true"` attribute support `textContent` and `innerHTML` bindings:
+Elements with the `contenteditable` attribute support the following bindings:
+- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
+- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
+- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+
+There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
 
 ```html
 <div
 	contenteditable="true"
 	bind:innerHTML={html}
 ></div>
-```
\ No newline at end of file
+```
diff --git a/site/content/tutorial/16-special-elements/06-svelte-body/text.md b/site/content/tutorial/16-special-elements/06-svelte-body/text.md
deleted file mode 100644
index 95da3ce608..0000000000
--- a/site/content/tutorial/16-special-elements/06-svelte-body/text.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: <svelte:body>
----
-
-Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
-
-Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
-
-```html
-<svelte:body
-	on:mouseenter={handleMouseenter}
-	on:mouseleave={handleMouseleave}
-/>
-```
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
new file mode 100644
index 0000000000..cea052ec88
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	let selection = '';
+
+	const handleSelectionChange = (e) => selection = document.getSelection();
+</script>
+
+<svelte:body />
+
+<p>Select this text to fire events</p>
+<p>Selection: {selection}</p>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
new file mode 100644
index 0000000000..5dd44aa389
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	let selection = '';
+
+	const handleSelectionChange = (e) => selection = document.getSelection();
+</script>
+
+<svelte:document on:selectionchange={handleSelectionChange} />
+
+<p>Select this text to fire events</p>
+<p>Selection: {selection}</p>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-document/text.md b/site/content/tutorial/16-special-elements/06-svelte-document/text.md
new file mode 100644
index 0000000000..b40c83a6f2
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/06-svelte-document/text.md
@@ -0,0 +1,13 @@
+---
+title: <svelte:document>
+---
+
+Similar to `<svelte:window>`, the `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
+
+Add the `selectionchange` handler to the `<svelte:document>` tag:
+
+```html
+<svelte:document on:selectionchange={handleSelectionChange} />
+```
+
+> Avoid `mouseenter` and `mouseleave` handlers on this element, these events are not fired on `document` in all browsers. Use `<svelte:body>` for this instead. 
diff --git a/site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/07-svelte-body/text.md b/site/content/tutorial/16-special-elements/07-svelte-body/text.md
new file mode 100644
index 0000000000..4755281d61
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/07-svelte-body/text.md
@@ -0,0 +1,14 @@
+---
+title: <svelte:body>
+---
+
+Similar to `<svelte:window>` and `<svelte:document>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
+
+Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
+
+```html
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/07-svelte-head/text.md b/site/content/tutorial/16-special-elements/08-svelte-head/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-head/text.md
rename to site/content/tutorial/16-special-elements/08-svelte-head/text.md
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte b/site/content/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js b/site/content/tutorial/16-special-elements/09-svelte-options/app-a/flash.js
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js
rename to site/content/tutorial/16-special-elements/09-svelte-options/app-a/flash.js
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte b/site/content/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js b/site/content/tutorial/16-special-elements/09-svelte-options/app-b/flash.js
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js
rename to site/content/tutorial/16-special-elements/09-svelte-options/app-b/flash.js
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/text.md b/site/content/tutorial/16-special-elements/09-svelte-options/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-options/text.md
rename to site/content/tutorial/16-special-elements/09-svelte-options/text.md
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte b/site/content/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte
rename to site/content/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte b/site/content/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte
rename to site/content/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/10-svelte-fragment/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/09-svelte-fragment/text.md
rename to site/content/tutorial/16-special-elements/10-svelte-fragment/text.md
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 0d6a329dcb..e87cf6218a 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -38,7 +38,6 @@ import compiler_warnings from './compiler_warnings';
 import compiler_errors from './compiler_errors';
 import { extract_ignores_above_position, extract_svelte_ignore_from_comments } from '../utils/extract_svelte_ignore';
 import check_enable_sourcemap from './utils/check_enable_sourcemap';
-import is_dynamic from './render_dom/wrappers/shared/is_dynamic';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -1392,11 +1391,12 @@ export default class Component {
 										module_dependencies.add(name);
 									}
 								}
-
+								const is_writable_or_mutated =
+									variable && (variable.writable || variable.mutated);
 								if (
 									should_add_as_dependency &&
 									(!owner || owner === component.instance_scope) &&
-									(name[0] === '$' || variable)
+									(name[0] === '$' || is_writable_or_mutated)
 								) {
 									dependencies.add(name);
 								}
@@ -1420,19 +1420,6 @@ export default class Component {
 				const { expression } = node.body as ExpressionStatement;
 				const declaration = expression && (expression as AssignmentExpression).left;
 
-				const is_dependency_static = Array.from(dependencies).every(
-					dependency => dependency !== '$$props' && dependency !== '$$restProps' && !is_dynamic(this.var_lookup.get(dependency))
-				);
-
-				if (is_dependency_static) {
-					assignees.forEach(assignee => {
-						const variable = component.var_lookup.get(assignee);
-						if (variable) {
-							variable.is_reactive_static = true;
-						}
-					});
-				}
-
 				unsorted_reactive_declarations.push({
 					assignees,
 					dependencies,
diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index b0ffead6e0..bad3911673 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -66,7 +66,7 @@ export default {
 	},
 	missing_contenteditable_attribute: {
 		code: 'missing-contenteditable-attribute',
-		message: '\'contenteditable\' attribute is required for textContent and innerHTML two-way bindings'
+		message: '\'contenteditable\' attribute is required for textContent, innerHTML and innerText two-way bindings'
 	},
 	dynamic_contenteditable_attribute: {
 		code: 'dynamic-contenteditable-attribute',
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index d6b2dbc5aa..710377374f 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -119,6 +119,10 @@ export default {
 		code: 'a11y-no-interactive-element-to-noninteractive-role',
 		message: `A11y: <${element}> cannot have role '${role}'`
 	}),
+	a11y_no_noninteractive_element_to_interactive_role: (role: string | boolean, element: string) => ({
+		code: 'a11y-no-noninteractive-element-to-interactive-role',
+		message: `A11y: Non-interactive element <${element}> cannot have interactive 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(', ')}`
@@ -213,5 +217,9 @@ export default {
 	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 propagation with original object will not work`
-	})
+	}),
+	avoid_mouse_events_on_document: {
+		code: 'avoid-mouse-events-on-document',
+		message: 'Mouse enter/leave events on the document are not supported in all browsers and should be avoided'
+	}
 };
diff --git a/src/compiler/compile/nodes/CatchBlock.ts b/src/compiler/compile/nodes/CatchBlock.ts
index ba6a4b77a6..d92b4eda56 100644
--- a/src/compiler/compile/nodes/CatchBlock.ts
+++ b/src/compiler/compile/nodes/CatchBlock.ts
@@ -17,6 +17,7 @@ export default class CatchBlock extends AbstractBlock {
 		this.scope = scope.child();
 		if (parent.catch_node) {
 			parent.catch_contexts.forEach(context => {
+				if (context.type !== 'DestructuredVariable') return;
 				this.scope.add(context.key.name, parent.expression.dependencies, this);
 			});
 		}
diff --git a/src/compiler/compile/nodes/ConstTag.ts b/src/compiler/compile/nodes/ConstTag.ts
index 44a50aa005..edcb949c15 100644
--- a/src/compiler/compile/nodes/ConstTag.ts
+++ b/src/compiler/compile/nodes/ConstTag.ts
@@ -65,6 +65,7 @@ export default class ConstTag extends Node {
 		});
 		this.expression = new Expression(this.component, this, this.scope, this.node.expression.right);
 		this.contexts.forEach(context => {
+			if (context.type !== 'DestructuredVariable') return;
 			const owner = this.scope.get_owner(context.key.name);
 			if (owner && owner.type === 'ConstTag' && owner.parent === this.parent) {
 				this.component.error(this.node, compiler_errors.invalid_const_declaration(context.key.name));
diff --git a/src/compiler/compile/nodes/Document.ts b/src/compiler/compile/nodes/Document.ts
new file mode 100644
index 0000000000..653ccb627b
--- /dev/null
+++ b/src/compiler/compile/nodes/Document.ts
@@ -0,0 +1,41 @@
+import Node from './shared/Node';
+import EventHandler from './EventHandler';
+import Action from './Action';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { Element } from '../../interfaces';
+import compiler_warnings from '../compiler_warnings';
+
+export default class Document extends Node {
+	type: 'Document';
+	handlers: EventHandler[] = [];
+	actions: Action[] = [];
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: Element) {
+		super(component, parent, scope, info);
+
+		info.attributes.forEach((node) => {
+			if (node.type === 'EventHandler') {
+				this.handlers.push(new EventHandler(component, this, scope, node));
+			} else if (node.type === 'Action') {
+				this.actions.push(new Action(component, this, scope, node));
+			} else {
+				// TODO there shouldn't be anything else here...
+			}
+		});
+
+		this.validate();
+	}
+
+	private validate() {
+		const handlers_map = new Set();
+
+		this.handlers.forEach(handler => (
+			handlers_map.add(handler.name)
+		));
+
+		if (handlers_map.has('mouseenter') || handlers_map.has('mouseleave')) {
+			this.component.warn(this, compiler_warnings.avoid_mouse_events_on_document);
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index 4a5ea19e37..4659a53d73 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -45,6 +45,7 @@ export default class EachBlock extends AbstractBlock {
 		unpack_destructuring({ contexts: this.contexts, node: info.context, scope, component, context_rest_properties: this.context_rest_properties });
 
 		this.contexts.forEach(context => {
+			if (context.type !== 'DestructuredVariable') return;
 			this.scope.add(context.key.name, this.expression.dependencies, this);
 		});
 
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 0fdea77c16..2fd91ac495 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -11,6 +11,7 @@ import StyleDirective from './StyleDirective';
 import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
+import { is_name_contenteditable, get_contenteditable_attr } from '../utils/contenteditable';
 import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
 import list from '../../utils/list';
@@ -24,14 +25,13 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefinitionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element, is_abstract_role } 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);
 
 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));
 
 const a11y_required_attributes = {
 	a: ['href'],
@@ -567,7 +567,7 @@ export default class Element extends Node {
 
 				if (typeof value === 'string') {
 					value.split(regex_any_repeated_whitespaces).forEach((current_role: ARIARoleDefinitionKey) => {
-						if (current_role && aria_role_abstract_set.has(current_role)) {
+						if (current_role && is_abstract_role(current_role)) {
 							component.warn(attribute, compiler_warnings.a11y_no_abstract_role(current_role));
 						} else if (current_role && !aria_role_set.has(current_role)) {
 							const match = fuzzymatch(current_role, aria_roles);
@@ -607,8 +607,12 @@ export default class Element extends Node {
 						if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(current_role) || is_presentation_role(current_role))) {
 							component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(current_role, this.name));
 						}
-					});
 
+						// no-noninteractive-element-to-interactive-role
+						if (is_non_interactive_element(this.name, attribute_map) && is_interactive_roles(current_role)) {
+							component.warn(this, compiler_warnings.a11y_no_noninteractive_element_to_interactive_role(current_role, this.name));
+						}
+					});
 				}
 			}
 
@@ -1008,14 +1012,8 @@ export default class Element extends Node {
 				if (this.name !== 'img') {
 					return component.error(binding, compiler_errors.invalid_binding_element_with('<img>', name));
 				}
-			} else if (
-				name === 'textContent' ||
-				name === 'innerHTML'
-			) {
-				const contenteditable = this.attributes.find(
-					(attribute: Attribute) => attribute.name === 'contenteditable'
-				);
-
+			} else if (is_name_contenteditable(name)) {
+				const contenteditable = get_contenteditable_attr(this);
 				if (!contenteditable) {
 					return component.error(binding, compiler_errors.missing_contenteditable_attribute);
 				} else if (contenteditable && !contenteditable.is_static) {
diff --git a/src/compiler/compile/nodes/ThenBlock.ts b/src/compiler/compile/nodes/ThenBlock.ts
index 6aee3f916f..b394db1e47 100644
--- a/src/compiler/compile/nodes/ThenBlock.ts
+++ b/src/compiler/compile/nodes/ThenBlock.ts
@@ -17,6 +17,7 @@ export default class ThenBlock extends AbstractBlock {
 		this.scope = scope.child();
 		if (parent.then_node) {
 			parent.then_contexts.forEach(context => {
+				if (context.type !== 'DestructuredVariable') return;
 				this.scope.add(context.key.name, parent.expression.dependencies, this);
 			});
 		}
diff --git a/src/compiler/compile/nodes/interfaces.ts b/src/compiler/compile/nodes/interfaces.ts
index f023cad25c..b4740267fd 100644
--- a/src/compiler/compile/nodes/interfaces.ts
+++ b/src/compiler/compile/nodes/interfaces.ts
@@ -12,6 +12,7 @@ import StyleDirective from './StyleDirective';
 import Comment from './Comment';
 import ConstTag from './ConstTag';
 import DebugTag from './DebugTag';
+import Document from './Document';
 import EachBlock from './EachBlock';
 import Element from './Element';
 import ElseBlock from './ElseBlock';
@@ -47,6 +48,7 @@ export type INode = Action
 | Comment
 | ConstTag
 | DebugTag
+| Document
 | EachBlock
 | Element
 | ElseBlock
diff --git a/src/compiler/compile/nodes/shared/Context.ts b/src/compiler/compile/nodes/shared/Context.ts
index 47180d24cd..3957ed2173 100644
--- a/src/compiler/compile/nodes/shared/Context.ts
+++ b/src/compiler/compile/nodes/shared/Context.ts
@@ -1,5 +1,5 @@
 import { x } from 'code-red';
-import { Node, Identifier, Expression } from 'estree';
+import { Node, Identifier, Expression, PrivateIdentifier } from 'estree';
 import { walk } from 'estree-walker';
 import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
 import { clone } from '../../../utils/clone';
@@ -7,7 +7,16 @@ import Component from '../../Component';
 import flatten_reference from '../../utils/flatten_reference';
 import TemplateScope from './TemplateScope';
 
-export interface Context {
+export type Context = DestructuredVariable | ComputedProperty;
+
+interface ComputedProperty {
+	type: 'ComputedProperty';
+  property_name: string;
+  key: Expression | PrivateIdentifier;
+}
+ 
+interface DestructuredVariable {
+	type: 'DestructuredVariable'
 	key: Identifier;
 	name?: string;
 	modifier: (node: Node) => Node;
@@ -21,26 +30,33 @@ export function unpack_destructuring({
 	default_modifier = (node) => node,
 	scope,
 	component,
-	context_rest_properties
+	context_rest_properties,
+	number_of_computed_props = { n: 0 }
 }: {
 	contexts: Context[];
 	node: Node;
-	modifier?: Context['modifier'];
-	default_modifier?: Context['default_modifier'];
+	modifier?: DestructuredVariable['modifier'];
+	default_modifier?: DestructuredVariable['default_modifier'];
 	scope: TemplateScope;
 	component: Component;
 	context_rest_properties: Map<string, Node>;
+	// we want to pass this by reference, as a sort of global variable, because 
+	// if we pass this by value, we could get computed_property_# variable collisions
+	// when we deal with nested object destructuring
+	number_of_computed_props?: { n: number }; 
 }) {
 	if (!node) return;
 
 	if (node.type === 'Identifier') {
 		contexts.push({
+			type: 'DestructuredVariable',
 			key: node as Identifier,
 			modifier,
 			default_modifier
 		});
 	} else if (node.type === 'RestElement') {
 		contexts.push({
+			type: 'DestructuredVariable',
 			key: node.argument as Identifier,
 			modifier,
 			default_modifier
@@ -56,7 +72,8 @@ export function unpack_destructuring({
 					default_modifier,
 					scope,
 					component,
-					context_rest_properties
+					context_rest_properties,
+					number_of_computed_props
 				});
 				context_rest_properties.set((element.argument as Identifier).name, element);
 			} else if (element && element.type === 'AssignmentPattern') {
@@ -76,7 +93,8 @@ export function unpack_destructuring({
 						)}` as Node,
 					scope,
 					component,
-					context_rest_properties
+					context_rest_properties,
+					number_of_computed_props
 				});
 			} else {
 				unpack_destructuring({
@@ -86,7 +104,8 @@ export function unpack_destructuring({
 					default_modifier,
 					scope,
 					component,
-					context_rest_properties
+					context_rest_properties,
+					number_of_computed_props
 				});
 			}
 		});
@@ -105,15 +124,43 @@ export function unpack_destructuring({
 					default_modifier,
 					scope,
 					component,
-					context_rest_properties
+					context_rest_properties,
+					number_of_computed_props
 				});
 				context_rest_properties.set((property.argument as Identifier).name, property);
-			} else {
-				const key = property.key as Identifier;
+			} else if (property.type === 'Property') {
+				const key = property.key;
 				const value = property.value;
 
-				used_properties.push(x`"${key.name}"`);
+				let new_modifier: (node: Node) => Node; 
+
+				if (property.computed) {
+					// e.g { [computedProperty]: ... }
+					const property_name = `computed_property_${number_of_computed_props.n}`;
+					number_of_computed_props.n += 1;
+
+					contexts.push({
+						type: 'ComputedProperty',
+						property_name,
+						key
+					});
+
+					new_modifier = (node) => x`${modifier(node)}[${property_name}]`;
+					used_properties.push(x`${property_name}`);
+				} else if (key.type === 'Identifier') {
+					// e.g. { someProperty: ... }
+					const property_name = key.name;
+					new_modifier = (node) => x`${modifier(node)}.${property_name}`;
+					used_properties.push(x`"${property_name}"`);
+				} else if (key.type === 'Literal') {
+					// e.g. { "property-in-quotes": ... } or { 14: ... }
+					const property_name = key.value;
+					new_modifier = (node) => x`${modifier(node)}["${property_name}"]`;
+					used_properties.push(x`"${property_name}"`);
+				}
+				
 				if (value.type === 'AssignmentPattern') {
+					// e.g. { property = default } or { property: newName = default }
 					const n = contexts.length;
 
 					mark_referenced(value.right, scope, component);
@@ -121,7 +168,7 @@ export function unpack_destructuring({
 					unpack_destructuring({
 						contexts,
 						node: value.left,
-						modifier: (node) => x`${modifier(node)}.${key.name}`,
+						modifier: new_modifier,
 						default_modifier: (node, to_ctx) =>
 							x`${node} !== undefined ? ${node} : ${update_reference(
 								contexts,
@@ -131,17 +178,20 @@ export function unpack_destructuring({
 							)}` as Node,
 						scope,
 						component,
-						context_rest_properties
+						context_rest_properties,
+						number_of_computed_props
 					});
 				} else {
+					// e.g. { property } or { property: newName }
 					unpack_destructuring({
 						contexts,
 						node: value,
-						modifier: (node) => x`${modifier(node)}.${key.name}` as Node,
+						modifier: new_modifier,
 						default_modifier,
 						scope,
 						component,
-						context_rest_properties
+						context_rest_properties,
+						number_of_computed_props
 					});
 				}
 			}
@@ -157,7 +207,9 @@ function update_reference(
 ): Node {
 	const find_from_context = (node: Identifier) => {
 		for (let i = n; i < contexts.length; i++) {
-			const { key } = contexts[i];
+			const cur_context = contexts[i];
+			if (cur_context.type !== 'DestructuredVariable') continue; 
+			const { key } = cur_context;
 			if (node.name === key.name) {
 				throw new Error(`Cannot access '${node.name}' before initialization`);
 			}
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 1b1558ec17..3a85bf35c8 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -373,6 +373,7 @@ export default class Expression {
 								// add to get_xxx_context
 								// child_ctx[x] = function () { ... }
 								(template_scope.get_owner(deps[0]) as EachBlock).contexts.push({
+									type: 'DestructuredVariable',
 									key: func_id,
 									modifier: () => func_expression,
 									default_modifier: node => node
diff --git a/src/compiler/compile/nodes/shared/map_children.ts b/src/compiler/compile/nodes/shared/map_children.ts
index e6ad1d7f6e..7338148b63 100644
--- a/src/compiler/compile/nodes/shared/map_children.ts
+++ b/src/compiler/compile/nodes/shared/map_children.ts
@@ -3,6 +3,7 @@ import Body from '../Body';
 import ConstTag from '../ConstTag';
 import Comment from '../Comment';
 import EachBlock from '../EachBlock';
+import Document from '../Document';
 import Element from '../Element';
 import Head from '../Head';
 import IfBlock from '../IfBlock';
@@ -28,6 +29,7 @@ function get_constructor(type) {
 		case 'Body': return Body;
 		case 'Comment': return Comment;
 		case 'ConstTag': return ConstTag;
+		case 'Document': return Document;
 		case 'EachBlock': return EachBlock;
 		case 'Element': return Element;
 		case 'Head': return Head;
diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
index c40dedc3b5..cb35673847 100644
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -505,7 +505,7 @@ export default class Block {
 
 	render_binding_groups() {
 		for (const binding_group of this.binding_groups) {
-			binding_group.render();
+			binding_group.render(this);
 		}
 	}
 }
diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts
index ad2d1b092f..df1d68d5cb 100644
--- a/src/compiler/compile/render_dom/Renderer.ts
+++ b/src/compiler/compile/render_dom/Renderer.ts
@@ -27,8 +27,8 @@ export interface BindingGroup {
 	contexts: string[];
 	list_dependencies: Set<string>;
 	keypath: string;
-	elements: Identifier[];
-	render: () => void;
+	add_element: (block: Block, element: Identifier) => void;
+	render: (block: Block) => void;
 }
 
 export default class Renderer {
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index bc56f2eb27..58b7a8317b 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -390,13 +390,13 @@ export default function dom(
 	const resubscribable_reactive_store_unsubscribers = reactive_stores
 		.filter(store => {
 			const variable = component.var_lookup.get(store.name.slice(1));
-			return variable && (variable.reassigned || variable.export_name) && !variable.is_reactive_static;
+			return variable && (variable.reassigned || variable.export_name);
 		})
 		.map(({ name }) => b`$$self.$$.on_destroy.push(() => ${`$$unsubscribe_${name.slice(1)}`}());`);
 
 	if (has_definition) {
-		const reactive_declarations: Node[] = [];
-		const fixed_reactive_declarations: Array<Node | Node[]> = []; // not really 'reactive' but whatever
+		const reactive_declarations: (Node | Node[]) = [];
+		const fixed_reactive_declarations: Node[] = []; // not really 'reactive' but whatever
 
 		component.reactive_declarations.forEach(d => {
 			const dependencies = Array.from(d.dependencies);
@@ -417,15 +417,6 @@ export default function dom(
 				reactive_declarations.push(statement);
 			} else {
 				fixed_reactive_declarations.push(statement);
-				for (const assignee of d.assignees) {
-					const variable = component.var_lookup.get(assignee);
-					if (variable && variable.subscribable) {
-						fixed_reactive_declarations.push(b`
-							${component.compile_options.dev && b`@validate_store(${assignee}, '${assignee}');`}
-							@component_subscribe($$self, ${assignee}, $$value => $$invalidate(${renderer.context_lookup.get('$' + assignee).index}, ${'$' + assignee} = $$value));
-						`);
-					}
-				}
 			}
 		});
 
@@ -439,7 +430,7 @@ export default function dom(
 			const name = $name.slice(1);
 
 			const store = component.var_lookup.get(name);
-			if (store && (store.reassigned || store.export_name) && !store.is_reactive_static) {
+			if (store && (store.reassigned || store.export_name)) {
 				const unsubscribe = `$$unsubscribe_${name}`;
 				const subscribe = `$$subscribe_${name}`;
 				const i = renderer.context_lookup.get($name).index;
diff --git a/src/compiler/compile/render_dom/invalidate.ts b/src/compiler/compile/render_dom/invalidate.ts
index d9efdb5142..ffc5b6b42e 100644
--- a/src/compiler/compile/render_dom/invalidate.ts
+++ b/src/compiler/compile/render_dom/invalidate.ts
@@ -19,7 +19,6 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 				!variable.hoistable &&
 				!variable.global &&
 				!variable.module &&
-				!variable.is_reactive_static &&
 				(
 					variable.referenced ||
 					variable.subscribable ||
diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
index 9c07267223..534595f4a9 100644
--- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
@@ -11,6 +11,7 @@ import CatchBlock from '../../nodes/CatchBlock';
 import { Context } from '../../nodes/shared/Context';
 import { Identifier, Literal, Node } from 'estree';
 import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
+import Expression from '../../nodes/shared/Expression';
 
 type Status = 'pending' | 'then' | 'catch';
 
@@ -69,6 +70,7 @@ class AwaitBlockBranch extends Wrapper {
 			this.renderer.add_to_context(this.value, true);
 		} else {
 			contexts.forEach(context => {
+				if (context.type !== 'DestructuredVariable') return;
 				this.renderer.add_to_context(context.key.name, true);
 			});
 			this.value = this.block.parent.get_unique_name('value').name;
@@ -96,7 +98,15 @@ class AwaitBlockBranch extends Wrapper {
 	}
 
 	render_get_context() {
-		const props = this.is_destructured ? this.value_contexts.map(prop => b`#ctx[${this.block.renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`#ctx[${this.value_index}]`), name => this.renderer.reference(name))};`) : null;
+		const props = this.is_destructured ? this.value_contexts.map(prop => {
+			if (prop.type === 'ComputedProperty') {
+				const expression = new Expression(this.renderer.component, this.node, this.has_consts(this.node) ? this.node.scope : null, prop.key);
+				return b`const ${prop.property_name} = ${expression.manipulate(this.block, '#ctx')};`;
+			} else {
+				const to_ctx = name => this.renderer.reference(name);
+				return b`#ctx[${this.block.renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`#ctx[${this.value_index}]`), to_ctx)};`;
+			}
+		}) : null;
 
 		const const_tags_props = this.has_consts(this.node) ? add_const_tags(this.block, this.node.const_tags, '#ctx') : null;
 
diff --git a/src/compiler/compile/render_dom/wrappers/Document.ts b/src/compiler/compile/render_dom/wrappers/Document.ts
new file mode 100644
index 0000000000..4f7c86c54f
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Document.ts
@@ -0,0 +1,25 @@
+import Block from '../Block';
+import Wrapper from './shared/Wrapper';
+import { x } from 'code-red';
+import Document from '../../nodes/Document';
+import { Identifier } from 'estree';
+import EventHandler from './Element/EventHandler';
+import add_event_handlers from './shared/add_event_handlers';
+import { TemplateNode } from '../../../interfaces';
+import Renderer from '../Renderer';
+import add_actions from './shared/add_actions';
+
+export default class DocumentWrapper extends Wrapper {
+	node: Document;
+	handlers: EventHandler[];
+
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: TemplateNode) {
+		super(renderer, block, parent, node);
+		this.handlers = this.node.handlers.map(handler => new EventHandler(handler, this));
+	}
+
+	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		add_event_handlers(block, x`@_document`, this.handlers);
+		add_actions(block, x`@_document`, this.node.actions);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index 1032f4c6e3..9c1af7ce44 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -9,6 +9,7 @@ import ElseBlock from '../../nodes/ElseBlock';
 import { Identifier, Node } from 'estree';
 import get_object from '../../utils/get_object';
 import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
+import Expression from '../../nodes/shared/Expression';
 
 export class ElseBlockWrapper extends Wrapper {
 	node: ElseBlock;
@@ -86,6 +87,7 @@ export default class EachBlockWrapper extends Wrapper {
 		block.add_dependencies(dependencies);
 
 		this.node.contexts.forEach(context => {
+			if (context.type !== 'DestructuredVariable') return;
 			renderer.add_to_context(context.key.name, true);
 		});
 		add_const_tags_context(renderer, this.node.const_tags);
@@ -147,6 +149,7 @@ export default class EachBlockWrapper extends Wrapper {
 		const store = object.type === 'Identifier' && object.name[0] === '$' ? object.name.slice(1) : null;
 
 		node.contexts.forEach(prop => {
+			if (prop.type !== 'DestructuredVariable') return;
 			this.block.bindings.set(prop.key.name, {
 				object: this.vars.each_block_value,
 				property: this.index_name,
@@ -361,7 +364,15 @@ export default class EachBlockWrapper extends Wrapper {
 			this.else.fragment.render(this.else.block, null, x`#nodes` as Identifier);
 		}
 
-		this.context_props = this.node.contexts.map(prop => b`child_ctx[${renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`list[i]`), name => renderer.context_lookup.has(name) ? x`child_ctx[${renderer.context_lookup.get(name).index}]` : { type: 'Identifier', name })};`);
+		this.context_props = this.node.contexts.map(prop => {
+			if (prop.type === 'DestructuredVariable') {
+				const to_ctx = (name: string) => renderer.context_lookup.has(name) ? x`child_ctx[${renderer.context_lookup.get(name).index}]` : { type: 'Identifier', name } as Node;
+				return b`child_ctx[${renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`list[i]`), to_ctx)};`;
+			} else {
+				const expression = new Expression(this.renderer.component, this.node, this.node.scope, prop.key);
+				return b`const ${prop.property_name} = ${expression.manipulate(block, 'child_ctx')};`;
+			}
+		});
 
 		if (this.node.has_binding) this.context_props.push(b`child_ctx[${renderer.context_lookup.get(this.vars.each_block_value.name).index}] = list;`);
 		if (this.node.has_binding || this.node.has_index_binding || this.node.index) this.context_props.push(b`child_ctx[${renderer.context_lookup.get(this.index_name.name).index}] = i;`);
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index aa3d097ce3..642e4694b1 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -153,7 +153,7 @@ export default class BindingWrapper {
 			case 'group':
 			{
 				block.renderer.add_to_context('$$binding_groups');
-				this.binding_group.elements.push(this.parent.var);
+				this.binding_group.add_element(block, this.parent.var);
 
 				if ((this.parent as ElementWrapper).has_dynamic_value) {	
 					update_or_condition = (this.parent as ElementWrapper).dynamic_value_condition;	
@@ -165,6 +165,11 @@ export default class BindingWrapper {
 				update_conditions.push(x`${this.snippet} !== ${parent.var}.textContent`);
 				mount_conditions.push(x`${this.snippet} !== void 0`);
 				break;
+			
+			case 'innerText':
+				update_conditions.push(x`${this.snippet} !== ${parent.var}.innerText`);
+				mount_conditions.push(x`${this.snippet} !== void 0`);
+				break;
 
 			case 'innerHTML':
 				update_conditions.push(x`${this.snippet} !== ${parent.var}.innerHTML`);
@@ -323,7 +328,11 @@ function get_binding_group(renderer: Renderer, binding: BindingWrapper, block: B
 			parent = parent.parent;
 		}
 
-		const elements = [];
+		/**
+		 * When using bind:group with logic blocks, the inputs with bind:group may be scattered across different blocks.
+		 * This therefore keeps track of all the <input> elements that have the same bind:group within the same block.
+		 */
+		const elements = new Map<Block, any>();
 
 		contexts.forEach(context => {
 			renderer.add_to_context(context, true);
@@ -343,8 +352,13 @@ function get_binding_group(renderer: Renderer, binding: BindingWrapper, block: B
 			contexts,
 			list_dependencies,
 			keypath,
-			elements,
-			render() {
+			add_element(block, element) {
+				if (!elements.has(block)) {
+					elements.set(block, []);
+				}
+				elements.get(block).push(element);
+			},
+			render(block) {
 				const local_name = block.get_unique_name('binding_group');
 				const binding_group = block.renderer.reference('$$binding_groups');
 				block.add_variable(local_name);
@@ -362,7 +376,7 @@ function get_binding_group(renderer: Renderer, binding: BindingWrapper, block: B
 					);
 				}
 				block.chunks.hydrate.push(
-					b`${local_name}.p(${elements})`
+					b`${local_name}.p(${elements.get(block)})`
 				);
 				block.chunks.destroy.push(
 					b`${local_name}.r()`
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index eaef3a3b69..1f80cee89c 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -26,6 +26,7 @@ import Action from '../../../nodes/Action';
 import MustacheTagWrapper from '../MustacheTag';
 import RawMustacheTagWrapper from '../RawMustacheTag';
 import is_dynamic from '../shared/is_dynamic';
+import { is_name_contenteditable, has_contenteditable_attr } from '../../../utils/contenteditable';
 import create_debugging_comment from '../shared/create_debugging_comment';
 import { push_array } from '../../../../utils/push_array';
 
@@ -48,8 +49,8 @@ const events = [
 	{
 		event_names: ['input'],
 		filter: (node: Element, name: string) =>
-			(name === 'textContent' || name === 'innerHTML') &&
-			node.attributes.some(attribute => attribute.name === 'contenteditable')
+			is_name_contenteditable(name) &&
+			has_contenteditable_attr(node)
 	},
 	{
 		event_names: ['change'],
@@ -160,6 +161,7 @@ export default class ElementWrapper extends Wrapper {
 	bindings: Binding[];
 	event_handlers: EventHandler[];
 	class_dependencies: string[];
+	dynamic_style_dependencies: Set<string>;
 	has_dynamic_attribute: boolean;
 
 	select_binding_dependencies?: Set<string>;
@@ -214,6 +216,8 @@ export default class ElementWrapper extends Wrapper {
 			return;
 		}
 
+		this.dynamic_style_dependencies = new Set();
+
 		if (this.node.children.length) {
 			this.node.lets.forEach(l => {
 				extract_names(l.value || l.name).forEach(name => {
@@ -763,14 +767,11 @@ export default class ElementWrapper extends Wrapper {
 
 		const should_initialise = (
 			this.node.name === 'select' ||
-			binding_group.bindings.find(binding => {
-				return (
-					binding.node.name === 'indeterminate' ||
-					binding.node.name === 'textContent' ||
-					binding.node.name === 'innerHTML' ||
-					binding.is_readonly_media_attribute()
-				);
-			})
+			binding_group.bindings.find(binding => (
+				binding.node.name === 'indeterminate' ||
+				is_name_contenteditable(binding.node.name) ||
+				binding.is_readonly_media_attribute()
+			))
 		);
 
 		if (should_initialise) {
@@ -801,11 +802,13 @@ export default class ElementWrapper extends Wrapper {
 	}
 
 	add_attributes(block: Block) {
-		// Get all the class dependencies first
+		// Get all the class and style dependencies first
 		this.attributes.forEach((attribute) => {
 			if (attribute.node.name === 'class') {
 				const dependencies = attribute.node.get_dependencies();
 				push_array(this.class_dependencies, dependencies);
+			} else if (attribute.node.name === 'style') {
+				add_to_set(this.dynamic_style_dependencies, attribute.node.get_dependencies());
 			}
 		});
 
@@ -962,6 +965,7 @@ export default class ElementWrapper extends Wrapper {
 
 			const intro_block = b`
 				@add_render_callback(() => {
+					if (!#current) return;
 					if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, true);
 					${name}.run(1);
 				});
@@ -1007,6 +1011,7 @@ export default class ElementWrapper extends Wrapper {
 				if (outro) {
 					intro_block = b`
 						@add_render_callback(() => {
+							if (!#current) return;
 							if (${outro_name}) ${outro_name}.end(1);
 							${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
 							${intro_name}.start();
@@ -1170,8 +1175,18 @@ export default class ElementWrapper extends Wrapper {
 
 	add_styles(block: Block) {
 		const has_spread = this.node.attributes.some(attr => attr.is_spread);
+
+		let style_changed_var: Identifier | undefined;
+		const maybe_create_style_changed_var = () => {
+			if (!style_changed_var && this.dynamic_style_dependencies.size) {
+				style_changed_var = block.get_unique_name('style_changed');
+				const style_attr_dirty =  block.renderer.dirty([...this.dynamic_style_dependencies]);
+				block.chunks.update.push(b`const ${style_changed_var} = ${style_attr_dirty};`);
+			}
+		};
+
 		this.node.styles.forEach((style_directive) => {
-			const { name, expression, should_cache, important } = style_directive;
+			const { name, expression, important, should_cache } = style_directive;
 
 			const snippet = expression.manipulate(block);
 			let cached_snippet: Identifier | undefined;
@@ -1184,24 +1199,40 @@ export default class ElementWrapper extends Wrapper {
 
 			block.chunks.hydrate.push(updater);
 
-			const dependencies = expression.dynamic_dependencies();
+			// Assume that style has changed through the spread attribute
 			if (has_spread) {
 				block.chunks.update.push(updater);
-			} else if (dependencies.length > 0) {
+			} else {
+				const self_deps = expression.dynamic_dependencies();
+				const all_deps = new Set([
+					...self_deps,
+					...this.dynamic_style_dependencies
+				]);
+
+				if (all_deps.size === 0) return;
+
+				let condition =  block.renderer.dirty([...all_deps]);
+
 				if (should_cache) {
-					block.chunks.update.push(b`
-							if (${block.renderer.dirty(dependencies)} && (${cached_snippet} !== (${cached_snippet} = ${snippet}))) {
-								${updater}
-							}
-					`);
-				} else {
-					block.chunks.update.push(b`
-						if (${block.renderer.dirty(dependencies)}) {
-							${updater}
-						}
-					`);
+					condition = x`${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;
 				}
+
+				if (this.dynamic_style_dependencies.size > 0) {
+					maybe_create_style_changed_var();
+					// If all dependencies are same as the style attribute dependencies, then we can skip the dirty check
+					condition = 
+						all_deps.size === this.dynamic_style_dependencies.size 
+							? style_changed_var
+							: x`${style_changed_var} || ${condition}`;
+				}
+
+				block.chunks.update.push(b`
+					if (${condition}) {
+						${updater}
+					}
+				`);
 			}
+			
 		});
 	}
 
diff --git a/src/compiler/compile/render_dom/wrappers/Fragment.ts b/src/compiler/compile/render_dom/wrappers/Fragment.ts
index e2eb519393..8c633aeb71 100644
--- a/src/compiler/compile/render_dom/wrappers/Fragment.ts
+++ b/src/compiler/compile/render_dom/wrappers/Fragment.ts
@@ -2,6 +2,7 @@ import Wrapper from './shared/Wrapper';
 import AwaitBlock from './AwaitBlock';
 import Body from './Body';
 import DebugTag from './DebugTag';
+import Document from './Document';
 import EachBlock from './EachBlock';
 import Element from './Element/index';
 import Head from './Head';
@@ -28,6 +29,7 @@ const wrappers = {
 	Body,
 	Comment: null,
 	DebugTag,
+	Document,
 	EachBlock,
 	Element,
 	Head,
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts b/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
index cd4dc7f033..b7c14c2c38 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
@@ -1,24 +1,33 @@
 import ConstTag from '../../../nodes/ConstTag';
 import Block from '../../Block';
-import { b, x } from 'code-red';
+import { b, Node, x } from 'code-red';
 import Renderer from '../../Renderer';
+import Expression from '../../../nodes/shared/Expression';
 
 export function add_const_tags(block: Block, const_tags: ConstTag[], ctx: string) {
-  const const_tags_props = [];
-  const_tags.forEach((const_tag, i) => {
-    const name = `#constants_${i}`;
-    const_tags_props.push(b`const ${name} = ${const_tag.expression.manipulate(block, ctx)}`);
-    const_tag.contexts.forEach(context => {
-      const_tags_props.push(b`${ctx}[${block.renderer.context_lookup.get(context.key.name).index}] = ${context.default_modifier(context.modifier({ type: 'Identifier', name }), name => block.renderer.context_lookup.has(name) ? x`${ctx}[${block.renderer.context_lookup.get(name).index}]` : { type: 'Identifier', name })};`);
-    });
-  });
-  return const_tags_props;
+	const const_tags_props = [];
+	const_tags.forEach((const_tag, i) => {
+		const name = `#constants_${i}`;
+		const_tags_props.push(b`const ${name} = ${const_tag.expression.manipulate(block, ctx)}`);
+		const to_ctx = (name: string) => block.renderer.context_lookup.has(name) ? x`${ctx}[${block.renderer.context_lookup.get(name).index}]` : { type: 'Identifier', name } as Node;
+
+		const_tag.contexts.forEach(context => {
+			if (context.type === 'DestructuredVariable') {
+				const_tags_props.push(b`${ctx}[${block.renderer.context_lookup.get(context.key.name).index}] = ${context.default_modifier(context.modifier({ type: 'Identifier', name }), to_ctx)}`);
+			} else {
+				const expression = new Expression(block.renderer.component, const_tag, const_tag.scope, context.key);
+				const_tags_props.push(b`const ${context.property_name} = ${expression.manipulate(block, ctx)}`);
+			}
+		});
+	});
+	return const_tags_props;
 }
 
 export function add_const_tags_context(renderer: Renderer, const_tags: ConstTag[]) {
-  const_tags.forEach(const_tag => {
-    const_tag.contexts.forEach(context => {
-      renderer.add_to_context(context.key.name, true);
-    });
-  });
+	const_tags.forEach(const_tag => {
+		const_tag.contexts.forEach(context => {
+			if (context.type !== 'DestructuredVariable') return;
+			renderer.add_to_context(context.key.name, true);
+		});
+	});
 }
diff --git a/src/compiler/compile/render_ssr/Renderer.ts b/src/compiler/compile/render_ssr/Renderer.ts
index 99a2ee3d68..ac78d032ea 100644
--- a/src/compiler/compile/render_ssr/Renderer.ts
+++ b/src/compiler/compile/render_ssr/Renderer.ts
@@ -28,6 +28,7 @@ const handlers: Record<string, Handler> = {
 	Body: noop,
 	Comment,
 	DebugTag,
+	Document: noop,
 	EachBlock,
 	Element,
 	Head,
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index f1dd86dd2b..d9254a7b86 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -1,7 +1,9 @@
 import { is_void } from '../../../../shared/utils/names';
 import { get_attribute_expression, get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value';
 import { boolean_attributes } from '../../../../shared/boolean_attributes';
+import { is_name_contenteditable, is_contenteditable } from '../../utils/contenteditable';
 import Renderer, { RenderOptions } from '../Renderer';
+import Binding from '../../nodes/Binding';
 import Element from '../../nodes/Element';
 import { p, x } from 'code-red';
 import Expression from '../../nodes/shared/Expression';
@@ -18,11 +20,7 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 	// awkward special case
 	let node_contents;
 
-	const contenteditable = (
-		node.name !== 'textarea' &&
-		node.name !== 'input' &&
-		node.attributes.some((attribute) => attribute.name === 'contenteditable')
-	);
+	const contenteditable = is_contenteditable(node);
 
 	if (node.is_dynamic_element) {
 		renderer.push();
@@ -128,7 +126,7 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 		}
 	}
 
-	node.bindings.forEach(binding => {
+	node.bindings.forEach((binding: Binding) => {
 		const { name, expression } = binding;
 
 		if (binding.is_readonly) {
@@ -144,7 +142,7 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 				const condition = type === 'checkbox' ? x`~${bound}.indexOf(${value})` : x`${value} === ${bound}`;
 				renderer.add_expression(x`${condition} ? @add_attribute("checked", true, 1) : ""`);
 			}
-		} else if (contenteditable && (name === 'textContent' || name === 'innerHTML')) {
+		} else if (contenteditable && is_name_contenteditable(name)) {
 			node_contents = expression.node;
 
 			// TODO where was this used?
diff --git a/src/compiler/compile/utils/__test__.ts b/src/compiler/compile/utils/__test__.ts
index 3ade3dca2b..cb90c0a894 100644
--- a/src/compiler/compile/utils/__test__.ts
+++ b/src/compiler/compile/utils/__test__.ts
@@ -1,5 +1,14 @@
 import * as assert from 'assert';
 import get_name_from_filename from './get_name_from_filename';
+import {
+	is_contenteditable,
+	has_contenteditable_attr,
+	is_name_contenteditable,
+	get_contenteditable_attr,
+	CONTENTEDITABLE_BINDINGS
+} from './contenteditable';
+import Element from '../nodes/Element';
+import Attribute from '../nodes/Attribute';
 
 describe('get_name_from_filename', () => {
 	it('uses the basename', () => {
@@ -20,3 +29,61 @@ describe('get_name_from_filename', () => {
 		assert.equal(get_name_from_filename('~.svelte'), '_');
 	});
 });
+
+describe('contenteditable', () => {
+	describe('is_contenteditable', () => {
+		it('returns false if node is input', () => {
+			const node = { name: 'input' } as Element;
+			assert.equal(is_contenteditable(node), false);
+		});
+		it('returns false if node is textarea', () => {
+			const node = { name: 'textarea' } as Element;
+			assert.equal(is_contenteditable(node), false);
+		});
+		it('returns false if node is not input or textarea AND it is not contenteditable', () => {
+			const attr = { name: 'href' } as Attribute;
+			const node = { name: 'a', attributes: [attr] } as Element;
+			assert.equal(is_contenteditable(node), false);
+		});
+		it('returns true if node is not input or textarea AND it is contenteditable', () => {
+			const attr = { name: 'contenteditable' } as Attribute;
+			const node = { name: 'a', attributes: [attr] } as Element;
+			assert.equal(is_contenteditable(node), true);
+		});
+	});
+
+	describe('has_contenteditable_attr', () => {
+		it('returns true if attribute is contenteditable', () => {
+			const attr = { name: 'contenteditable' } as Attribute;
+			const node = { attributes: [attr] } as Element;
+			assert.equal(has_contenteditable_attr(node), true);
+		});
+		it('returns false if attribute is not contenteditable', () => {
+			const attr = { name: 'href' } as Attribute;
+			const node = { attributes: [attr] } as Element;
+			assert.equal(has_contenteditable_attr(node), false);
+		});
+	});
+
+	describe('is_name_contenteditable', () => {
+		it('returns true if name is a contenteditable type', () => {
+			assert.equal(is_name_contenteditable(CONTENTEDITABLE_BINDINGS[0]), true);
+		});
+		it('returns false if name is not contenteditable type', () => {
+			assert.equal(is_name_contenteditable('value'), false);
+		});
+	});
+
+	describe('get_contenteditable_attr', () => {
+		it('returns the contenteditable Attribute if it exists', () => {
+			const attr = { name: 'contenteditable' } as Attribute;
+			const node = { name: 'div', attributes: [attr] } as Element;
+			assert.equal(get_contenteditable_attr(node), attr);
+		});
+		it('returns undefined if contenteditable attribute cannot be found', () => {
+			const node = { name: 'div', attributes: [] } as Element;
+			assert.equal(get_contenteditable_attr(node), undefined);
+		});
+	});
+
+});
diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
index 60cb31c663..d0564b419e 100644
--- a/src/compiler/compile/utils/a11y.ts
+++ b/src/compiler/compile/utils/a11y.ts
@@ -7,7 +7,9 @@ import {
 import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query';
 import Attribute from '../nodes/Attribute';
 
-const non_abstract_roles = [...roles_map.keys()].filter((name) => !roles_map.get(name).abstract);
+const aria_roles = roles_map.keys();
+const abstract_roles = new Set(aria_roles.filter(role => roles_map.get(role).abstract));
+const non_abstract_roles = aria_roles.filter((name) => !abstract_roles.has(name));
 
 const non_interactive_roles = new Set(
 	non_abstract_roles
@@ -40,6 +42,10 @@ export function is_interactive_roles(role: ARIARoleDefinitionKey) {
 	return interactive_roles.has(role);
 }
 
+export function is_abstract_role(role: ARIARoleDefinitionKey) {
+	return abstract_roles.has(role);
+}
+
 const presentation_roles = new Set(['presentation', 'none']);
 
 export function is_presentation_role(role: ARIARoleDefinitionKey) {
@@ -65,7 +71,7 @@ export function is_hidden_from_screen_reader(tag_name: string, attribute_map: Ma
 const non_interactive_element_role_schemas: ARIARoleRelationConcept[] = [];
 
 elementRoles.entries().forEach(([schema, roles]) => {
-	if ([...roles].every((role) => non_interactive_roles.has(role))) {
+	if ([...roles].every((role) => role !== 'generic' && non_interactive_roles.has(role))) {
 		non_interactive_element_role_schemas.push(schema);
 	}
 });
@@ -82,6 +88,10 @@ const interactive_ax_objects = new Set(
 	[...AXObjects.keys()].filter((name) => AXObjects.get(name).type === 'widget')
 );
 
+const non_interactive_ax_objects = new Set(
+	[...AXObjects.keys()].filter((name) => ['windows', 'structure'].includes(AXObjects.get(name).type))
+);
+
 const interactive_element_ax_object_schemas: ARIARoleRelationConcept[] = [];
 
 elementAXObjects.entries().forEach(([schema, ax_object]) => {
@@ -90,6 +100,14 @@ elementAXObjects.entries().forEach(([schema, ax_object]) => {
 	}
 });
 
+const non_interactive_element_ax_object_schemas: ARIARoleRelationConcept[] = [];
+
+elementAXObjects.entries().forEach(([schema, ax_object]) => {
+	if ([...ax_object].every((role) => non_interactive_ax_objects.has(role))) {
+		non_interactive_element_ax_object_schemas.push(schema);
+	}
+});
+
 function match_schema(
 	schema: ARIARoleRelationConcept,
 	tag_name: string,
@@ -110,24 +128,31 @@ function match_schema(
 	});
 }
 
-export function is_interactive_element(
+export enum ElementInteractivity {
+	Interactive = 'interactive',
+	NonInteractive = 'non-interactive',
+	Static = 'static',
+}
+
+export function element_interactivity(
 	tag_name: string,
 	attribute_map: Map<string, Attribute>
-): boolean {
+): ElementInteractivity {
 	if (
 		interactive_element_role_schemas.some((schema) =>
 			match_schema(schema, tag_name, attribute_map)
 		)
 	) {
-		return true;
+		return ElementInteractivity.Interactive;
 	}
 
 	if (
+		tag_name !== 'header' && 
 		non_interactive_element_role_schemas.some((schema) =>
 			match_schema(schema, tag_name, attribute_map)
 		)
 	) {
-		return false;
+		return ElementInteractivity.NonInteractive;
 	}
 
 	if (
@@ -135,10 +160,30 @@ export function is_interactive_element(
 			match_schema(schema, tag_name, attribute_map)
 		)
 	) {
-		return true;
+		return ElementInteractivity.Interactive;
 	}
 
-	return false;
+	if (
+		non_interactive_element_ax_object_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return ElementInteractivity.NonInteractive;
+	}
+
+	return ElementInteractivity.Static;
+}
+
+export function is_interactive_element(tag_name: string, attribute_map: Map<string, Attribute>): boolean {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Interactive;
+}
+
+export function is_non_interactive_element(tag_name: string, attribute_map: Map<string, Attribute>): boolean {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.NonInteractive;
+}
+
+export function is_static_element(tag_name: string, attribute_map: Map<string, Attribute>): boolean {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Static;
 }
 
 export function is_semantic_role_element(role: ARIARoleDefinitionKey, tag_name: string, attribute_map: Map<string, Attribute>) {
diff --git a/src/compiler/compile/utils/contenteditable.ts b/src/compiler/compile/utils/contenteditable.ts
new file mode 100644
index 0000000000..44d695d6b0
--- /dev/null
+++ b/src/compiler/compile/utils/contenteditable.ts
@@ -0,0 +1,57 @@
+// Utilities for managing contenteditable nodes
+import Attribute from '../nodes/Attribute';
+import Element from '../nodes/Element';
+
+export const CONTENTEDITABLE_BINDINGS = [
+  'textContent',
+  'innerHTML',
+  'innerText'
+];
+
+/**
+ * Returns true if node is an 'input' or 'textarea'.
+ * @param {Element} node The element to be checked
+ */
+function is_input_or_textarea(node: Element): boolean {
+  return node.name === 'textarea' || node.name === 'input';
+}
+
+/**
+ * Check if a given attribute is 'contenteditable'.
+ * @param {Attribute} attribute A node.attribute
+ */
+function is_attr_contenteditable(attribute: Attribute): boolean {
+  return attribute.name === 'contenteditable';
+}
+
+/**
+ * Check if any of a node's attributes are 'contentenditable'.
+ * @param {Element} node The element to be checked
+ */
+export function has_contenteditable_attr(node: Element): boolean {
+  return node.attributes.some(is_attr_contenteditable);
+}
+
+/**
+ * Returns true if node is not textarea or input, but has 'contenteditable' attribute.
+ * @param {Element} node The element to be tested
+ */
+export function is_contenteditable(node: Element): boolean {
+  return !is_input_or_textarea(node) && has_contenteditable_attr(node);
+}
+
+/**
+ * Returns true if a given binding/node is contenteditable.
+ * @param {string} name A binding or node name to be checked
+ */
+export function is_name_contenteditable(name: string): boolean {
+  return CONTENTEDITABLE_BINDINGS.includes(name);
+}
+
+/**
+ * Returns the contenteditable attribute from the node (if it exists).
+ * @param {Element} node The element to get the attribute from
+ */
+export function get_contenteditable_attr(node: Element): Attribute | undefined {
+  return node.attributes.find(is_attr_contenteditable);
+}
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index 402f9ff5e1..4ae53594bb 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -63,7 +63,7 @@ interface BaseExpressionDirective extends BaseDirective {
 }
 
 export interface Element extends BaseNode {
-	type: 'InlineComponent' | 'SlotTemplate' | 'Title' | 'Slot' | 'Element' | 'Head' | 'Options' | 'Window' | 'Body';
+	type: 'InlineComponent' | 'SlotTemplate' | 'Title' | 'Slot' | 'Element' | 'Head' | 'Options' | 'Window' | 'Document' | 'Body';
 	attributes: Array<BaseDirective | Attribute | SpreadAttribute>;
 	name: string;
 }
@@ -223,7 +223,6 @@ export interface Var {
 	subscribable?: boolean;
 	is_reactive_dependency?: boolean;
 	imported?: boolean;
-	is_reactive_static?: boolean;
 }
 
 export interface CssResult {
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index cbd3213f53..90adfb8e79 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -19,6 +19,7 @@ const meta_tags = new Map([
 	['svelte:head', 'Head'],
 	['svelte:options', 'Options'],
 	['svelte:window', 'Window'],
+	['svelte:document', 'Document'],
 	['svelte:body', 'Body']
 ]);
 
diff --git a/src/compiler/utils/get_code_frame.ts b/src/compiler/utils/get_code_frame.ts
index 14ca44badb..f9a17b4f53 100644
--- a/src/compiler/utils/get_code_frame.ts
+++ b/src/compiler/utils/get_code_frame.ts
@@ -19,10 +19,10 @@ export default function get_code_frame(
 	return lines
 		.slice(frame_start, frame_end)
 		.map((str, i) => {
-			const isErrorLine = frame_start + i === line;
+			const is_error_line = frame_start + i === line;
 			const line_num = String(i + frame_start + 1).padStart(digits, ' ');
 
-			if (isErrorLine) {
+			if (is_error_line) {
 				const indicator = ' '.repeat(digits + 2 + tabs_to_spaces(str.slice(0, column)).length) + '^';
 				return `${line_num}: ${tabs_to_spaces(str)}\n${indicator}`;
 			}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 99894d3d88..1f786d51b5 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -359,7 +359,7 @@ export function get_binding_group_value(group, __value, checked) {
 	return Array.from(value);
 }
 
-export function init_binding_group(group) {
+export function init_binding_group(group: HTMLInputElement[]) {
 	let _inputs: HTMLInputElement[];
 	return {
 		/* push */ p(...inputs: HTMLInputElement[]) {
diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts
index 8adb0c279b..b1c27a355d 100644
--- a/src/runtime/internal/utils.ts
+++ b/src/runtime/internal/utils.ts
@@ -189,3 +189,8 @@ export const has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj,
 export function action_destroyer(action_result) {
 	return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
 }
+
+export function split_css_unit(value: number | string): [number, string] {
+	const split = typeof value === 'string' && value.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+	return split ? [parseFloat(split[1]), split[2] || 'px'] : [value as number, 'px'];
+}
diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts
index ee277c6216..67c2bcb15c 100644
--- a/src/runtime/store/index.ts
+++ b/src/runtime/store/index.ts
@@ -164,7 +164,7 @@ export function derived<T>(stores: Stores, fn: Function, initial_value?: T): Rea
 	const auto = fn.length < 2;
 
 	return readable(initial_value, (set) => {
-		let inited = false;
+		let started = false;
 		const values = [];
 
 		let pending = 0;
@@ -188,7 +188,7 @@ export function derived<T>(stores: Stores, fn: Function, initial_value?: T): Rea
 			(value) => {
 				values[i] = value;
 				pending &= ~(1 << i);
-				if (inited) {
+				if (started) {
 					sync();
 				}
 			},
@@ -197,12 +197,16 @@ export function derived<T>(stores: Stores, fn: Function, initial_value?: T): Rea
 			})
 		);
 
-		inited = true;
+		started = true;
 		sync();
 
 		return function stop() {
 			run_all(unsubscribers);
 			cleanup();
+			// We need to set this to false because callbacks can still happen despite having unsubscribed:
+			// Callbacks might already be placed in the queue which doesn't know it should no longer
+			// invoke this derived store.
+			started = false;
 		};
 	});
 }
diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index 836efc3d40..7ea08a02d2 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -1,5 +1,5 @@
 import { cubicOut, cubicInOut, linear } from 'svelte/easing';
-import { assign, is_function } from 'svelte/internal';
+import { assign, split_css_unit, is_function } from 'svelte/internal';
 
 export type EasingFunction = (t: number) => number;
 
@@ -15,7 +15,7 @@ export interface BlurParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
-	amount?: number;
+	amount?: number | string;
 	opacity?: number;
 }
 
@@ -31,12 +31,12 @@ export function blur(node: Element, {
 	const f = style.filter === 'none' ? '' : style.filter;
 
 	const od = target_opacity * (1 - opacity);
-
+	const [value, unit] = split_css_unit(amount);
 	return {
 		delay,
 		duration,
 		easing,
-		css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
+		css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * value}${unit});`
 	};
 }
 
@@ -65,8 +65,8 @@ export interface FlyParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
-	x?: number;
-	y?: number;
+	x?: number | string;
+	y?: number | string;
 	opacity?: number;
 }
 
@@ -83,13 +83,14 @@ export function fly(node: Element, {
 	const transform = style.transform === 'none' ? '' : style.transform;
 
 	const od = target_opacity * (1 - opacity);
-
+	const [xValue, xUnit] = split_css_unit(x);
+	const [yValue, yUnit] = split_css_unit(y);
 	return {
 		delay,
 		duration,
 		easing,
 		css: (t, u) => `
-			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+			transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
 			opacity: ${target_opacity - (od * u)}`
 	};
 }
diff --git a/test/js/samples/reactive-class-optimized/expected.js b/test/js/samples/reactive-class-optimized/expected.js
index f75a4015b0..1d0606ad60 100644
--- a/test/js/samples/reactive-class-optimized/expected.js
+++ b/test/js/samples/reactive-class-optimized/expected.js
@@ -9,6 +9,7 @@ import {
 	noop,
 	safe_not_equal,
 	space,
+	subscribe,
 	toggle_class
 } from "svelte/internal";
 
@@ -132,8 +133,13 @@ let reactiveModuleVar = Math.random();
 function instance($$self, $$props, $$invalidate) {
 	let reactiveDeclaration;
 	let $reactiveStoreVal;
-	let $reactiveDeclaration;
+
+	let $reactiveDeclaration,
+		$$unsubscribe_reactiveDeclaration = noop,
+		$$subscribe_reactiveDeclaration = () => ($$unsubscribe_reactiveDeclaration(), $$unsubscribe_reactiveDeclaration = subscribe(reactiveDeclaration, $$value => $$invalidate(3, $reactiveDeclaration = $$value)), reactiveDeclaration);
+
 	component_subscribe($$self, reactiveStoreVal, $$value => $$invalidate(2, $reactiveStoreVal = $$value));
+	$$self.$$.on_destroy.push(() => $$unsubscribe_reactiveDeclaration());
 	nonReactiveGlobal = Math.random();
 	const reactiveConst = { x: Math.random() };
 	reactiveModuleVar += 1;
@@ -142,8 +148,7 @@ function instance($$self, $$props, $$invalidate) {
 		reactiveConst.x += 1;
 	}
 
-	$: reactiveDeclaration = reactiveModuleVar * 2;
-	component_subscribe($$self, reactiveDeclaration, $$value => $$invalidate(3, $reactiveDeclaration = $$value));
+	$: $$subscribe_reactiveDeclaration($$invalidate(1, reactiveDeclaration = reactiveModuleVar * 2));
 	return [reactiveConst, reactiveDeclaration, $reactiveStoreVal, $reactiveDeclaration];
 }
 
diff --git a/test/js/samples/reactive-values/expected.js b/test/js/samples/reactive-values/expected.js
deleted file mode 100644
index 7ed435d6ad..0000000000
--- a/test/js/samples/reactive-values/expected.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/* generated by Svelte vX.Y.Z */
-import {
-	SvelteComponent,
-	detach,
-	element,
-	init,
-	insert,
-	noop,
-	safe_not_equal,
-	set_data,
-	space,
-	text
-} from "svelte/internal";
-
-function create_fragment(ctx) {
-	let h1;
-	let t3;
-	let t4;
-
-	return {
-		c() {
-			h1 = element("h1");
-			h1.textContent = `Hello ${name}!`;
-			t3 = space();
-			t4 = text(/*foo*/ ctx[0]);
-		},
-		m(target, anchor) {
-			insert(target, h1, anchor);
-			insert(target, t3, anchor);
-			insert(target, t4, anchor);
-		},
-		p(ctx, [dirty]) {
-			if (dirty & /*foo*/ 1) set_data(t4, /*foo*/ ctx[0]);
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(h1);
-			if (detaching) detach(t3);
-			if (detaching) detach(t4);
-		}
-	};
-}
-
-let name = 'world';
-
-function instance($$self) {
-	let foo;
-	$: foo = name + name;
-	return [foo];
-}
-
-class Component extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, instance, create_fragment, safe_not_equal, {});
-	}
-}
-
-export default Component;
\ No newline at end of file
diff --git a/test/js/samples/reactive-values/input.svelte b/test/js/samples/reactive-values/input.svelte
deleted file mode 100644
index d713217771..0000000000
--- a/test/js/samples/reactive-values/input.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	let name = 'world';
-	$: foo = name + name;
-</script>
-
-<h1>Hello {name}!</h1>
-{foo}
\ No newline at end of file
diff --git a/test/parser/samples/error-svelte-selfdestructive/error.json b/test/parser/samples/error-svelte-selfdestructive/error.json
index 68aa43dec9..f7cca12740 100644
--- a/test/parser/samples/error-svelte-selfdestructive/error.json
+++ b/test/parser/samples/error-svelte-selfdestructive/error.json
@@ -1,6 +1,6 @@
 {
 	"code": "invalid-tag-name",
-	"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self, svelte:component, svelte:fragment or svelte:element",
+	"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:document, svelte:body, svelte:self, svelte:component, svelte:fragment or svelte:element",
 	"pos": 10,
 	"start": {
 		"character": 10,
diff --git a/test/runtime-puppeteer/index.ts b/test/runtime-puppeteer/index.ts
index eba60544f6..efb7ac02e3 100644
--- a/test/runtime-puppeteer/index.ts
+++ b/test/runtime-puppeteer/index.ts
@@ -56,9 +56,7 @@ async function launchPuppeteer() {
 
 const assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
 
-describe('runtime (puppeteer)', function() {
-	// Note: Increase the timeout in preparation for restarting Chromium due to SIGSEGV.
-	this.timeout(10000);
+describe('runtime (puppeteer)', () => {
 	before(async () => {
 		svelte = loadSvelte(false);
 		console.log('[runtime-puppeteer] Loaded Svelte');
@@ -75,7 +73,7 @@ describe('runtime (puppeteer)', function() {
 
 	const failed = new Set();
 
-	function runTest(dir, hydrate) {
+	function runTest(dir, hydrate, is_first_run) {
 		if (dir[0] === '.') return;
 		// MEMO: puppeteer can not execute Chromium properly with Node8,10 on Linux at GitHub actions.
 		const { version } = process;
@@ -254,11 +252,14 @@ describe('runtime (puppeteer)', function() {
 					prettyPrintPuppeteerAssertionError(err.message);
 					assertWarnings();
 				});
-		});
+		}).timeout(is_first_run ? 20000 : 10000);
 	}
 
+	// Increase the timeout on the first run in preparation for restarting Chromium due to SIGSEGV.
+	let first_run = true;
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
-		runTest(dir, false);
-		runTest(dir, true);
+		runTest(dir, false, first_run);
+		runTest(dir, true, first_run);
+		first_run = false;
 	});
 });
diff --git a/test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js b/test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js
new file mode 100644
index 0000000000..a684f3e0d7
--- /dev/null
+++ b/test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: `
+		<p style="font-size: 32px; color: red; background-color: green; border-color: green;"></p>
+	`,
+
+	test({ assert, target, window, component }) {
+		const p = target.querySelector('p');
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'rgb(255, 0, 0)');
+		assert.equal(styles.fontSize, '32px');
+		assert.equal(styles.backgroundColor, 'rgb(0, 128, 0)');
+		assert.equal(styles.borderColor, 'rgb(0, 128, 0)');
+
+		component.foo = 'font-size: 50px; color: green;'; // Update style attribute
+		{
+			const p = target.querySelector('p');
+			const styles = window.getComputedStyle(p);
+			assert.equal(styles.color, 'rgb(255, 0, 0)');
+			assert.equal(styles.fontSize, '32px');
+			assert.equal(styles.backgroundColor, 'rgb(0, 128, 0)');
+			assert.equal(styles.borderColor, 'rgb(0, 128, 0)');
+		}
+	}
+};
diff --git a/test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte b/test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte
new file mode 100644
index 0000000000..3e8b721a42
--- /dev/null
+++ b/test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let foo = "font-size: 20px; color: blue;";
+	let baz = "red"; // static value
+	let bar = "32"; // static value interpolated
+	export let bg = "gre"; // dynamic value interpolated/cached
+	export let borderColor = "green"; // dynamic value non-cached
+</script>
+
+<p
+	style:font-size="{bar}px"
+	style:color={baz}
+	style="{foo}"
+	style:background-color="{bg}en"
+	style:border-color={borderColor}
+/>
diff --git a/test/runtime/samples/action-document/_config.js b/test/runtime/samples/action-document/_config.js
new file mode 100644
index 0000000000..d33cdb3fa4
--- /dev/null
+++ b/test/runtime/samples/action-document/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: '<div></div>',
+
+	async test({ assert, target, window }) {
+		const visibility = new window.Event('visibilitychange');
+
+		await window.document.dispatchEvent(visibility);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<div class="tooltip">Perform an Action</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/action-document/main.svelte b/test/runtime/samples/action-document/main.svelte
new file mode 100644
index 0000000000..eec4b3fecd
--- /dev/null
+++ b/test/runtime/samples/action-document/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	let container;
+	function tooltip(node, text) {
+		let tooltip = null;
+
+		function onVisibilityChange() {
+			tooltip = document.createElement('div');
+			tooltip.classList.add('tooltip');
+			tooltip.textContent = text;
+			container.appendChild(tooltip);
+		}
+
+		node.addEventListener('visibilitychange', onVisibilityChange);
+
+		return {
+			destroy() {
+				node.removeEventListener('visibilitychange', onVisibilityChange);
+			}
+		}
+	}
+</script>
+
+<svelte:document use:tooltip="{'Perform an Action'}" />
+<div bind:this={container} />
diff --git a/test/runtime/samples/await-then-destruct-computed-props/_config.js b/test/runtime/samples/await-then-destruct-computed-props/_config.js
new file mode 100644
index 0000000000..6d147535e3
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-computed-props/_config.js
@@ -0,0 +1,32 @@
+export default {
+	async test({ assert, component, target }) {
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>propA: 3</p>
+			<p>propB: 7</p>
+			<p>num: 3</p>
+			<p>rest: {"prop3":{"prop9":9,"prop10":10}}</p>
+			<p>propZ: 5</p>
+			<p>propY: 6</p>
+			<p>rest: {"propX":7,"propW":8}</p>
+			`
+		);
+
+		await (component.object = Promise.resolve({ prop1: 'one', prop2: 'two', prop3: { prop7: 'seven' }, prop4: { prop10: 'ten' }}));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>propA: seven</p>
+			<p>propB: ten</p>
+			<p>num: 5</p>
+			<p>rest: {"prop1":"one","prop2":"two"}</p>
+			<p>propZ: 5</p>
+			<p>propY: 6</p>
+			<p>rest: {"propX":7,"propW":8}</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-computed-props/main.svelte b/test/runtime/samples/await-then-destruct-computed-props/main.svelte
new file mode 100644
index 0000000000..71756d6cf3
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-computed-props/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let object = Promise.resolve({ prop1: { prop4: 2, prop5: 3 }, prop2: { prop6: 5, prop7: 6, prop8: 7 }, prop3: { prop9: 9, prop10: 10 } });
+	const objectReject = Promise.reject({ propZ: 5, propY: 6, propX: 7, propW: 8 });
+
+	let num = 1;
+	const prop = 'prop';
+</script>
+
+{#await object then { [`prop${num++}`]: { [`prop${num + 3}`]: propA }, [`prop${num++}`]: { [`prop${num + 5}`]: propB }, ...rest }}
+	<p>propA: {propA}</p>
+	<p>propB: {propB}</p>
+	<p>num: {num}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
+{#await objectReject then value}
+	resolved
+{:catch { [`${prop}Z`]: propZ, [`${prop}Y`]: propY, ...rest }}
+	<p>propZ: {propZ}</p>
+	<p>propY: {propY}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
diff --git a/test/runtime/samples/await-then-destruct-number-props/_config.js b/test/runtime/samples/await-then-destruct-number-props/_config.js
new file mode 100644
index 0000000000..6ef5e978d1
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-number-props/_config.js
@@ -0,0 +1,63 @@
+export default {
+	props: {
+		thePromise: new Promise(_ => {})
+	},
+
+	html: `
+		loading...
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve([10, 11, 12, 13, 14, 15]));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[1] 11</p>
+        <p>[3] 13</p>
+				<p>[4] 14</p>
+			`
+		);
+
+		await (component.thePromise = Promise.resolve({ 1: 21, 3: 23, 4: 24 }));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[1] 21</p>
+				<p>[3] 23</p>
+				<p>[4] 24</p>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject([30, 31, 32, 33, 34, 35]));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[0] 30</p>
+				<p>[2] 32</p>
+				<p>[5] 35</p>
+			`
+		);
+
+		try {
+		  await (component.thePromise = Promise.reject({ 0: 40, 2: 42, 5: 45 }));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[0] 40</p>
+				<p>[2] 42</p>
+				<p>[5] 45</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-number-props/main.svelte b/test/runtime/samples/await-then-destruct-number-props/main.svelte
new file mode 100644
index 0000000000..aaeee9b353
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-number-props/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	loading...
+{:then { 1: a, 3: b, 4: c }}
+	<p>[1] {a}</p>
+	<p>[3] {b}</p>
+	<p>[4] {c}</p>
+{:catch { 0: d, 2: e, 5: f }}
+	<p>[0] {d}</p>
+	<p>[2] {e}</p>
+	<p>[5] {f}</p>
+{/await}
diff --git a/test/runtime/samples/await-then-destruct-string-props/_config.js b/test/runtime/samples/await-then-destruct-string-props/_config.js
new file mode 100644
index 0000000000..6517f6bf20
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-string-props/_config.js
@@ -0,0 +1,17 @@
+export default {
+	async test({ assert, target }) {
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>prop-1: 1</p>
+			<p>prop4: 4</p>
+			<p>rest: {"prop2":2,"prop-3":3}</p>
+			<p>prop-7: 7</p>
+			<p>prop6: 6</p>
+			<p>rest: {"prop-5":5,"prop8":8}</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-string-props/main.svelte b/test/runtime/samples/await-then-destruct-string-props/main.svelte
new file mode 100644
index 0000000000..608b1161f5
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-string-props/main.svelte
@@ -0,0 +1,19 @@
+<script>
+  const object = Promise.resolve({ 'prop-1': 1, 'prop2': 2, 'prop-3': 3, 'prop4': 4 });
+  const objectReject = Promise.reject({ 'prop-5': 5, 'prop6': 6, 'prop-7': 7, 'prop8': 8 });
+</script>
+
+{#await object then { 'prop-1': prop1, 'prop4': fourthProp, ...rest }}
+	<p>prop-1: {prop1}</p>
+	<p>prop4: {fourthProp}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
+{#await objectReject then value}
+	resolved
+{:catch { 'prop-7': prop7, 'prop6': sixthProp, ...rest }}
+	<p>prop-7: {prop7}</p>
+	<p>prop6: {sixthProp}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
diff --git a/test/runtime/samples/binding-contenteditable-innertext/_config.js b/test/runtime/samples/binding-contenteditable-innertext/_config.js
new file mode 100644
index 0000000000..36e762ac24
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-innertext/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	ssrHtml: `
+		<editor contenteditable="true">world</editor>
+		<p>hello world</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		// JSDom doesn't support innerText yet, so the test is not ideal
+		// https://github.com/jsdom/jsdom/issues/1245
+		const el = target.querySelector('editor');
+		assert.equal(el.innerText, 'world');
+
+		const event = new window.Event('input');
+		el.innerText = 'everybody';
+		await el.dispatchEvent(event);
+		assert.equal(component.name, 'everybody');
+
+		component.name = 'goodbye';
+		assert.equal(el.innerText, 'goodbye');
+	}
+};
diff --git a/test/runtime/samples/binding-contenteditable-innertext/main.svelte b/test/runtime/samples/binding-contenteditable-innertext/main.svelte
new file mode 100644
index 0000000000..d65350d1a8
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-innertext/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let name;
+</script>
+
+<editor contenteditable="true" bind:innerText={name} />
+<p>hello {name}</p>
diff --git a/test/runtime/samples/binding-input-group-if-gh-8372-1/_config.js b/test/runtime/samples/binding-input-group-if-gh-8372-1/_config.js
new file mode 100644
index 0000000000..bdc4da2d57
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-if-gh-8372-1/_config.js
@@ -0,0 +1,40 @@
+export default {
+	async test({ assert, target, component, window }) {
+		const button = target.querySelector('button');
+		const clickEvent = new window.Event('click');
+		const changeEvent = new window.Event('change');
+
+		const [input1, input2] = target.querySelectorAll('input[type="checkbox"]');
+		function validate_inputs(v1, v2) {
+			assert.equal(input1.checked, v1);
+			assert.equal(input2.checked, v2);
+		}
+
+		assert.deepEqual(component.test, []);
+		validate_inputs(false, false);
+
+		component.test = ['a', 'b'];
+		validate_inputs(true, true);
+
+		input1.checked = false;
+		await input1.dispatchEvent(changeEvent);
+		assert.deepEqual(component.test, ['b']);
+
+		input2.checked = false;
+		await input2.dispatchEvent(changeEvent);
+		assert.deepEqual(component.test, []);
+
+		input1.checked = true;
+		input2.checked = true;
+		await input1.dispatchEvent(changeEvent);
+		await input2.dispatchEvent(changeEvent);
+		assert.deepEqual(component.test, ['b', 'a']);
+
+		await button.dispatchEvent(clickEvent);
+		assert.deepEqual(component.test, ['b', 'a']); // should it be ['a'] only? valid arguments for both outcomes
+
+		input1.checked = false;
+		await input1.dispatchEvent(changeEvent);
+		assert.deepEqual(component.test, []);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-if-gh-8372-1/main.svelte b/test/runtime/samples/binding-input-group-if-gh-8372-1/main.svelte
new file mode 100644
index 0000000000..71955b6b81
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-if-gh-8372-1/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let test = [];
+	let hidden = false
+</script>
+
+<button on:click={() => hidden = !hidden}>
+	{hidden ? "show" : "hide"} b
+</button>
+
+<label>a <input type="checkbox" bind:group={test} value="a" /></label>
+{#if !hidden}
+<label>b <input type="checkbox" bind:group={test} value="b" /></label>
+{/if}
+<label>c <input value="just here, so b is not the last input" /></label>
diff --git a/test/runtime/samples/binding-input-group-if-gh-8372-2/_config.js b/test/runtime/samples/binding-input-group-if-gh-8372-2/_config.js
new file mode 100644
index 0000000000..a8d5a7137f
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-if-gh-8372-2/_config.js
@@ -0,0 +1,34 @@
+export default {
+	async test({ assert, target, component, window }) {
+		const button = target.querySelector('button');
+		const clickEvent = new window.Event('click');
+		const changeEvent = new window.Event('change');
+
+		const [input1, input2] = target.querySelectorAll('input[type="radio"]');
+		function validate_inputs(v1, v2) {
+			assert.equal(input1.checked, v1);
+			assert.equal(input2.checked, v2);
+		}
+
+		component.test = 'a';
+		validate_inputs(true, false);
+
+		component.test = 'b';
+		validate_inputs(false, true);
+
+		input1.checked = true;
+		await input1.dispatchEvent(changeEvent);
+		assert.deepEqual(component.test, 'a');
+
+		input2.checked = true;
+		await input2.dispatchEvent(changeEvent);
+		assert.deepEqual(component.test, 'b');
+
+		await button.dispatchEvent(clickEvent);
+		assert.deepEqual(component.test, 'b'); // should it be undefined? valid arguments for both outcomes
+
+		input1.checked = true;
+		await input1.dispatchEvent(changeEvent);
+		assert.deepEqual(component.test, 'a');
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-if-gh-8372-2/main.svelte b/test/runtime/samples/binding-input-group-if-gh-8372-2/main.svelte
new file mode 100644
index 0000000000..9add22cacc
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-if-gh-8372-2/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let test;
+	let hidden = false
+</script>
+
+<button on:click={() => hidden = !hidden}>
+	{hidden ? "show" : "hide"} b
+</button>
+
+<label>a <input type="radio" bind:group={test} value="a" /></label>
+{#if !hidden}
+<label>b <input type="radio" bind:group={test} value="b" /></label>
+{/if}
+<label>c <input value="just here, so b is not the last input" /></label>
diff --git a/test/runtime/samples/const-tag-await-then-destructuring-computed-props/_config.js b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/_config.js
new file mode 100644
index 0000000000..9ec4a3e3e6
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<p>4, 12, 60</p>
+	`,
+
+	async test({ component, target, assert }) {
+		component.permutation = [2, 3, 1];
+		await (component.promise1 = Promise.resolve({length: 1, width: 2, height: 3}));
+		try {
+			await (component.promise2 = Promise.reject({length: 97, width: 98, height: 99}));
+		} catch (e) {
+			// nothing
+		}
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>2, 11, 2</p>
+			<p>9506, 28811, 98</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-await-then-destructuring-computed-props/main.svelte b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/main.svelte
new file mode 100644
index 0000000000..fbc54e4d0b
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let promise1 = {length: 5, width: 3, height: 4};
+	export let promise2 = {length: 12, width: 5, height: 13};
+	export let permutation = [1, 2, 3];
+
+	function calculate(length, width, height) {
+		return { 
+			'1-Dimensions': [length, width, height],
+			'2-Dimensions': [length * width, width * height, length * height],
+			'3-Dimensions': [length * width * height, length + width + height, length * width + width * height + length * height]
+		};
+	}
+</script>
+
+{#await promise1 then { length, width, height }}
+	{@const [a, b, c] = permutation}
+	{@const { [`${a}-Dimensions`]: { [c - 1]: first }, [`${b}-Dimensions`]: { [b - 1]: second }, [`${c}-Dimensions`]: { [a - 1]: third } } = calculate(length, width, height) }
+	<p>{first}, {second}, {third}</p>
+{/await}
+
+{#await promise2 catch { length, width, height }}
+	{@const [a, b, c] = permutation}
+	{@const { [`${a}-Dimensions`]: { [c - 1]: first }, [`${b}-Dimensions`]: { [b - 1]: second }, [`${c}-Dimensions`]: { [a - 1]: third } } = calculate(length, width, height) } 
+	<p>{first}, {second}, {third}</p>
+{/await}
diff --git a/test/runtime/samples/const-tag-await-then-destructuring-literals/_config.js b/test/runtime/samples/const-tag-await-then-destructuring-literals/_config.js
new file mode 100644
index 0000000000..cb40e7c456
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring-literals/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: '<div>12 120 70, 30+4=34</div>',
+	async test({ component, target, assert }) {
+		component.promise1 = Promise.resolve({width: 5, height: 6});
+		component.promise2 = Promise.reject({width: 6, height: 7});
+
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 300 110, 50+6=56</div>
+			<div>42 420 130, 60+7=67</div>
+		`);
+
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-await-then-destructuring-literals/main.svelte b/test/runtime/samples/const-tag-await-then-destructuring-literals/main.svelte
new file mode 100644
index 0000000000..0875820e4a
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring-literals/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let promise1 = {width: 3, height: 4};
+	export let promise2 = {width: 5, height: 7};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { 'the-area': width * height, 'the-volume': width * height * constant };
+	}
+</script>
+
+{#await promise1 then { width, height }}
+	{@const {'the-area': area, 'the-volume': volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const { 0: _width, 1: _height, 2: sum } = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}
+
+{#await promise2 catch { width, height }}
+	{@const {'the-area': area, 'the-volume': volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const { 0: _width, 1: _height, 2: sum } = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}
diff --git a/test/runtime/samples/const-tag-each-destructure-computed-props/_config.js b/test/runtime/samples/const-tag-each-destructure-computed-props/_config.js
new file mode 100644
index 0000000000..c299f19da6
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure-computed-props/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>6, 12, 8, 24</button>
+		<button>45, 35, 63, 315</button>
+		<button>60, 48, 80, 480</button>
+	`,
+
+	async test({ component, target, assert }) {
+		component.boxes = [{ length: 10, width: 20, height: 30 }];
+
+		assert.htmlEqual(target.innerHTML, 
+			'<button>200, 600, 300, 6000</button>'
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-destructure-computed-props/main.svelte b/test/runtime/samples/const-tag-each-destructure-computed-props/main.svelte
new file mode 100644
index 0000000000..c8c7e1977a
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure-computed-props/main.svelte
@@ -0,0 +1,42 @@
+<script>
+	export let boxes = [
+		{length: 2, width: 3, height: 4},
+		{length: 9, width: 5, height: 7},
+		{length: 10, width: 6, height: 8}
+	];
+
+	function calculate(length, width, height) {
+		return { 
+				twoDimensions: {
+				bottomArea: length * width,
+				sideArea1: width * height,
+				sideArea2: length * height
+			},
+			threeDimensions: {
+				volume: length * width * height
+			}
+		};
+	}
+
+	export let dimension = 'Dimensions';
+	function changeDimension() {
+		dimension = 'DIMENSIONS';
+	}
+
+	let area = 'Area';
+</script>
+
+{#each boxes as { length, width, height }}
+	{@const {
+		[`two${dimension}`]: { 
+			i = 1, 
+			[`bottom${area}`]: bottom, 
+			[`side${area}${i++}`]: sideone, 
+			[`side${area}${i++}`]: sidetwo 
+		},
+		[`three${dimension}`]: {
+			volume
+		}
+	} = calculate(length, width, height)}
+	<button on:click={changeDimension}>{bottom}, {sideone}, {sidetwo}, {volume}</button>
+{/each}
diff --git a/test/runtime/samples/const-tag-each-destructure-literals/_config.js b/test/runtime/samples/const-tag-each-destructure-literals/_config.js
new file mode 100644
index 0000000000..00f8b31540
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure-literals/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>35 350 120, 50+7=57</div>
+		<div>48 480 140, 60+8=68</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>35 700 240, 100+7=107</div>
+			<div>48 960 280, 120+8=128</div>
+		`);
+
+		component.boxes = [
+			{width: 3, height: 4},
+			{width: 4, height: 5},
+			{width: 5, height: 6},
+			{width: 6, height: 7}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>20 400 180, 80+5=85</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-destructure-literals/main.svelte b/test/runtime/samples/const-tag-each-destructure-literals/main.svelte
new file mode 100644
index 0000000000..b0fc221ec9
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure-literals/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let boxes = [
+		{width: 3, height: 4},
+		{width: 5, height: 7},
+		{width: 6, height: 8},
+	];
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { 'the-area': width * height, 'the-volume': width * height * constant };
+	}
+</script>
+
+{#each boxes as { width, height }}
+	{@const { 'the-area': area, 'the-volume': volume } = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const { 2: sum, 0: _width, 1: _height } = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-array-as-object/_config.js b/test/runtime/samples/each-block-destructured-array-as-object/_config.js
new file mode 100644
index 0000000000..ff341ce033
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array-as-object/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		array: [
+      [1, 2, 3, 4, 5],
+      [6, 7, 8],
+      [9, 10, 11, 12]
+		]
+	},
+
+	html: `
+		<p>First: 1, Third: 3, Length: 5</p>
+		<p>First: 6, Third: 8, Length: 3</p>
+		<p>First: 9, Third: 11, Length: 4</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.array = [[12, 13]];
+		assert.htmlEqual( target.innerHTML, `
+			<p>First: 12, Third: undefined, Length: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-array-as-object/main.svelte b/test/runtime/samples/each-block-destructured-array-as-object/main.svelte
new file mode 100644
index 0000000000..cff735555b
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array-as-object/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let array;
+</script>
+
+{#each array as { 0: first, '2': third, "length": length }}
+	<p>First: {first}, Third: {third}, Length: {length}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-array-computed-props/_config.js b/test/runtime/samples/each-block-destructured-array-computed-props/_config.js
new file mode 100644
index 0000000000..e400e2f280
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array-computed-props/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		array: [
+			[1, 2, 3, 4, 5],
+			[6, 7, 8],
+			[9, 10, 11, 12],
+			[13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
+		]
+	},
+
+	html: `
+		<p>First: 1, Half: 3, Last: 5, Length: 5</p>
+		<p>First: 6, Half: 7, Last: 8, Length: 3</p>
+		<p>First: 9, Half: 11, Last: 12, Length: 4</p>
+		<p>First: 13, Half: 18, Last: 22, Length: 10</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.array = [[23, 24, 25, 26, 27, 28, 29]];
+		assert.htmlEqual( target.innerHTML, `
+			<p>First: 23, Half: 26, Last: 29, Length: 7</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-array-computed-props/main.svelte b/test/runtime/samples/each-block-destructured-array-computed-props/main.svelte
new file mode 100644
index 0000000000..00a9a99a89
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array-computed-props/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let array;
+</script>
+
+{#each array as { 0: first, length, [length - 1]: last, [Math.floor(length / 2)]: half }}
+	<p>First: {first}, Half: {half}, Last: {last}, Length: {length}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-object-computed-props/_config.js b/test/runtime/samples/each-block-destructured-object-computed-props/_config.js
new file mode 100644
index 0000000000..7e98fab913
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-computed-props/_config.js
@@ -0,0 +1,26 @@
+export default {
+	props: {
+		firstString: 'cats',
+		secondString: 'dogs',
+		objectsArray: [
+			{ dogs: 'woof', cats: 'meow', stac: 'stack', DOGS: 'WOOF' },
+			{ dogs: 'A German sheppard', cats: 'A tailless cat', stac: 'A jenga tower', DOGS: 'A GERMAN SHEPPARD' },
+			{ dogs: 'dogs', cats: 'cats', stac: 'stac', DOGS: 'DOGS' }
+		]
+	},
+
+	html: `
+		<p>cats: meow</p>
+		<p>dogs: woof</p>
+		<p>stac: stack</p>
+		<p>DOGS: WOOF</p> 
+		<p>cats: A tailless cat</p>
+		<p>dogs: A German sheppard</p>
+		<p>stac: A jenga tower</p>
+		<p>DOGS: A GERMAN SHEPPARD</p> 
+		<p>cats: cats</p>
+		<p>dogs: dogs</p>
+		<p>stac: stac</p>
+		<p>DOGS: DOGS</p> 
+	`
+};
diff --git a/test/runtime/samples/each-block-destructured-object-computed-props/main.svelte b/test/runtime/samples/each-block-destructured-object-computed-props/main.svelte
new file mode 100644
index 0000000000..9c2ae29617
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-computed-props/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let objectsArray;
+	export let firstString;
+	export let secondString;
+</script>
+
+{#each objectsArray as { [firstString]: firstProp, [secondString]: secondProp, [firstString.split('').reverse().join('')]: reverseFirst, [secondString.toUpperCase()]: upperSecond } }
+	<p>{firstString}: {firstProp}</p>
+  <p>{secondString}: {secondProp}</p>
+	<p>{firstString.split('').reverse().join('')}: {reverseFirst}</p>
+	<p>{secondString.toUpperCase()}: {upperSecond}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-object-literal-props/_config.js b/test/runtime/samples/each-block-destructured-object-literal-props/_config.js
new file mode 100644
index 0000000000..0b29c28cd9
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-literal-props/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		objectsArray: [
+      { 'foo-bar': 'FooBar', 0: 'zero', prop: 'prop' },
+      { 'foo-bar': 'foobar', 0: 'null', prop: 'a prop' },
+      { 'foo-bar': 'FOO BAR', 0: 'nada', prop: 'the prop' }
+		]
+	},
+
+	html: `
+		<p>FooBar: prop zero</p>
+		<p>foobar: a prop null</p>
+		<p>FOO BAR: the prop nada</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.objectsArray = [{ 'foo-bar': 'Fool Ball', 0: 'nil', prop: 'one prop' }];
+		assert.htmlEqual( target.innerHTML, `
+			<p>Fool Ball: one prop nil</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-object-literal-props/main.svelte b/test/runtime/samples/each-block-destructured-object-literal-props/main.svelte
new file mode 100644
index 0000000000..08826e80e9
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-literal-props/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let objectsArray;
+</script>
+
+{#each objectsArray as { 0: prop0, "foo-bar": propFooBar, prop: varProp } }
+	<p>{propFooBar}: {varProp} {prop0}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-object-literal-rest/_config.js b/test/runtime/samples/each-block-destructured-object-literal-rest/_config.js
new file mode 100644
index 0000000000..b2f29e28f5
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-literal-rest/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		objectsArray: [
+			{ quote: 'q1', 'wrong-quote': 'wq1', 16: '16', class: 'class' },
+			{ quote: 'q2', 'wrong-quote': 'wq2', 16: 'sixteen', class: 'glass' },
+			{ quote: 'q3', 'wrong-quote': 'wq3', 16: 'seize', class: 'mass' }
+		]
+	},
+
+	html: `
+    <p class="class">Quote: q1, Wrong Quote: wq1, 16: 16</p>
+    <p class="glass">Quote: q2, Wrong Quote: wq2, 16: sixteen</p>
+    <p class="mass">Quote: q3, Wrong Quote: wq3, 16: seize</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.objectsArray = [{ quote: 'new-quote', 'wrong-quote': 'wq4', 16: 'ten+six', role: 'role' }];
+		assert.htmlEqual(target.innerHTML, `
+			<p role="role">Quote: new-quote, Wrong Quote: wq4, 16: ten+six</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-object-literal-rest/main.svelte b/test/runtime/samples/each-block-destructured-object-literal-rest/main.svelte
new file mode 100644
index 0000000000..943b3b7940
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-literal-rest/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let objectsArray;
+</script>
+
+{#each objectsArray as { "quote": quotedProp, "wrong-quote": wrongQuote, 16: sixteen, ...props } }
+	<p {...props}>Quote: {quotedProp}, Wrong Quote: {wrongQuote}, 16: {sixteen}</p>
+{/each}
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js b/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
index f5780daf80..f2ab49b511 100644
--- a/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
+++ b/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
@@ -5,7 +5,6 @@ export default {
 
 	test({ assert, target, window }) {
 		const p = target.querySelector('p');
-
 		const styles = window.getComputedStyle(p);
 		assert.equal(styles.color, 'red');
 		assert.equal(styles.height, '40px');
diff --git a/test/runtime/samples/reactive-statement-indirect/_config.js b/test/runtime/samples/reactive-statement-indirect/_config.js
new file mode 100644
index 0000000000..9265ded073
--- /dev/null
+++ b/test/runtime/samples/reactive-statement-indirect/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<h1>2</h1>
+		<button>Increment</button>
+	`,
+	async test({ assert, target }) {
+		await target.querySelector('button').dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>4</h1>
+			<button>Increment</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-statement-indirect/main.svelte b/test/runtime/samples/reactive-statement-indirect/main.svelte
new file mode 100644
index 0000000000..ab75c19127
--- /dev/null
+++ b/test/runtime/samples/reactive-statement-indirect/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = 1;
+	// Could be a let or simplified, but this tests that it still works like this
+	$: indirect_double = 2;
+	$: if (count > 0) {
+		indirect_double = count * 2;
+	}
+</script>
+
+<h1>{indirect_double}</h1>
+<button on:click={() => count++}>Increment</button>
diff --git a/test/store/index.ts b/test/store/index.ts
index 7e8bdb2f64..920cabdc39 100644
--- a/test/store/index.ts
+++ b/test/store/index.ts
@@ -407,6 +407,25 @@ describe('store', () => {
 			const d = derived(fake_observable, _ => _);
 			assert.equal(get(d), 42);
 		});
+
+		it('doesn\'t restart when unsubscribed from another store with a shared ancestor', () => {
+			const a = writable(true);
+			let b_started = false;
+			const b = derived(a, (_, __) => {
+				b_started = true;
+				return () => {
+					assert.equal(b_started, true);
+					b_started = false;
+				};
+			});
+			const c = derived(a, ($a, set) => {
+				if ($a) return b.subscribe(set);
+			});
+
+			c.subscribe(() => { });
+			a.set(false);
+			assert.equal(b_started, false);
+		});
 	});
 
 	describe('get', () => {
diff --git a/test/utils/index.ts b/test/utils/index.ts
index a8aed9387a..37ba63b1c7 100644
--- a/test/utils/index.ts
+++ b/test/utils/index.ts
@@ -1,5 +1,6 @@
 import * as assert from 'assert';
 import { trim_start, trim_end } from '../../src/compiler/utils/trim';
+import { split_css_unit } from '../../src/runtime/internal/utils';
 
 describe('utils', () => {
 	describe('trim', () => {
@@ -13,4 +14,17 @@ describe('utils', () => {
 			assert.equal(value, '	\r\n\t svelte content');
 		});
 	});
+
+	describe('split_css_unit', () => {
+		it('should use px as default', () => {
+			assert.deepEqual(split_css_unit(10), [10, 'px']);
+			assert.deepEqual(split_css_unit('10'), [10, 'px']);
+		});
+
+		it('should split the css notation into value and unit', () => {
+			assert.deepEqual(split_css_unit('-50%'), [-50, '%']);
+			assert.deepEqual(split_css_unit('0.1rem'), [0.1, 'rem']);
+			assert.deepEqual(split_css_unit('.1rem'), [0.1, 'rem']);
+		});
+	});
 });
diff --git a/test/validator/samples/a11y-contenteditable-element-without-child/errors.json b/test/validator/samples/a11y-contenteditable-element-without-child/errors.json
index b4bd522c40..2d803d755a 100644
--- a/test/validator/samples/a11y-contenteditable-element-without-child/errors.json
+++ b/test/validator/samples/a11y-contenteditable-element-without-child/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "missing-contenteditable-attribute",
-		"message": "'contenteditable' attribute is required for textContent and innerHTML two-way bindings",
+		"message": "'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings",
 		"start": {
 			"line": 6,
 			"column": 3
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
index 80b4fd9410..5c9bfd86ed 100644
--- 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
@@ -71,36 +71,34 @@
 <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" />
+<!-- VALID: div elements assigned an interactive role. -->
+<div role="button" />
+<div role="checkbox" aria-checked={true} />
+<div role="columnheader" />
+<div role="combobox" aria-controls={[]} aria-expanded={true} />
+<div role="grid" />
+<div role="gridcell" />
+<div role="link" />
+<div role="listbox" />
+<div role="menu" />
+<div role="menubar" />
+<div role="menuitem" />
+<div role="menuitemcheckbox" aria-checked />
+<div role="menuitemradio" aria-checked />
+<div role="option" aria-selected />
+<div role="progressbar" />
+<div role="radio" aria-checked />
+<div role="radiogroup" />
+<div role="row" />
+<div role="rowheader" />
+<div role="scrollbar" aria-controls={[]} aria-valuenow={0} />
+<div role="searchbox" />
+<div role="slider" aria-valuenow={0} />
+<div role="spinbutton" />
+<div role="switch" aria-checked />
+<div role="tab" />
+<div role="textbox" />
+<div role="treeitem" aria-selected={true} />
 
 <!-- HTML elements attributed with a non-interactive role -->
 <div role="alert" />
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
index 7d8ef008cf..3199f3d0fb 100644
--- 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
@@ -635,76 +635,76 @@
 			"line": 72
 		}
 	},
-	{
+  {
 		"code": "a11y-no-interactive-element-to-noninteractive-role",
 		"end": {
 			"column": 28,
-			"line": 145
+			"line": 143
 		},
 		"message": "A11y: <menuitem> cannot have role 'listitem'",
 		"start": {
 			"column": 0,
-			"line": 145
+			"line": 143
 		}
 	},
 	{
 		"code": "a11y-no-interactive-element-to-noninteractive-role",
 		"end": {
 			"column": 38,
-			"line": 146
+			"line": 144
 		},
 		"message": "A11y: <option> cannot have role 'listitem'",
 		"start": {
 			"column": 0,
-			"line": 146
+			"line": 144
 		}
 	},
 	{
 		"code": "a11y-no-interactive-element-to-noninteractive-role",
 		"end": {
 			"column": 38,
-			"line": 147
+			"line": 145
 		},
 		"message": "A11y: <select> cannot have role 'listitem'",
 		"start": {
 			"column": 0,
-			"line": 147
+			"line": 145
 		}
 	},
 	{
 		"code": "a11y-no-interactive-element-to-noninteractive-role",
 		"end": {
 			"column": 27,
-			"line": 148
+			"line": 146
 		},
 		"message": "A11y: <summary> cannot have role 'listitem'",
 		"start": {
 			"column": 0,
-			"line": 148
+			"line": 146
 		}
 	},
 	{
 		"code": "a11y-no-interactive-element-to-noninteractive-role",
 		"end": {
 			"column": 40,
-			"line": 149
+			"line": 147
 		},
 		"message": "A11y: <textarea> cannot have role 'listitem'",
 		"start": {
 			"column": 0,
-			"line": 149
+			"line": 147
 		}
 	},
 	{
 		"code": "a11y-no-interactive-element-to-noninteractive-role",
 		"end": {
 			"column": 22,
-			"line": 150
+			"line": 148
 		},
 		"message": "A11y: <tr> cannot have role 'listitem'",
 		"start": {
 			"column": 0,
-			"line": 150
+			"line": 148
 		}
 	}
 ]
diff --git a/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte b/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
new file mode 100644
index 0000000000..2e4baa5877
--- /dev/null
+++ b/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
@@ -0,0 +1,109 @@
+<!-- ALL INVALID: HTML elements with interactive role  -->
+<article role="button" />
+<aside role="checkbox" aria-checked={false} />
+<blockquote role="columnheader" />
+<body role="combobox" aria-controls={[]} aria-expanded />
+<br role="grid" />
+<caption role="gridcell" />
+<dd role="link" />
+<details role="listbox" />
+<dir role="menu" />
+<dl role="menubar" />
+<dfn role="menuitem" />
+<dt role="menuitemcheckbox" aria-checked />
+<fieldset role="menuitemradio" aria-checked />
+<figure>
+  <figcaption role="menuitemradio" aria-checked />
+</figure>
+<figure role="option" aria-selected />
+<footer role="radio" aria-checked />
+<form role="radiogroup" />
+<frame role="row" />
+<h1 role="rowheader">Button</h1>
+<h2 role="scrollbar" aria-controls={[]} aria-valuenow={0} >Button</h2>
+<h3 role="searchbox">Button</h3>
+<h4 role="slider" aria-valuenow={0}>Button</h4>
+<h5 role="spinbutton">Button</h5>
+<h6 role="switch" aria-checked>Button</h6>
+<hr role="tab" />
+<img role="tabpanel" alt="tabpanel" />
+<label role="textbox" />
+<legend role="toolbar" />
+<li role="tree" />
+<main role="treegrid" />
+<mark role="treeitem" aria-selected />
+<marquee role="doc-backlink" />
+<menu role="doc-biblioref" />
+<meter role="doc-glossref" />
+<nav role="doc-noteref" />
+<ol role="button" />
+<optgroup role="treeitem" aria-selected />
+<output role="treegrid" />
+<p role="columnheader" />
+<pre role="tree" />
+<progress role="combobox" aria-controls={[]} aria-expanded />
+<ruby role="toolbar" />
+<section role="radio" aria-label="radio" aria-checked />
+<table role="menu" />
+<tbody role="searchbox" />
+<td role="button" />
+<tfoot role="listbox" />
+<thead role="slider" aria-valuenow={0} />
+<time role="doc-backlink" />
+<ul role="spinbutton" />
+
+<!-- VALID under recommended settings, INVALID under strict settings: ul, ol, li has interactive roles -->
+<!-- ul -->
+<ul role="menu" />
+<ul role="menubar" />
+<ul role="radiogroup" />
+<ul role="tablist" />
+<ul role="tree" />
+<ul role="treegrid" />
+<!-- ol -->
+<ol role="menu" />
+<ol role="menubar" />
+<ol role="radiogroup" />
+<ol role="tablist" />
+<ol role="tree" />
+<ol role="treegrid" />
+<!-- li -->
+<li role="tab" />
+<li role="menuitem" />
+<li role="row" />
+<li role="treeitem" aria-selected={false} />
+
+<!-- VALID: div elements assigned an interactive role. -->
+<div role="button" />
+<div role="checkbox" aria-checked={true} />
+<div role="columnheader" />
+<div role="combobox" aria-controls={[]} aria-expanded={true} />
+<div role="grid" />
+<div role="gridcell" />
+<div role="link" />
+<div role="listbox" />
+<div role="menu" />
+<div role="menubar" />
+<div role="menuitem" />
+<div role="menuitemcheckbox" aria-checked />
+<div role="menuitemradio" aria-checked />
+<div role="option" aria-selected />
+<div role="progressbar" />
+<div role="radio" aria-checked />
+<div role="radiogroup" />
+<div role="row" />
+<div role="rowheader" />
+<div role="scrollbar" aria-controls={[]} aria-valuenow={0} />
+<div role="searchbox" />
+<div role="slider" aria-valuenow={0} />
+<div role="spinbutton" />
+<div role="switch" aria-checked />
+<div role="tab" />
+<div role="textbox" />
+<div role="treeitem" aria-selected={true} />
+
+<!-- VALID: HTML elements attributed with a non-interactive role -->
+<div role="alert" />
+<div role="document" />
+<div role="separator" />
+<div role="timer" />
diff --git a/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json b/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json
new file mode 100644
index 0000000000..4b4c9c3d97
--- /dev/null
+++ b/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json
@@ -0,0 +1,818 @@
+[
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 25,
+      "line": 2
+    },
+    "message": "A11y: Non-interactive element <article> cannot have interactive role 'button'",
+    "start": {
+      "column": 0,
+      "line": 2
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 46,
+      "line": 3
+    },
+    "message": "A11y: Non-interactive element <aside> cannot have interactive role 'checkbox'",
+    "start": {
+      "column": 0,
+      "line": 3
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 34,
+      "line": 4
+    },
+    "message": "A11y: Non-interactive element <blockquote> cannot have interactive role 'columnheader'",
+    "start": {
+      "column": 0,
+      "line": 4
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 57,
+      "line": 5
+    },
+    "message": "A11y: Non-interactive element <body> cannot have interactive role 'combobox'",
+    "start": {
+      "column": 0,
+      "line": 5
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 18,
+      "line": 6
+    },
+    "message": "A11y: Non-interactive element <br> cannot have interactive role 'grid'",
+    "start": {
+      "column": 0,
+      "line": 6
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 27,
+      "line": 7
+    },
+    "message": "A11y: Non-interactive element <caption> cannot have interactive role 'gridcell'",
+    "start": {
+      "column": 0,
+      "line": 7
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 18,
+      "line": 8
+    },
+    "message": "A11y: Non-interactive element <dd> cannot have interactive role 'link'",
+    "start": {
+      "column": 0,
+      "line": 8
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 26,
+      "line": 9
+    },
+    "message": "A11y: Non-interactive element <details> cannot have interactive role 'listbox'",
+    "start": {
+      "column": 0,
+      "line": 9
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 19,
+      "line": 10
+    },
+    "message": "A11y: Non-interactive element <dir> cannot have interactive role 'menu'",
+    "start": {
+      "column": 0,
+      "line": 10
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 21,
+      "line": 11
+    },
+    "message": "A11y: Non-interactive element <dl> cannot have interactive role 'menubar'",
+    "start": {
+      "column": 0,
+      "line": 11
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 23,
+      "line": 12
+    },
+    "message": "A11y: Non-interactive element <dfn> cannot have interactive role 'menuitem'",
+    "start": {
+      "column": 0,
+      "line": 12
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 43,
+      "line": 13
+    },
+    "message": "A11y: Non-interactive element <dt> cannot have interactive role 'menuitemcheckbox'",
+    "start": {
+      "column": 0,
+      "line": 13
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 46,
+      "line": 14
+    },
+    "message": "A11y: Non-interactive element <fieldset> cannot have interactive role 'menuitemradio'",
+    "start": {
+      "column": 0,
+      "line": 14
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 50,
+      "line": 16
+    },
+    "message": "A11y: Non-interactive element <figcaption> cannot have interactive role 'menuitemradio'",
+    "start": {
+      "column": 2,
+      "line": 16
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 38,
+      "line": 18
+    },
+    "message": "A11y: Non-interactive element <figure> cannot have interactive role 'option'",
+    "start": {
+      "column": 0,
+      "line": 18
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 36,
+      "line": 19
+    },
+    "message": "A11y: Non-interactive element <footer> cannot have interactive role 'radio'",
+    "start": {
+      "column": 0,
+      "line": 19
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 26,
+      "line": 20
+    },
+    "message": "A11y: Non-interactive element <form> cannot have interactive role 'radiogroup'",
+    "start": {
+      "column": 0,
+      "line": 20
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 20,
+      "line": 21
+    },
+    "message": "A11y: Non-interactive element <frame> cannot have interactive role 'row'",
+    "start": {
+      "column": 0,
+      "line": 21
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 32,
+      "line": 22
+    },
+    "message": "A11y: Non-interactive element <h1> cannot have interactive role 'rowheader'",
+    "start": {
+      "column": 0,
+      "line": 22
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 70,
+      "line": 23
+    },
+    "message": "A11y: Non-interactive element <h2> cannot have interactive role 'scrollbar'",
+    "start": {
+      "column": 0,
+      "line": 23
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 32,
+      "line": 24
+    },
+    "message": "A11y: Non-interactive element <h3> cannot have interactive role 'searchbox'",
+    "start": {
+      "column": 0,
+      "line": 24
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 47,
+      "line": 25
+    },
+    "message": "A11y: Non-interactive element <h4> cannot have interactive role 'slider'",
+    "start": {
+      "column": 0,
+      "line": 25
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 33,
+      "line": 26
+    },
+    "message": "A11y: Non-interactive element <h5> cannot have interactive role 'spinbutton'",
+    "start": {
+      "column": 0,
+      "line": 26
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 42,
+      "line": 27
+    },
+    "message": "A11y: Non-interactive element <h6> cannot have interactive role 'switch'",
+    "start": {
+      "column": 0,
+      "line": 27
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 17,
+      "line": 28
+    },
+    "message": "A11y: Non-interactive element <hr> cannot have interactive role 'tab'",
+    "start": {
+      "column": 0,
+      "line": 28
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 38,
+      "line": 29
+    },
+    "message": "A11y: Non-interactive element <img> cannot have interactive role 'tabpanel'",
+    "start": {
+      "column": 0,
+      "line": 29
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 24,
+      "line": 30
+    },
+    "message": "A11y: Non-interactive element <label> cannot have interactive role 'textbox'",
+    "start": {
+      "column": 0,
+      "line": 30
+    }
+  },
+  {
+    "code": "a11y-label-has-associated-control",
+    "end": {
+      "column": 24,
+      "line": 30
+    },
+    "message": "A11y: A form label must be associated with a control.",
+    "start": {
+      "column": 0,
+      "line": 30
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 25,
+      "line": 31
+    },
+    "message": "A11y: Non-interactive element <legend> cannot have interactive role 'toolbar'",
+    "start": {
+      "column": 0,
+      "line": 31
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 18,
+      "line": 32
+    },
+    "message": "A11y: Non-interactive element <li> cannot have interactive role 'tree'",
+    "start": {
+      "column": 0,
+      "line": 32
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 24,
+      "line": 33
+    },
+    "message": "A11y: Non-interactive element <main> cannot have interactive role 'treegrid'",
+    "start": {
+      "column": 0,
+      "line": 33
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 38,
+      "line": 34
+    },
+    "message": "A11y: Non-interactive element <mark> cannot have interactive role 'treeitem'",
+    "start": {
+      "column": 0,
+      "line": 34
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 31,
+      "line": 35
+    },
+    "message": "A11y: Non-interactive element <marquee> cannot have interactive role 'doc-backlink'",
+    "start": {
+      "column": 0,
+      "line": 35
+    }
+  },
+  {
+    "code": "a11y-distracting-elements",
+    "end": {
+      "column": 31,
+      "line": 35
+    },
+    "message": "A11y: Avoid <marquee> elements",
+    "start": {
+      "column": 0,
+      "line": 35
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 29,
+      "line": 36
+    },
+    "message": "A11y: Non-interactive element <menu> cannot have interactive role 'doc-biblioref'",
+    "start": {
+      "column": 0,
+      "line": 36
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 29,
+      "line": 37
+    },
+    "message": "A11y: Non-interactive element <meter> cannot have interactive role 'doc-glossref'",
+    "start": {
+      "column": 0,
+      "line": 37
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 26,
+      "line": 38
+    },
+    "message": "A11y: Non-interactive element <nav> cannot have interactive role 'doc-noteref'",
+    "start": {
+      "column": 0,
+      "line": 38
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 20,
+      "line": 39
+    },
+    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'button'",
+    "start": {
+      "column": 0,
+      "line": 39
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 42,
+      "line": 40
+    },
+    "message": "A11y: Non-interactive element <optgroup> cannot have interactive role 'treeitem'",
+    "start": {
+      "column": 0,
+      "line": 40
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 26,
+      "line": 41
+    },
+    "message": "A11y: Non-interactive element <output> cannot have interactive role 'treegrid'",
+    "start": {
+      "column": 0,
+      "line": 41
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 25,
+      "line": 42
+    },
+    "message": "A11y: Non-interactive element <p> cannot have interactive role 'columnheader'",
+    "start": {
+      "column": 0,
+      "line": 42
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 19,
+      "line": 43
+    },
+    "message": "A11y: Non-interactive element <pre> cannot have interactive role 'tree'",
+    "start": {
+      "column": 0,
+      "line": 43
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 61,
+      "line": 44
+    },
+    "message": "A11y: Non-interactive element <progress> cannot have interactive role 'combobox'",
+    "start": {
+      "column": 0,
+      "line": 44
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 23,
+      "line": 45
+    },
+    "message": "A11y: Non-interactive element <ruby> cannot have interactive role 'toolbar'",
+    "start": {
+      "column": 0,
+      "line": 45
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 56,
+      "line": 46
+    },
+    "message": "A11y: Non-interactive element <section> cannot have interactive role 'radio'",
+    "start": {
+      "column": 0,
+      "line": 46
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 21,
+      "line": 47
+    },
+    "message": "A11y: Non-interactive element <table> cannot have interactive role 'menu'",
+    "start": {
+      "column": 0,
+      "line": 47
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 26,
+      "line": 48
+    },
+    "message": "A11y: Non-interactive element <tbody> cannot have interactive role 'searchbox'",
+    "start": {
+      "column": 0,
+      "line": 48
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 20,
+      "line": 49
+    },
+    "message": "A11y: Non-interactive element <td> cannot have interactive role 'button'",
+    "start": {
+      "column": 0,
+      "line": 49
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 24,
+      "line": 50
+    },
+    "message": "A11y: Non-interactive element <tfoot> cannot have interactive role 'listbox'",
+    "start": {
+      "column": 0,
+      "line": 50
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 41,
+      "line": 51
+    },
+    "message": "A11y: Non-interactive element <thead> cannot have interactive role 'slider'",
+    "start": {
+      "column": 0,
+      "line": 51
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 28,
+      "line": 52
+    },
+    "message": "A11y: Non-interactive element <time> cannot have interactive role 'doc-backlink'",
+    "start": {
+      "column": 0,
+      "line": 52
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 24,
+      "line": 53
+    },
+    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'spinbutton'",
+    "start": {
+      "column": 0,
+      "line": 53
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 18,
+      "line": 57
+    },
+    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'menu'",
+    "start": {
+      "column": 0,
+      "line": 57
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 21,
+      "line": 58
+    },
+    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'menubar'",
+    "start": {
+      "column": 0,
+      "line": 58
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 24,
+      "line": 59
+    },
+    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'radiogroup'",
+    "start": {
+      "column": 0,
+      "line": 59
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 21,
+      "line": 60
+    },
+    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'tablist'",
+    "start": {
+      "column": 0,
+      "line": 60
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 18,
+      "line": 61
+    },
+    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'tree'",
+    "start": {
+      "column": 0,
+      "line": 61
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 22,
+      "line": 62
+    },
+    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'treegrid'",
+    "start": {
+      "column": 0,
+      "line": 62
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 18,
+      "line": 64
+    },
+    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'menu'",
+    "start": {
+      "column": 0,
+      "line": 64
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 21,
+      "line": 65
+    },
+    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'menubar'",
+    "start": {
+      "column": 0,
+      "line": 65
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 24,
+      "line": 66
+    },
+    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'radiogroup'",
+    "start": {
+      "column": 0,
+      "line": 66
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 21,
+      "line": 67
+    },
+    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'tablist'",
+    "start": {
+      "column": 0,
+      "line": 67
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 18,
+      "line": 68
+    },
+    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'tree'",
+    "start": {
+      "column": 0,
+      "line": 68
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 22,
+      "line": 69
+    },
+    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'treegrid'",
+    "start": {
+      "column": 0,
+      "line": 69
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 17,
+      "line": 71
+    },
+    "message": "A11y: Non-interactive element <li> cannot have interactive role 'tab'",
+    "start": {
+      "column": 0,
+      "line": 71
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 22,
+      "line": 72
+    },
+    "message": "A11y: Non-interactive element <li> cannot have interactive role 'menuitem'",
+    "start": {
+      "column": 0,
+      "line": 72
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 17,
+      "line": 73
+    },
+    "message": "A11y: Non-interactive element <li> cannot have interactive role 'row'",
+    "start": {
+      "column": 0,
+      "line": 73
+    }
+  },
+  {
+    "code": "a11y-no-noninteractive-element-to-interactive-role",
+    "end": {
+      "column": 44,
+      "line": 74
+    },
+    "message": "A11y: Non-interactive element <li> cannot have interactive role 'treeitem'",
+    "start": {
+      "column": 0,
+      "line": 74
+    }
+  }
+]
diff --git a/test/validator/samples/contenteditable-missing/errors.json b/test/validator/samples/contenteditable-missing/errors.json
index 23df8e6d83..b2e07f5b6a 100644
--- a/test/validator/samples/contenteditable-missing/errors.json
+++ b/test/validator/samples/contenteditable-missing/errors.json
@@ -1,6 +1,6 @@
 [{
 	"code": "missing-contenteditable-attribute",
-	"message": "'contenteditable' attribute is required for textContent and innerHTML two-way bindings",
+	"message": "'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings",
 	"start": {
 		"line": 4,
 		"column": 8