diff --git a/.changeset/late-seas-rule.md b/.changeset/late-seas-rule.md
new file mode 100644
index 000000000..bbba78956
--- /dev/null
+++ b/.changeset/late-seas-rule.md
@@ -0,0 +1,5 @@
+---
+'@lion/switch': patch
+---
+
+Update docs to use overview, use cases, reference
diff --git a/docs/components/interaction/switch/overview.md b/docs/components/interaction/switch/overview.md
index 1c5cb4034..682b4feae 100644
--- a/docs/components/interaction/switch/overview.md
+++ b/docs/components/interaction/switch/overview.md
@@ -1,23 +1,31 @@
# Interaction >> Switch >> Overview ||10
-A web component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. Switch is not a Checkbox in disguise and should not be used as part of a form.
+The Switch is used to toggle a property or feature on or off.
```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
import '@lion/switch/define-switch';
```
```js preview-story
-export const main = () => html` `;
+export const main = () => html``;
```
+## When to use
+
+- Toggling the component on or off has an immediate action (no confirmation by the user required).
+- The Switch is typically used in setting applications.
+- The Switch is not a Checkbox in disguise and can not be used as part of a form.
+
## Features
- Get or set the checked state (boolean) - `checked` boolean attribute
- Pre-select an option by setting the `checked` boolean attribute
- Get or set the value of the choice - `choiceValue()`
-## Installation
+## How to use
+
+### Installation
```bash
npm i --save @lion/switch
diff --git a/docs/components/interaction/switch/reference.md b/docs/components/interaction/switch/reference.md
new file mode 100644
index 000000000..3b1f671b0
--- /dev/null
+++ b/docs/components/interaction/switch/reference.md
@@ -0,0 +1,39 @@
+# Interaction >> Switch >> Reference ||30
+
+Everything you need to re-use the switch.
+
+## WAI-ARIA roles
+
+### Landmarks
+
+1. element: "button"
+ role: "switch"
+
+### Screen reader
+
+1. name: “Label”
+ role: switch
+ state: aria-checked=“true”
+ SR: “Label, on, switch"
+2. name: “Label”
+ role: switch
+ state: aria-checked=“false”
+ SR: “Label, off, switch”
+
+## Keyboard interactions
+
+| Key | Action |
+| :------------------ | :------------------------------------------------------------------------------------------------ |
+| Enter | On keyboard focus, pressing Enter changes the state of the switch to “On” or “Off”. |
+| Spacebar | On keyboard focus, pressing Spacebar changes the state of the switch to “On” or “Off”. |
+
+## Requirements
+
+This component fulfils the following requirements:
+
+1. The component clearly communicates what is it for.
+2. The component supports helper text.
+3. The component supports smart defaults.
+4. The component supports the following states: on, off, hover (Web only), focused, disabled, pressed and processing
+5. The transformation between ON and OFF states are enhanced by an animation.
+6. Toggling the switch (on <-> off) will execute the underlying action immediately.
diff --git a/docs/components/interaction/switch/features.md b/docs/components/interaction/switch/use-cases.md
similarity index 95%
rename from docs/components/interaction/switch/features.md
rename to docs/components/interaction/switch/use-cases.md
index 8f0ea02cc..b2e550741 100644
--- a/docs/components/interaction/switch/features.md
+++ b/docs/components/interaction/switch/use-cases.md
@@ -1,7 +1,7 @@
-# Interaction >> Switch >> Features ||20
+# Interaction >> Switch >> Use Cases ||20
```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
import { Validator } from '@lion/form-core';
import { LionSwitch } from '@lion/switch';
import '@lion/switch/define';
diff --git a/package.json b/package.json
index dd3b3a808..5c67bec67 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
"format": "npm run format:eslint && npm run format:prettier",
"format:eslint": "eslint --ext .js,.html . --fix",
"format:prettier": "prettier \"**/*.{js,md}\" \"packages/*/package.json\" \"package.json\" --write",
- "postinstall": "npm run custom-elements-manifest && patch-package",
+ "postinstall": "npm run custom-elements-manifest",
"lint": "run-p lint:*",
"lint:eclint": "git ls-files | xargs eclint check",
"lint:eslint": "eslint --ext .js,.html .",
@@ -49,9 +49,9 @@
"@open-wc/testing": "^3.0.0-next.1",
"@open-wc/testing-helpers": "^2.0.0-next.0",
"@rocket/blog": "^0.3.0",
- "@rocket/cli": "^0.6.2",
- "@rocket/launch": "^0.4.0",
- "@rocket/search": "^0.3.3",
+ "@rocket/cli": "^0.9.4",
+ "@rocket/launch": "^0.5.1",
+ "@rocket/search": "^0.4.0",
"@types/chai-dom": "^0.0.8",
"@types/convert-source-map": "^1.5.1",
"@types/fs-extra": "^9.0.7",
@@ -89,7 +89,6 @@
"mock-fs": "^4.10.1",
"npm-run-all": "^4.1.5",
"nyc": "^15.0.0",
- "patch-package": "^6.4.7",
"playwright": "^1.7.1",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.0.5",
diff --git a/packages/switch/docs/features.md b/packages/switch/docs/features.md
deleted file mode 100644
index b72859f75..000000000
--- a/packages/switch/docs/features.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Select Rich Features
-
-[=> See Source <=](../../../docs/components/interaction/switch/features.md)
diff --git a/packages/switch/docs/overview.md b/packages/switch/docs/overview.md
index 120b3e99d..f3ed0e2c8 100644
--- a/packages/switch/docs/overview.md
+++ b/packages/switch/docs/overview.md
@@ -1,3 +1,3 @@
-# Select Rich
+# Switch
[=> See Source <=](../../../docs/components/interaction/switch/overview.md)
diff --git a/packages/switch/docs/reference.md b/packages/switch/docs/reference.md
new file mode 100644
index 000000000..7269319ff
--- /dev/null
+++ b/packages/switch/docs/reference.md
@@ -0,0 +1,3 @@
+# Switch Reference
+
+[=> See Source <=](../../../docs/components/interaction/switch/reference.md)
diff --git a/packages/switch/docs/use-cases.md b/packages/switch/docs/use-cases.md
new file mode 100644
index 000000000..c80d20d1a
--- /dev/null
+++ b/packages/switch/docs/use-cases.md
@@ -0,0 +1,3 @@
+# Switch Use Cases
+
+[=> See Source <=](../../../docs/components/interaction/switch/use-cases.md)
diff --git a/patches/@mdjs+mdjs-preview+0.4.2.patch b/patches/@mdjs+mdjs-preview+0.4.2.patch
deleted file mode 100644
index 56f67885e..000000000
--- a/patches/@mdjs+mdjs-preview+0.4.2.patch
+++ /dev/null
@@ -1,10 +0,0 @@
-diff --git a/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js b/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js
-index 59b0a83..1f2e66a 100644
---- a/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js
-+++ b/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js
-@@ -1,4 +1,4 @@
--import { LitElement, html, css } from 'lit-element';
-+import { LitElement, html, css } from 'lit';
- import '@lion/accordion/define';
-
- import {
diff --git a/patches/@rocket+cli+0.6.3.patch b/patches/@rocket+cli+0.6.3.patch
deleted file mode 100644
index f17161880..000000000
--- a/patches/@rocket+cli+0.6.3.patch
+++ /dev/null
@@ -1,13 +0,0 @@
-diff --git a/node_modules/@rocket/cli/preset/_includes/layout-simulator.njk b/node_modules/@rocket/cli/preset/_includes/layout-simulator.njk
-index e8a48ba..c0916fe 100644
---- a/node_modules/@rocket/cli/preset/_includes/layout-simulator.njk
-+++ b/node_modules/@rocket/cli/preset/_includes/layout-simulator.njk
-@@ -11,7 +11,7 @@
- }
-
-