diff --git a/addons/docs/src/frameworks/web-components/custom-elements.ts b/addons/docs/src/frameworks/web-components/custom-elements.ts
index b311dd0d1606..701bfb866bac 100644
--- a/addons/docs/src/frameworks/web-components/custom-elements.ts
+++ b/addons/docs/src/frameworks/web-components/custom-elements.ts
@@ -4,9 +4,10 @@ import { logger } from '@storybook/client-logger';
 
 interface TagItem {
   name: string;
-  type: string;
+  type: { text: string };
   description: string;
   default?: any;
+  kind?: string;
   defaultValue?: any;
 }
 
@@ -17,6 +18,7 @@ interface Tag {
   properties?: TagItem[];
   events?: TagItem[];
   methods?: TagItem[];
+  members?: TagItem[];
   slots?: TagItem[];
   cssProperties?: TagItem[];
   cssParts?: TagItem[];
@@ -24,8 +26,17 @@ interface Tag {
 
 interface CustomElements {
   tags: Tag[];
+  modules?: [];
 }
 
+interface Module {
+  declarations?: [];
+  exports?: [];
+}
+
+interface Declaration {
+  tagName: string;
+}
 interface Sections {
   attributes?: any;
   properties?: any;
@@ -38,25 +49,32 @@ interface Sections {
 function mapData(data: TagItem[], category: string) {
   return (
     data &&
-    data.reduce((acc, item) => {
-      const type = category === 'properties' ? { name: item.type } : { name: 'void' };
-      acc[item.name] = {
-        name: item.name,
-        required: false,
-        description: item.description,
-        type,
-        table: {
-          category,
-          type: { summary: item.type },
-          defaultValue: { summary: item.default !== undefined ? item.default : item.defaultValue },
-        },
-      };
-      return acc;
-    }, {} as ArgTypes)
+    data
+      .filter((item) => !!item)
+      .reduce((acc, item) => {
+        if (item.kind === 'method') return acc;
+
+        const type =
+          category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
+        acc[item.name] = {
+          name: item.name,
+          required: false,
+          description: item.description,
+          type,
+          table: {
+            category,
+            type: { summary: item.type?.text || item.type },
+            defaultValue: {
+              summary: item.default !== undefined ? item.default : item.defaultValue,
+            },
+          },
+        };
+        return acc;
+      }, {} as ArgTypes)
   );
 }
 
-const getMetaData = (tagName: string, customElements: CustomElements) => {
+const getMetaDataExperimental = (tagName: string, customElements: CustomElements) => {
   if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;
   }
@@ -69,14 +87,34 @@ const getMetaData = (tagName: string, customElements: CustomElements) => {
   return metaData;
 };
 
+const getMetaDataV1 = (tagName: string, customElements: CustomElements) => {
+  if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
+    return null;
+  }
+
+  let metadata;
+  customElements?.modules?.forEach((_module: Module) => {
+    _module?.declarations?.forEach((declaration: Declaration) => {
+      if (declaration.tagName === tagName) {
+        metadata = declaration;
+      }
+    });
+  });
+
+  if (!metadata) {
+    logger.warn(`Component not found in custom-elements.json: ${tagName}`);
+  }
+  return metadata;
+};
+
 export const extractArgTypesFromElements = (tagName: string, customElements: CustomElements) => {
   const metaData = getMetaData(tagName, customElements);
   return (
     metaData && {
       ...mapData(metaData.attributes, 'attributes'),
+      ...mapData(metaData.members, 'properties'),
       ...mapData(metaData.properties, 'properties'),
       ...mapData(metaData.events, 'events'),
-      ...mapData(metaData.methods, 'methods'),
       ...mapData(metaData.slots, 'slots'),
       ...mapData(metaData.cssProperties, 'css custom properties'),
       ...mapData(metaData.cssParts, 'css shadow parts'),
@@ -84,8 +122,16 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   );
 };
 
+const getMetaData = (tagName: string, manifest: any) => {
+  if (manifest.version === 'experimental') {
+    return getMetaDataExperimental(tagName, manifest);
+  }
+  return getMetaDataV1(tagName, manifest);
+};
+
 export const extractArgTypes = (tagName: string) => {
-  return extractArgTypesFromElements(tagName, getCustomElements());
+  const cem = getCustomElements();
+  return extractArgTypesFromElements(tagName, cem);
 };
 
 export const extractComponentDescription = (tagName: string) => {
diff --git a/addons/docs/web-components/README.md b/addons/docs/web-components/README.md
index 0f5cfb8c6410..f21537958441 100644
--- a/addons/docs/web-components/README.md
+++ b/addons/docs/web-components/README.md
@@ -12,10 +12,10 @@
 - Add to your `.storybook/preview.js`
 
   ```js
-  import { setCustomElements } from '@storybook/web-components';
+  import { setCustomElementsManifest } from '@storybook/web-components';
   import customElements from '../custom-elements.json';
 
-  setCustomElements(customElements);
+  setCustomElementsManifest(customElements);
   ```
 
 - Add to your story files
@@ -33,8 +33,12 @@ In order to get [Props tables](..docs/../../docs/props-tables.md) documentation
 
 You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
 
-Known analyzers that output `custom-elements.json`:
+Known analyzers that output `custom-elements.json` v1.0.0:
 
+- [@custom-elements-manifest/analyzer](https://github.com/open-wc/custom-elements-manifest)
+  - Supports Vanilla, LitElement, FASTElement, Stencil, Catalyst, Atomico
+
+Known analyzers that output older versions of `custom-elements.json`:
 - [web-component-analyzer](https://github.com/runem/web-component-analyzer)
   - Supports LitElement, Polymer, Vanilla, (Stencil)
 - [stenciljs](https://stenciljs.com/)
@@ -53,22 +57,51 @@ The file looks something like this:
 
 ```json
 {
-  "version": 2,
-  "tags": [
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
     {
-      "name": "demo-wc-card",
-      "properties": [
+      "kind": "javascript-module",
+      "path": "src/my-element.js",
+      "declarations": [
         {
-          "name": "header",
-          "type": "String",
-          "attribute": "header",
-          "description": "Shown at the top of the card",
-          "default": "Your Message"
+          "kind": "class",
+          "description": "",
+          "name": "MyElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled"
+            },
+            {
+              "kind": "method",
+              "name": "fire"
+            }
+          ],
+          "events": [
+            {
+              "name": "disabled-changed",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "my-element"
         }
       ],
-      "events": [],
-      "slots": [],
-      "cssProperties": []
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "my-element",
+          "declaration": {
+            "name": "MyElement",
+            "module": "src/my-element.js"
+          }
+        }
+      ]
     }
   ]
 }
diff --git a/app/web-components/src/client/customElements.ts b/app/web-components/src/client/customElements.ts
index 06ebc9b7859f..a72b94cbcef2 100644
--- a/app/web-components/src/client/customElements.ts
+++ b/app/web-components/src/client/customElements.ts
@@ -15,7 +15,11 @@ export function isValidMetaData(customElements: any) {
   if (!customElements) {
     return false;
   }
-  if (customElements.tags && Array.isArray(customElements.tags)) {
+
+  if (
+    (customElements.tags && Array.isArray(customElements.tags)) ||
+    (customElements.modules && Array.isArray(customElements.modules))
+  ) {
     return true;
   }
   throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
@@ -30,7 +34,12 @@ export function setCustomElements(customElements: any) {
   window.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;
 }
 
+export function setCustomElementsManifest(customElements: any) {
+  // @ts-ignore
+  window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;
+}
+
 export function getCustomElements() {
   // @ts-ignore
-  return window.__STORYBOOK_CUSTOM_ELEMENTS__;
+  return window.__STORYBOOK_CUSTOM_ELEMENTS__ || window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;
 }
diff --git a/app/web-components/src/client/index.ts b/app/web-components/src/client/index.ts
index c458e9e7bde7..d43a49b2fa31 100644
--- a/app/web-components/src/client/index.ts
+++ b/app/web-components/src/client/index.ts
@@ -16,6 +16,7 @@ export {
 export {
   getCustomElements,
   setCustomElements,
+  setCustomElementsManifest,
   isValidComponent,
   isValidMetaData,
 } from './customElements';
diff --git a/docs/essentials/auto-generated-controls/web-components.mdx b/docs/essentials/auto-generated-controls/web-components.mdx
index 3fce9f6d9d2d..fe7d59233220 100644
--- a/docs/essentials/auto-generated-controls/web-components.mdx
+++ b/docs/essentials/auto-generated-controls/web-components.mdx
@@ -12,10 +12,10 @@ Storybook uses this to auto-generate the `ArgTypes` for your component using you
 You'll need to register that in `.storybook/preview.js`:
 
 ```js
-import { setCustomElements } from '@storybook/web-components';
+import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 
-setCustomElements(customElements);
+setCustomElementsManifest(customElements);
 ```
 
-You can generate a `custom-elements.json` using either [web-component-analyzer](https://github.com/runem/web-component-analyzer) or [stenciljs](https://stenciljs.com/) (if you're using Stencil).
+You can generate a `custom-elements.json` using [@custom-elements-manifest/analyzer](https://github.com/open-wc/custom-elements-manifest). If you're using the pre-v1.0.0 version of `custom-elements.json` you can use either [web-component-analyzer](https://github.com/runem/web-component-analyzer) or [stenciljs](https://stenciljs.com/) (if you're using Stencil).
diff --git a/examples/web-components-kitchen-sink/.storybook/preview.js b/examples/web-components-kitchen-sink/.storybook/preview.js
index d1af18225079..21021825405d 100644
--- a/examples/web-components-kitchen-sink/.storybook/preview.js
+++ b/examples/web-components-kitchen-sink/.storybook/preview.js
@@ -1,8 +1,12 @@
-import { setCustomElements } from '@storybook/web-components';
+import { setCustomElementsManifest } from '@storybook/web-components';
 
-import customElements from '../custom-elements.json';
+import customElementsManifest from '../custom-elements.json';
 
-setCustomElements(customElements);
+setCustomElementsManifest(customElementsManifest);
+
+// TODO: Remove support of 0.x CustomElementManifest format in 7.0
+// import customElements from '../custom-elements-experimental.json';
+// setCustomElements(customElements);
 
 export const parameters = {
   a11y: {
diff --git a/examples/web-components-kitchen-sink/custom-elements-experimental.json b/examples/web-components-kitchen-sink/custom-elements-experimental.json
new file mode 100644
index 000000000000..19f98b4a4e8d
--- /dev/null
+++ b/examples/web-components-kitchen-sink/custom-elements-experimental.json
@@ -0,0 +1,95 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "demo-wc-card",
+      "path": "./demo-wc-card.js",
+      "description": "This is a container looking like a card with a back and front side you can switch",
+      "attributes": [
+        {
+          "name": "back-side",
+          "description": "Indicates that the back of the card is shown",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "header",
+          "description": "Header message",
+          "type": "string",
+          "default": "\"Your Message\""
+        },
+        {
+          "name": "rows",
+          "description": "Data rows",
+          "type": "object",
+          "default": "[]"
+        }
+      ],
+      "properties": [
+        {
+          "name": "backSide",
+          "attribute": "back-side",
+          "description": "Indicates that the back of the card is shown",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "header",
+          "attribute": "header",
+          "description": "Header message",
+          "type": "string",
+          "default": "\"Your Message\""
+        },
+        {
+          "name": "rows",
+          "attribute": "rows",
+          "description": "Data rows",
+          "type": "object",
+          "default": "[]"
+        }
+      ],
+      "events": [
+        {
+          "name": "side-changed",
+          "description": "Fires whenever it switches between front/back"
+        }
+      ],
+      "methods": [
+        {
+          "name": "testMethod",
+          "description": "Some web component frameworks like Stencil generate extra docs for methods. These are also displayed in the ArgsTable."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "This is an unnamed slot (the default slot)"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--demo-wc-card-header-font-size",
+          "description": "Header font size"
+        },
+        {
+          "name": "--demo-wc-card-front-color",
+          "description": "Font color for front"
+        },
+        {
+          "name": "--demo-wc-card-back-color",
+          "description": "Font color for back"
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "front",
+          "description": "Front of the card"
+        },
+        {
+          "name": "back",
+          "description": "Back of the card"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/web-components-kitchen-sink/custom-elements.json b/examples/web-components-kitchen-sink/custom-elements.json
index 19f98b4a4e8d..aaba478e95e5 100644
--- a/examples/web-components-kitchen-sink/custom-elements.json
+++ b/examples/web-components-kitchen-sink/custom-elements.json
@@ -1,95 +1,448 @@
 {
-  "version": "experimental",
-  "tags": [
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
     {
-      "name": "demo-wc-card",
-      "path": "./demo-wc-card.js",
-      "description": "This is a container looking like a card with a back and front side you can switch",
-      "attributes": [
+      "kind": "javascript-module",
+      "path": "demo-wc-card.js",
+      "declarations": [],
+      "exports": [
         {
-          "name": "back-side",
-          "description": "Indicates that the back of the card is shown",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "header",
-          "description": "Header message",
-          "type": "string",
-          "default": "\"Your Message\""
-        },
+          "kind": "custom-element-definition",
+          "name": "demo-wc-card",
+          "declaration": {
+            "name": "DemoWcCard",
+            "module": "/src/stories/misc/to-update/DemoWcCard.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/typings.d.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/sb-button.ts",
+      "declarations": [
         {
-          "name": "rows",
-          "description": "Data rows",
-          "type": "object",
-          "default": "[]"
+          "kind": "class",
+          "description": "",
+          "name": "SbButton",
+          "cssProperties": [
+            {
+              "description": "Controls the color of bar",
+              "name": "--sb-primary-color",
+              "default": "#1ea7fd"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "primary",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set button in primary mode",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "backgroundColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "default": "''",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "onClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "sb-button:click",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Custom event send when the button is clicked"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Label of the button",
+              "name": "label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Size of the button, can be \"small\", \"medium\" or \"large\"; default is \"medium\".",
+              "name": "size"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Color of the button's background",
+              "name": "backgroundColor"
+            },
+            {
+              "name": "label",
+              "fieldName": "label"
+            },
+            {
+              "name": "primary",
+              "fieldName": "primary"
+            },
+            {
+              "name": "size",
+              "fieldName": "size"
+            },
+            {
+              "name": "backgroundColor",
+              "fieldName": "backgroundColor"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "sb-button",
+          "summary": "This is a simple Storybook Button",
+          "customElement": true
         }
       ],
-      "properties": [
+      "exports": [
         {
-          "name": "backSide",
-          "attribute": "back-side",
-          "description": "Indicates that the back of the card is shown",
-          "type": "boolean",
-          "default": "false"
+          "kind": "js",
+          "name": "SbButton",
+          "declaration": {
+            "name": "SbButton",
+            "module": "src/components/sb-button.ts"
+          }
         },
         {
-          "name": "header",
-          "attribute": "header",
-          "description": "Header message",
-          "type": "string",
-          "default": "\"Your Message\""
-        },
-        {
-          "name": "rows",
-          "attribute": "rows",
-          "description": "Data rows",
-          "type": "object",
-          "default": "[]"
+          "kind": "custom-element-definition",
+          "name": "sb-button",
+          "declaration": {
+            "name": "SbButton",
+            "module": "src/components/sb-button.ts"
+          }
         }
-      ],
-      "events": [
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/sb-header.ts",
+      "declarations": [
         {
-          "name": "side-changed",
-          "description": "Fires whenever it switches between front/back"
+          "kind": "class",
+          "description": "",
+          "name": "SbHeader",
+          "members": [
+            {
+              "kind": "field",
+              "name": "user",
+              "type": {
+                "text": "{}"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "dispatchCustomEvent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "eventName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "logInOutButton",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Event send when user clicks on create account button",
+              "name": "sb-header:createAccount"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Event send when user clicks on login button",
+              "name": "sb-header:login"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Event send when user clicks on logout button",
+              "name": "sb-header:logout"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "Object"
+              },
+              "description": "User of the app",
+              "name": "user"
+            },
+            {
+              "name": "user",
+              "fieldName": "user"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "sb-header",
+          "summary": "This is a simple Storybook Header",
+          "customElement": true
         }
       ],
-      "methods": [
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbHeader",
+          "declaration": {
+            "name": "SbHeader",
+            "module": "src/components/sb-header.ts"
+          }
+        },
         {
-          "name": "testMethod",
-          "description": "Some web component frameworks like Stencil generate extra docs for methods. These are also displayed in the ArgsTable."
+          "kind": "custom-element-definition",
+          "name": "sb-header",
+          "declaration": {
+            "name": "SbHeader",
+            "module": "src/components/sb-header.ts"
+          }
         }
-      ],
-      "slots": [
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/sb-page.ts",
+      "declarations": [
         {
-          "name": "",
-          "description": "This is an unnamed slot (the default slot)"
+          "kind": "class",
+          "description": "",
+          "name": "SbPage",
+          "members": [
+            {
+              "kind": "field",
+              "name": "user",
+              "type": {
+                "text": "{}"
+              },
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "Object"
+              },
+              "description": "User of the app",
+              "name": "user"
+            },
+            {
+              "name": "user",
+              "fieldName": "user"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "sb-page",
+          "summary": "This is a simple Storybook Page",
+          "customElement": true
         }
       ],
-      "cssProperties": [
+      "exports": [
         {
-          "name": "--demo-wc-card-header-font-size",
-          "description": "Header font size"
+          "kind": "js",
+          "name": "SbPage",
+          "declaration": {
+            "name": "SbPage",
+            "module": "src/components/sb-page.ts"
+          }
         },
         {
-          "name": "--demo-wc-card-front-color",
-          "description": "Font color for front"
-        },
+          "kind": "custom-element-definition",
+          "name": "sb-page",
+          "declaration": {
+            "name": "SbPage",
+            "module": "src/components/sb-page.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/stories/misc/to-update/DemoWcCard.js",
+      "declarations": [
         {
-          "name": "--demo-wc-card-back-color",
-          "description": "Font color for back"
+          "kind": "class",
+          "description": "This is a container looking like a card with a back and front side you can switch",
+          "name": "DemoWcCard",
+          "cssProperties": [
+            {
+              "description": "Header font size",
+              "name": "--demo-wc-card-header-font-size"
+            },
+            {
+              "description": "Font color for front",
+              "name": "--demo-wc-card-front-color"
+            },
+            {
+              "description": "Font color for back",
+              "name": "--demo-wc-card-back-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Front of the card",
+              "name": "front"
+            },
+            {
+              "description": "Back of the card",
+              "name": "back"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is an unnamed slot (the default slot)",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "toggle"
+            },
+            {
+              "kind": "field",
+              "name": "backSide",
+              "privacy": "public",
+              "description": "Indicates that the back of the card is shown",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "header",
+              "privacy": "public",
+              "description": "Header message",
+              "default": "'Your Message'"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "privacy": "public",
+              "description": "Data rows",
+              "default": "[]"
+            }
+          ],
+          "events": [
+            {
+              "name": "side-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires whenever it switches between front/back"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "back-side",
+              "fieldName": "backSide"
+            },
+            {
+              "name": "header",
+              "fieldName": "header"
+            },
+            {
+              "name": "rows",
+              "fieldName": "rows"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "demo-wc-card",
+          "customElement": true
         }
       ],
-      "cssParts": [
+      "exports": [
         {
-          "name": "front",
-          "description": "Front of the card"
-        },
+          "kind": "js",
+          "name": "DemoWcCard",
+          "declaration": {
+            "name": "DemoWcCard",
+            "module": "src/stories/misc/to-update/DemoWcCard.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/stories/misc/to-update/demoWcCardStyle.css.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "demoWcCardStyle"
+        }
+      ],
+      "exports": [
         {
-          "name": "back",
-          "description": "Back of the card"
+          "kind": "js",
+          "name": "demoWcCardStyle",
+          "declaration": {
+            "name": "demoWcCardStyle",
+            "module": "src/stories/misc/to-update/demoWcCardStyle.css.js"
+          }
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/examples/web-components-kitchen-sink/custom-elements.md b/examples/web-components-kitchen-sink/custom-elements.md
deleted file mode 100644
index 5e68c8e88aa1..000000000000
--- a/examples/web-components-kitchen-sink/custom-elements.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# demo-wc-card
-
-This is a container looking like a card with a back and front side you can switch
-
-## Properties
-
-| Property   | Attribute   | Type      | Default        | Description                                  |
-|------------|-------------|-----------|----------------|----------------------------------------------|
-| `backSide` | `back-side` | `boolean` | false          | Indicates that the back of the card is shown |
-| `header`   | `header`    | `string`  | "Your Message" | Header message                               |
-| `rows`     | `rows`      | `object`  | []             | Data rows                                    |
-
-## Methods
-
-| Method   | Type       |
-|----------|------------|
-| `toggle` | `(): void` |
-
-## Events
-
-| Event          | Description                                   |
-|----------------|-----------------------------------------------|
-| `side-changed` | Fires whenever it switches between front/back |
-
-## Slots
-
-| Name | Description                                |
-|------|--------------------------------------------|
-|      | This is an unnamed slot (the default slot) |
-
-## CSS Shadow Parts
-
-| Part    | Description       |
-|---------|-------------------|
-| `back`  | Back of the card  |
-| `front` | Front of the card |
-
-## CSS Custom Properties
-
-| Property                          | Description          |
-|-----------------------------------|----------------------|
-| `--demo-wc-card-back-color`       | Font color for back  |
-| `--demo-wc-card-front-color`      | Font color for front |
-| `--demo-wc-card-header-font-size` | Header font size     |
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index 50ac60a10105..5c3713cb537d 100644
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@@ -9,7 +9,8 @@
   "main": "index.js",
   "scripts": {
     "build-storybook": "build-storybook",
-    "storybook": "start-storybook -p 9006"
+    "storybook": "start-storybook -p 9006",
+    "generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\""
   },
   "resolutions": {
     "@storybook/addon-a11y": "portal:../../addons/a11y",
@@ -47,26 +48,30 @@
     "@storybook/source-loader": "portal:../../lib/source-loader",
     "@storybook/theming": "portal:../../lib/theming",
     "@storybook/ui": "portal:../../lib/ui",
-    "@storybook/web-components": "portal:../../app/web-components"
+    "@storybook/web-components": "portal:../../app/web-components",
+    "typescript": "4.2.4"
   },
   "dependencies": {
     "lit": "^2.0.0-rc.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-alpha.7",
-    "@storybook/addon-actions": "6.4.0-alpha.7",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.7",
-    "@storybook/addon-controls": "6.4.0-alpha.7",
-    "@storybook/addon-docs": "6.4.0-alpha.7",
-    "@storybook/addon-jest": "6.4.0-alpha.7",
-    "@storybook/addon-links": "6.4.0-alpha.7",
-    "@storybook/addon-storyshots": "6.4.0-alpha.7",
-    "@storybook/addon-storysource": "6.4.0-alpha.7",
-    "@storybook/addon-viewport": "6.4.0-alpha.7",
-    "@storybook/web-components": "6.4.0-alpha.7",
+    "@custom-elements-manifest/analyzer": "^0.3.11",
+    "@storybook/addon-a11y": "*",
+    "@storybook/addon-actions": "*",
+    "@storybook/addon-backgrounds": "*",
+    "@storybook/addon-controls": "*",
+    "@storybook/addon-docs": "*",
+    "@storybook/addon-jest": "*",
+    "@storybook/addon-links": "*",
+    "@storybook/addon-storyshots": "*",
+    "@storybook/addon-storysource": "*",
+    "@storybook/addon-viewport": "*",
+    "@storybook/web-components": "*",
     "global": "^4.4.0",
-    "jest": "^27.0.1"
+    "jest": "^27.0.1",
+    "typescript": "4.2.4"
   },
+  "customElements": "custom-elements.json",
   "storybook": {
     "chromatic": {
       "projectToken": "npm5gsofwkf"
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
index 983bec463615..487ab8f23c74 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
@@ -5,6 +5,8 @@ import { SbButton } from './sb-button';
 
 export default {
   title: 'Example/Button',
+  // Need to set the tag to make addon-docs works properly with CustomElementsManifest
+  component: 'sb-button',
   argTypes: {
     onClick: { action: 'onClick' },
   },
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.ts b/examples/web-components-kitchen-sink/src/components/sb-button.ts
index 0f0ef641a4fc..1a81bf443132 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.ts
@@ -2,6 +2,21 @@ import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+/**
+ * @attr {string} label - Label of the button
+ * @attr {string} size - Size of the button, can be "small", "medium" or "large"; default is "medium".
+ * @attr {string} backgroundColor - Color of the button's background
+ *
+ * @cssprop [--sb-primary-color=#1ea7fd] - Controls the color of bar
+ *
+ * @prop {boolean} primary - Set button in primary mode
+ *
+ * @event {CustomEvent} sb-button:click - Custom event send when the button is clicked
+ *
+ * @summary This is a simple Storybook Button
+ *
+ * @tag sb-button
+ */
 @customElement('sb-button')
 export class SbButton extends LitElement {
   static get styles() {
@@ -17,7 +32,7 @@ export class SbButton extends LitElement {
       }
       .storybook-button--primary {
         color: white;
-        background-color: #1ea7fd;
+        background-color: var(--sb-primary-color, #1ea7fd);
       }
       .storybook-button--secondary {
         color: #333;
diff --git a/examples/web-components-kitchen-sink/src/components/sb-header.stories.ts b/examples/web-components-kitchen-sink/src/components/sb-header.stories.ts
index 35bf4d15b805..02240685746c 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-header.stories.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-header.stories.ts
@@ -6,6 +6,7 @@ import type { SbHeader } from './sb-header';
 
 export default {
   title: 'Example/Header',
+  component: 'sb-header',
 } as Meta;
 
 const Template: Story<SbHeader> = ({ user }) => html`<sb-header .user="${user}"></sb-header>`;
diff --git a/examples/web-components-kitchen-sink/src/components/sb-header.ts b/examples/web-components-kitchen-sink/src/components/sb-header.ts
index 8d54e3ea99d6..f151d033ee9b 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-header.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-header.ts
@@ -3,6 +3,17 @@ import { customElement } from 'lit/decorators.js';
 
 import './sb-button';
 
+/**
+ * @attr {Object} user - User of the app
+ *
+ * @event {CustomEvent} sb-header:createAccount - Event send when user clicks on create account button
+ * @event {CustomEvent} sb-header:login - Event send when user clicks on login button
+ * @event {CustomEvent} sb-header:logout - Event send when user clicks on logout button
+ *
+ * @summary This is a simple Storybook Header
+ *
+ * @tag sb-header
+ */
 @customElement('sb-header')
 export class SbHeader extends LitElement {
   static get styles() {
diff --git a/examples/web-components-kitchen-sink/src/components/sb-page.stories.ts b/examples/web-components-kitchen-sink/src/components/sb-page.stories.ts
index 663fb4b4b03d..f6168d3d8647 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-page.stories.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-page.stories.ts
@@ -8,6 +8,7 @@ import type { SbPage } from './sb-page';
 
 export default {
   title: 'Example/Page',
+  component: 'sb-page',
 } as Meta;
 
 const Template: Story<SbPage> = ({ user }) => html`<sb-page .user="${user}"></sb-page>`;
diff --git a/examples/web-components-kitchen-sink/src/components/sb-page.ts b/examples/web-components-kitchen-sink/src/components/sb-page.ts
index 2a3c58b12ae9..159e4a3b8105 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-page.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-page.ts
@@ -3,6 +3,13 @@ import { customElement } from 'lit/decorators.js';
 
 import './sb-header';
 
+/**
+ * @attr {Object} user - User of the app
+ *
+ * @summary This is a simple Storybook Page
+ *
+ * @tag sb-page
+ */
 @customElement('sb-page')
 export class SbPage extends LitElement {
   static get styles() {
diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock
index 08baefb57c56..9159d6c7b784 100644
--- a/examples/web-components-kitchen-sink/yarn.lock
+++ b/examples/web-components-kitchen-sink/yarn.lock
@@ -1510,6 +1510,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@custom-elements-manifest/analyzer@npm:^0.3.11":
+  version: 0.3.11
+  resolution: "@custom-elements-manifest/analyzer@npm:0.3.11"
+  dependencies:
+    "@web/config-loader": ^0.1.3
+    chokidar: ^3.5.2
+    command-line-args: ^5.1.1
+    comment-parser: ^1.1.5
+    custom-elements-manifest: ^1.0.0
+    debounce: ^1.2.1
+    globby: ^11.0.1
+    typescript: ^4.3.2
+  bin:
+    cem: index.js
+    custom-elements-manifest: index.js
+  checksum: f943f56e7da2a9e9059b368248183703ae7693a43955546c4ad9f0e571924e82e08271d1fc4ad684ea307a642cd7be0f0cc419002f648f101d20ab61419ca33b
+  languageName: node
+  linkType: hard
+
 "@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
@@ -2065,14 +2084,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/channels": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     axe-core: ^4.2.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -2096,12 +2115,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -2128,12 +2147,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -2155,12 +2174,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/node-logger": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/node-logger": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     core-js: ^3.8.2
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -2187,19 +2206,20 @@ __metadata:
     "@mdx-js/loader": ^1.6.22
     "@mdx-js/mdx": ^1.6.22
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/builder-webpack4": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/core": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/builder-webpack4": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/core": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
     "@storybook/csf": 0.0.1
-    "@storybook/node-logger": 6.3.0-beta.12
-    "@storybook/postinstall": 6.3.0-beta.12
-    "@storybook/source-loader": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/csf-tools": 6.4.0-alpha.7
+    "@storybook/node-logger": 6.4.0-alpha.7
+    "@storybook/postinstall": 6.4.0-alpha.7
+    "@storybook/source-loader": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     acorn: ^7.4.1
     acorn-jsx: ^5.3.1
     acorn-walk: ^7.2.0
@@ -2222,10 +2242,10 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    "@storybook/angular": 6.3.0-beta.12
-    "@storybook/vue": 6.3.0-beta.12
-    "@storybook/vue3": 6.3.0-beta.12
-    "@storybook/web-components": 6.3.0-beta.12
+    "@storybook/angular": 6.4.0-alpha.7
+    "@storybook/vue": 6.4.0-alpha.7
+    "@storybook/vue3": 6.4.0-alpha.7
+    "@storybook/web-components": 6.4.0-alpha.7
     lit: ^2.0.0-rc.1
     lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
@@ -2292,11 +2312,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.3.0-beta.12
+    "@storybook/router": 6.4.0-alpha.7
     "@types/qs": ^6.9.5
     core-js: ^3.8.2
     global: ^4.4.0
@@ -2320,10 +2340,10 @@ __metadata:
   resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@jest/transform": ^26.6.2
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/core": 6.3.0-beta.12
-    "@storybook/core-common": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/core": 6.4.0-alpha.7
+    "@storybook/core-common": 6.4.0-alpha.7
     "@types/glob": ^7.1.3
     "@types/jest": ^26.0.16
     "@types/jest-specific-snapshot": ^0.5.3
@@ -2393,13 +2413,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/router": 6.3.0-beta.12
-    "@storybook/source-loader": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/source-loader": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     core-js: ^3.8.2
     estraverse: ^5.2.0
     loader-utils: ^2.0.0
@@ -2422,12 +2442,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -2448,12 +2468,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/channels": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
-    "@storybook/router": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
@@ -2468,13 +2488,13 @@ __metadata:
   resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/channels": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
+    "@storybook/channels": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.3.0-beta.12
+    "@storybook/router": 6.4.0-alpha.7
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/theming": 6.4.0-alpha.7
     "@types/reach__router": ^1.3.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -2518,20 +2538,20 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/channel-postmessage": 6.3.0-beta.12
-    "@storybook/channels": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/core-common": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
-    "@storybook/node-logger": 6.3.0-beta.12
-    "@storybook/router": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/channel-postmessage": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/core-common": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/node-logger": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.7
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.3.0-beta.12
-    "@storybook/ui": 6.3.0-beta.12
+    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/ui": 6.4.0-alpha.7
     "@types/node": ^14.0.10
     "@types/webpack": ^4.41.26
     autoprefixer: ^9.8.6
@@ -2551,7 +2571,7 @@ __metadata:
     global: ^4.4.0
     html-webpack-plugin: ^4.0.0
     pnp-webpack-plugin: 1.6.4
-    postcss: ^7.0.35
+    postcss: ^7.0.36
     postcss-flexbugs-fixes: ^4.2.1
     postcss-loader: ^4.2.0
     raw-loader: ^4.0.2
@@ -2580,9 +2600,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/channels": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
+    "@storybook/channels": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
@@ -2604,11 +2624,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/channel-postmessage": 6.3.0-beta.12
-    "@storybook/channels": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/channel-postmessage": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
     "@storybook/csf": 0.0.1
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
@@ -2642,9 +2662,9 @@ __metadata:
   resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 6.3.0-beta.12
+    "@storybook/client-logger": 6.4.0-alpha.7
     "@storybook/csf": 0.0.1
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/theming": 6.4.0-alpha.7
     "@types/color-convert": ^2.0.0
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
@@ -2675,13 +2695,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/channel-postmessage": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/channel-postmessage": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
     "@storybook/csf": 0.0.1
-    "@storybook/ui": 6.3.0-beta.12
+    "@storybook/ui": 6.4.0-alpha.7
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -2727,7 +2747,7 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.3.0-beta.12
+    "@storybook/node-logger": 6.4.0-alpha.7
     "@storybook/semver": ^7.3.2
     "@types/glob-base": ^0.3.0
     "@types/micromatch": ^4.0.1
@@ -2775,12 +2795,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/builder-webpack4": 6.3.0-beta.12
-    "@storybook/core-client": 6.3.0-beta.12
-    "@storybook/core-common": 6.3.0-beta.12
-    "@storybook/csf-tools": 6.3.0-beta.12
-    "@storybook/manager-webpack4": 6.3.0-beta.12
-    "@storybook/node-logger": 6.3.0-beta.12
+    "@storybook/builder-webpack4": 6.4.0-alpha.7
+    "@storybook/core-client": 6.4.0-alpha.7
+    "@storybook/core-common": 6.4.0-alpha.7
+    "@storybook/csf-tools": 6.4.0-alpha.7
+    "@storybook/manager-webpack4": 6.4.0-alpha.7
+    "@storybook/node-logger": 6.4.0-alpha.7
     "@storybook/semver": ^7.3.2
     "@types/node": ^14.0.10
     "@types/node-fetch": ^2.5.7
@@ -2809,8 +2829,8 @@ __metadata:
     util-deprecate: ^1.0.2
     webpack: 4
   peerDependencies:
-    "@storybook/builder-webpack5": 6.3.0-beta.12
-    "@storybook/manager-webpack5": 6.3.0-beta.12
+    "@storybook/builder-webpack5": 6.4.0-alpha.7
+    "@storybook/manager-webpack5": 6.4.0-alpha.7
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -2827,10 +2847,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/core-client": 6.3.0-beta.12
-    "@storybook/core-server": 6.3.0-beta.12
+    "@storybook/core-client": 6.4.0-alpha.7
+    "@storybook/core-server": 6.4.0-alpha.7
   peerDependencies:
-    "@storybook/builder-webpack5": 6.3.0-beta.12
+    "@storybook/builder-webpack5": 6.4.0-alpha.7
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -2847,11 +2867,18 @@ __metadata:
   dependencies:
     "@babel/generator": ^7.12.11
     "@babel/parser": ^7.12.11
+    "@babel/plugin-transform-react-jsx": ^7.12.12
+    "@babel/preset-env": ^7.12.11
     "@babel/traverse": ^7.12.11
     "@babel/types": ^7.12.11
+    "@mdx-js/mdx": ^1.6.22
     "@storybook/csf": ^0.0.1
     core-js: ^3.8.2
     fs-extra: ^9.0.1
+    global: ^4.4.0
+    js-string-escape: ^1.0.1
+    lodash: ^4.17.20
+    prettier: ~2.2.1
     regenerator-runtime: ^0.13.7
   languageName: node
   linkType: soft
@@ -2872,12 +2899,12 @@ __metadata:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/core-client": 6.3.0-beta.12
-    "@storybook/core-common": 6.3.0-beta.12
-    "@storybook/node-logger": 6.3.0-beta.12
-    "@storybook/theming": 6.3.0-beta.12
-    "@storybook/ui": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/core-client": 6.4.0-alpha.7
+    "@storybook/core-common": 6.4.0-alpha.7
+    "@storybook/node-logger": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/ui": 6.4.0-alpha.7
     "@types/node": ^14.0.10
     "@types/webpack": ^4.41.26
     babel-loader: ^8.2.2
@@ -2940,7 +2967,7 @@ __metadata:
   resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/client-logger": 6.3.0-beta.12
+    "@storybook/client-logger": 6.4.0-alpha.7
     "@types/reach__router": ^1.3.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -2971,8 +2998,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
     "@storybook/csf": 0.0.1
     core-js: ^3.8.2
     estraverse: ^5.2.0
@@ -2994,7 +3021,7 @@ __metadata:
     "@emotion/core": ^10.1.1
     "@emotion/is-prop-valid": ^0.8.6
     "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.3.0-beta.12
+    "@storybook/client-logger": 6.4.0-alpha.7
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
     emotion-theming: ^10.0.27
@@ -3014,15 +3041,15 @@ __metadata:
   resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@emotion/core": ^10.1.1
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/api": 6.3.0-beta.12
-    "@storybook/channels": 6.3.0-beta.12
-    "@storybook/client-logger": 6.3.0-beta.12
-    "@storybook/components": 6.3.0-beta.12
-    "@storybook/core-events": 6.3.0-beta.12
-    "@storybook/router": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/components": 6.4.0-alpha.7
+    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.7
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.3.0-beta.12
+    "@storybook/theming": 6.4.0-alpha.7
     "@types/markdown-to-jsx": ^6.11.3
     copy-to-clipboard: ^3.3.1
     core-js: ^3.8.2
@@ -3055,10 +3082,10 @@ __metadata:
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/preset-env": ^7.12.11
-    "@storybook/addons": 6.3.0-beta.12
-    "@storybook/client-api": 6.3.0-beta.12
-    "@storybook/core": 6.3.0-beta.12
-    "@storybook/core-common": 6.3.0-beta.12
+    "@storybook/addons": 6.4.0-alpha.7
+    "@storybook/client-api": 6.4.0-alpha.7
+    "@storybook/core": 6.4.0-alpha.7
+    "@storybook/core-common": 6.4.0-alpha.7
     "@types/webpack-env": ^1.16.0
     babel-plugin-bundled-import-meta: ^0.3.1
     core-js: ^3.8.2
@@ -3506,6 +3533,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@web/config-loader@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@web/config-loader@npm:0.1.3"
+  dependencies:
+    semver: ^7.3.4
+  checksum: 165376a525f2690b6266229d4e4f82a3e877ed1aaaea0b1131081d10650704f37d5dbdb5c959c4efcf3f4f91ccf97dcdc2b99df233d21317ee25ed7e00afacc6
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/ast@npm:1.9.0"
@@ -3978,7 +4014,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.1":
+"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.1, anymatch@npm:~3.1.2":
   version: 3.1.2
   resolution: "anymatch@npm:3.1.2"
   dependencies:
@@ -4042,6 +4078,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-back@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "array-back@npm:3.1.0"
+  checksum: bb1fe86aa8b39c21e73c68c7abf8b05ed939b8951a3b17527217f6a2a84e00e4cfa4fdec823081689c5e216709bf1f214a4f5feeee6726eaff83897fa1a7b8ee
+  languageName: node
+  linkType: hard
+
 "array-flatten@npm:1.1.1":
   version: 1.1.1
   resolution: "array-flatten@npm:1.1.1"
@@ -5057,6 +5100,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "chokidar@npm:3.5.2"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: e7179a9dc4ce54c1ba660652319039b7ca0817a442dd05a45afcbdefcd4848b4276debfa9cf321798c2c567c6289da14dd48d9a1ee92056a7b526c554cffe129
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -5298,6 +5360,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"command-line-args@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "command-line-args@npm:5.1.1"
+  dependencies:
+    array-back: ^3.0.1
+    find-replace: ^3.0.0
+    lodash.camelcase: ^4.3.0
+    typical: ^4.0.0
+  checksum: 6f075697d046779ae7075f4cf138cb540877fb1f94a1d59d3f87035a231c2e103b19017412d36d903a8caf70fd1d0fc6f07a547178dded800eb2735607a70a89
+  languageName: node
+  linkType: hard
+
 "commander@npm:^2.20.0":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
@@ -5319,6 +5393,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comment-parser@npm:^1.1.5":
+  version: 1.1.5
+  resolution: "comment-parser@npm:1.1.5"
+  checksum: a8a32d8d160056d5393bee7aca3aee8e319505f87d56eaaafd8f0b2cfc7a83cc6487ac6e2333102d3d1094123eb430edd2e3b88666ad28671311b40e40be0ba6
+  languageName: node
+  linkType: hard
+
 "commondir@npm:^1.0.1":
   version: 1.0.1
   resolution: "commondir@npm:1.0.1"
@@ -5740,6 +5821,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"custom-elements-manifest@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "custom-elements-manifest@npm:1.0.0"
+  checksum: 6e8e4dcc6ae4f846e92b6ec0ef5c8d155889dae6df7210cbf3e9c47387ffab83fce8fde96a1aaa9766304cb08afa17198da4ef8560745311bdf3ba280fc77b40
+  languageName: node
+  linkType: hard
+
 "cyclist@npm:^1.0.1":
   version: 1.0.1
   resolution: "cyclist@npm:1.0.1"
@@ -5758,6 +5846,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debounce@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "debounce@npm:1.2.1"
+  checksum: 6c9320aa0973fc42050814621a7a8a78146c1975799b5b3cc1becf1f77ba9a5aa583987884230da0842a03f385def452fad5d60db97c3d1c8b824e38a8edf500
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -6877,6 +6972,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-replace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "find-replace@npm:3.0.0"
+  dependencies:
+    array-back: ^3.0.1
+  checksum: fcd1bf7960388c8193c2861bcdc760c18ac14edb4bde062a961915d9a25727b2e8aabf0229e90cc09c753fd557e5a3e5ae61e49cadbe727be89a9e8e49ce7668
+  languageName: node
+  linkType: hard
+
 "find-root@npm:^1.1.0":
   version: 1.1.0
   resolution: "find-root@npm:1.1.0"
@@ -7087,7 +7191,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"fsevents@^2.1.2, fsevents@^2.3.2, fsevents@~2.3.1":
+"fsevents@^2.1.2, fsevents@^2.3.2, fsevents@~2.3.1, fsevents@~2.3.2":
   version: 2.3.2
   resolution: "fsevents@npm:2.3.2"
   dependencies:
@@ -7106,7 +7210,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^2.1.2#builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.1#builtin<compat/fsevents>":
+"fsevents@patch:fsevents@^2.1.2#builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.1#builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#builtin<compat/fsevents>":
   version: 2.3.2
   resolution: "fsevents@patch:fsevents@npm%3A2.3.2#builtin<compat/fsevents>::version=2.3.2&hash=11e9ea"
   dependencies:
@@ -7257,7 +7361,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.1.0, glob-parent@npm:~5.1.0":
+"glob-parent@npm:^5.1.0, glob-parent@npm:~5.1.0, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -7358,6 +7462,20 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"globby@npm:^11.0.1":
+  version: 11.0.4
+  resolution: "globby@npm:11.0.4"
+  dependencies:
+    array-union: ^2.1.0
+    dir-glob: ^3.0.1
+    fast-glob: ^3.1.1
+    ignore: ^5.1.4
+    merge2: ^1.3.0
+    slash: ^3.0.0
+  checksum: de5f828c834baf75e3bd3c629bb3a64d1dfa9965831d0b105b728f9184284c6ba2b0d42e24862b411abc18e6e0af12e60880b3a62e096752de3426f2839f9ef7
+  languageName: node
+  linkType: hard
+
 "globby@npm:^11.0.2":
   version: 11.0.3
   resolution: "globby@npm:11.0.3"
@@ -9625,6 +9743,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"lodash.camelcase@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "lodash.camelcase@npm:4.3.0"
+  checksum: fcba15d21a458076dd309fce6b1b4bf611d84a0ec252cb92447c948c533ac250b95d2e00955801ebc367e5af5ed288b996d75d37d2035260a937008e14eaf432
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -11157,7 +11282,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.35, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
+"postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
   version: 7.0.35
   resolution: "postcss@npm:7.0.35"
   dependencies:
@@ -11168,6 +11293,17 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"postcss@npm:^7.0.36":
+  version: 7.0.36
+  resolution: "postcss@npm:7.0.36"
+  dependencies:
+    chalk: ^2.4.2
+    source-map: ^0.6.1
+    supports-color: ^6.1.0
+  checksum: 8e5dcaf9adf875a3ad9444227391979043958fc08f5a848a58bb716e41d1f7a1618cc3f884a7a19328d7ae341bbaa4f5a75063195dd43da168659688dffecbe1
+  languageName: node
+  linkType: hard
+
 "preact-render-to-string@npm:^5.1.19":
   version: 5.1.19
   resolution: "preact-render-to-string@npm:5.1.19"
@@ -11861,6 +11997,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"readdirp@npm:~3.6.0":
+  version: 3.6.0
+  resolution: "readdirp@npm:3.6.0"
+  dependencies:
+    picomatch: ^2.2.1
+  checksum: 6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b
+  languageName: node
+  linkType: hard
+
 "recursive-readdir@npm:2.2.2":
   version: 2.2.2
   resolution: "recursive-readdir@npm:2.2.2"
@@ -13546,6 +13691,33 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"typescript@npm:4.2.4":
+  version: 4.2.4
+  resolution: "typescript@npm:4.2.4"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: add3dcc8661784e2959d8411f6a2f1c75b063532aae0112bed4a217f58c0f6da194da6a05bc40dc1b2b171e5c595e88370d5fa97fdb680c47fbb8fab4190e02d
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A4.2.4#builtin<compat/typescript>":
+  version: 4.2.4
+  resolution: "typescript@patch:typescript@npm%3A4.2.4#builtin<compat/typescript>::version=4.2.4&hash=a45b0e"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 6d2dfac6fae7d3a64fd3b32ef8a5bc71574c3bc7e09e8769c2069359337cd69f0e0177222365400320aadc6be75556f9439ef6bd3c3eb4124a5e1b43f99002f6
+  languageName: node
+  linkType: hard
+
+"typical@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "typical@npm:4.0.0"
+  checksum: f300b198fb9fe743859b75ec761d53c382723dc178bbce4957d9cb754f2878a44ce17dc0b6a5156c52be1065449271f63754ba594dac225b80ce3aa39f9241ed
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.1":
   version: 1.0.1
   resolution: "unbox-primitive@npm:1.0.1"
@@ -14053,6 +14225,7 @@ fsevents@^1.2.7:
   version: 0.0.0-use.local
   resolution: "web-components-kitchen-sink@workspace:."
   dependencies:
+    "@custom-elements-manifest/analyzer": ^0.3.11
     "@storybook/addon-a11y": "*"
     "@storybook/addon-actions": "*"
     "@storybook/addon-backgrounds": "*"
@@ -14067,6 +14240,7 @@ fsevents@^1.2.7:
     global: ^4.4.0
     jest: ^27.0.1
     lit: ^2.0.0-rc.2
+    typescript: 4.2.4
   languageName: unknown
   linkType: soft