feat(lit): add lit package, setup eslint configs, initial render works

app/lit/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  rules: {
+    'import/extensions': 0,
+  },
+};

app/lit/README.md

@@ -0,0 +1,93 @@
+# Storybook for web-components
+
+---
+
+Storybook for web-components is a UI development environment for your plain web-component snippets.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-app
+npx -p @storybook/cli sb init -t web_components
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/docs/web-components/configure/storybook-addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/web-components/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
+
+# Setup page reload via HMR
+
+As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR.
+There are ideas on how to archive HMR with a static registry but there is no proven solution yet.
+
+Therefore the best approach for now is to do full page reloads.
+If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast.
+To activate full page reload
+
+```js
+// ==> REPLACE
+configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
+
+// ==> WITH
+// force full reload to not reregister web components
+const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
+configure(req, module);
+if (module.hot) {
+  module.hot.accept(req.id, () => {
+    const currentLocationHref = window.location.href;
+    window.history.pushState(null, null, currentLocationHref);
+    window.location.reload();
+  });
+}
+```
+
+# Setup es6/7 dependencies
+
+By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation".
+
+For example if you have a library called `my-library` which is in ES2017 then you can add it like so
+
+```js
+// .storybook/main.js
+
+module.exports = { 
+  webpackFinal: async config => {
+    // find web-components rule for extra transpilation
+    const webComponentsRule = config.module.rules.find(
+      rule => rule.use && rule.use.options && rule.use.options.babelrc === false
+    );
+    // add your own `my-library`
+    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
+
+    return config;
+  },
+};
+```
+
+By default the following folders are included
+
+- `src/*.js`
+- `packages/*/src/*.js`
+- `node_modules/lit-html/*.js`
+- `node_modules/lit-element/*.js`
+- `node_modules/@open-wc/*.js`
+- `node_modules/@polymer/*.js`
+- `node_modules/@vaadin/*.js`
+
+As you can see the `src` folder is also included.
+The reason for that is as it has some extra configuration to allow for example `import.meta`.
+If you use a different folder you will need to make sure webpack/babel can handle it.
+
+# FAQ
+
+- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry`
+  => please see <a href="#user-content-setup-page-reload-via-hmr">Setup page reload via HMR</a>

app/lit/bin/build.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/cjs/server/build');

app/lit/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/cjs/server');

app/lit/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@storybook/lit",
+  "version": "6.2.0-rc.6",
+  "description": "Storybook for lit: View web components snippets in isolation with Hot Reloading.",
+  "keywords": [
+    "lit-html",
+    "storybook",
+    "lit-element",
+    "web-components"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/lit",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "app/lit"
+  },
+  "license": "MIT",
+  "main": "dist/cjs/client/index.js",
+  "module": "dist/esm/client/index.js",
+  "types": "dist/ts3.9/client/index.d.ts",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "dist/ts3.4/*"
+      ]
+    }
+  },
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@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.2.0-rc.6",
+    "@storybook/client-api": "6.2.0-rc.6",
+    "@storybook/core": "6.2.0-rc.6",
+    "@storybook/core-common": "6.2.0-rc.6",
+    "@types/webpack-env": "^1.16.0",
+    "babel-plugin-bundled-import-meta": "^0.3.1",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0",
+    "lit": "^2.0.0-pre.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "read-pkg-up": "^7.0.1",
+    "regenerator-runtime": "^0.13.7",
+    "ts-dedent": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@babel/core": "*",
+    "babel-loader": "^7.0.0 || ^8.0.0",
+    "lit": "^2.0.0-pre.2"
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

app/lit/src/client/index.ts

@@ -0,0 +1,32 @@
+import { EventSource, window } from 'global';
+
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  raw,
+} from './preview';
+
+export * from './preview/types';
+
+// TODO: disable HMR and do full page loads because of customElements.define
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+  // forcing full reloads for customElements as elements can only be defined once per page
+  const hmr = new EventSource('__webpack_hmr');
+  hmr.addEventListener('message', function fullPageReload(event: { data: string }) {
+    try {
+      // Only care for built events.  Heartbeats are not parsable so we ignore those
+      const { action } = JSON.parse(event.data);
+      if (action === 'built') {
+        window.location.reload();
+      }
+    } catch (error) {
+      // Most part we only get here from the data in the server-sent event not being parsable which is ok
+    }
+  });
+}

app/lit/src/client/preview/globals.ts

@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'lit';

app/lit/src/client/preview/index.ts

@@ -0,0 +1,37 @@
+/* eslint-disable prefer-destructuring */
+import { start } from '@storybook/core/client';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+
+import './globals';
+import render from './render';
+import { StoryFnHtmlReturnType, IStorybookSection } from './types';
+
+const framework = 'lit';
+
+interface ClientApi extends ClientStoryApi<StoryFnHtmlReturnType> {
+  setAddon(addon: any): void;
+  configure(loader: Loadable, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+}
+
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const addDecorator: ClientApi['addDecorator'] = api.clientApi
+  .addDecorator as ClientApi['addDecorator'];
+export const addParameters: ClientApi['addParameters'] = api.clientApi
+  .addParameters as ClientApi['addParameters'];
+export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
+export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;

app/lit/src/client/preview/render.ts

@@ -0,0 +1,33 @@
+import { document, Node } from 'global';
+import dedent from 'ts-dedent';
+import { render } from 'lit';
+import { isTemplateResult } from 'lit/directive-helpers.js';
+// import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/client-api';
+import { RenderContext } from './types';
+
+const rootElement = document.getElementById('root');
+
+export default function renderMain({
+  storyFn,
+  kind,
+  name,
+  showMain,
+  showError,
+  forceRender,
+}: RenderContext) {
+  const element = storyFn();
+
+  showMain();
+
+  if (isTemplateResult(element)) {
+    render(element, rootElement);
+  } else {
+    showError({
+      title: `Expecting an lit template result from the story: "${name}" of "${kind}".`,
+      description: dedent`
+        Did you forget to return the lit template result from the story?
+        Use "() => html\`<your snippet or node>\`" or when defining the story.
+      `,
+    });
+  }
+}

app/lit/src/client/preview/types.ts

@@ -0,0 +1,21 @@
+import { TemplateResult, SVGTemplateResult } from 'lit';
+
+export type { RenderContext } from '@storybook/core';
+export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
+
+export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}

app/lit/src/server/build.ts

@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);

app/lit/src/server/framework-preset-lit.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Configuration } from 'webpack';
+
+export function webpack(config: Configuration) {
+  return config;
+}

app/lit/src/server/index.ts

@@ -0,0 +1,4 @@
+import { buildDev } from '@storybook/core/server';
+import options from './options';
+
+buildDev(options);

app/lit/src/server/options.ts

@@ -0,0 +1,8 @@
+import { sync } from 'read-pkg-up';
+import { LoadOptions } from '@storybook/core-common';
+
+export default {
+  packageJson: sync({ cwd: __dirname }).packageJson,
+  framework: 'lit',
+  frameworkPresets: [require.resolve('./framework-preset-lit')],
+} as LoadOptions;

app/lit/src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module 'global';
+
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;

app/lit/standalone.js

@@ -0,0 +1,8 @@
+const build = require('@storybook/core/standalone');
+const frameworkOptions = require('./dist/cjs/server/options').default;
+
+async function buildStandalone(options) {
+  return build(options, frameworkOptions);
+}
+
+module.exports = buildStandalone;

app/lit/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env", "node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
+}

app/lit/types-6-0.d.ts

@@ -0,0 +1 @@
+export * from './dist/ts3.9/client/preview/types-6-0.d';

examples/lit-kitchen-sink/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  rules: {
+    'import/extensions': [0],
+  },
+};

examples/lit-kitchen-sink/package.json

@@ -12,8 +12,7 @@
     "storybook": "start-storybook -p 9006"
   },
   "dependencies": {
-    "lit-element":"next-major",
-    "lit-html":"next-major"
+    "lit": "^2.0.0-pre.2"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "6.2.0-rc.6",
@@ -32,16 +31,11 @@
     "@storybook/client-api": "6.2.0-rc.6",
     "@storybook/core": "6.2.0-rc.6",
     "@storybook/core-events": "6.2.0-rc.6",
+    "@storybook/lit": "6.2.0-rc.6",
     "@storybook/source-loader": "6.2.0-rc.6",
-    "@storybook/web-components": "6.2.0-rc.6",
     "babel-loader": "^8.2.2",
     "eventemitter3": "^4.0.7",
     "format-json": "^1.0.3",
     "global": "^4.4.0"
-  },
-  "storybook": {
-    "chromatic": {
-      "projectToken": "npm5gsofwkf"
-    }
   }
 }

examples/lit-kitchen-sink/src/components/DemoButton.stories.ts

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { DemoButton } from './DemoButton';
 
 export default {
@@ -7,7 +7,7 @@ export default {
   argTypes: { onClick: { action: 'click ' } },
 };
 
-const Template = (args: any) => html`<demo-button ...=${args}></demo-button>`;
+const Template = (args: any) => html`<demo-button ${args}></demo-button>`;
 
 export const Default = Template.bind({});
 

examples/lit-kitchen-sink/src/components/DemoButton.ts

@@ -1,27 +1,51 @@
-import { LitElement, html, css, customElement, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 
+/**
+ * An example element.
+ *
+ * @slot - The content inside the button
+ * @csspart button - The button
+ */
 @customElement('demo-button')
 export class DemoButton extends LitElement {
   static get styles() {
     return css``;
   }
 
-  @property({ type: String, reflect: true })
   label = 'Click Me';
 
-  @property({ type: Boolean, reflect: true })
   primary = false;
 
-  @property({ type: String })
   value = '';
 
+  // TODO: currently decorators are not reflected https://github.com/Polymer/lit-html/issues/1476
+  static get properties() {
+    return {
+      label: { type: String, reflect: true },
+      primary: { type: Boolean },
+      value: { type: String },
+    };
+  }
+
   render() {
     return html`
       ${this.label && html`<label for="button">${this.label}</label>`}
-      <button id="button" class=${classMap({ primary: this.primary })} value="${this.value}">
+      <button
+        id="button"
+        part="button"
+        class=${classMap({ primary: this.primary })}
+        value="${this.value}"
+      >
         <slot></slot>
       </button>
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'demo-button': DemoButton;
+  }
+}

examples/lit-kitchen-sink/src/components/DogeCoin.stories.ts

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+import { DogeCoin } from './DogeCoin';
+
+export default {
+  component: DogeCoin,
+  title: 'Examples / Doge Coin',
+  argTypes: {
+    flip: {
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+    },
+  },
+};
+
+const Template = ({ flip }) => html`<doge-coin .flip=${flip}></doge-coin>`;
+
+export const Default = Template.bind({});

examples/lit-kitchen-sink/src/components/DogeCoin.ts

@@ -1,17 +1,46 @@
-import { LitElement, css, customElement, property } from 'lit-element';
+import { LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import DogeCoinImg from './dogecoin.svg';
 import DogeCoinAlt from './dogecoin-alt.svg';
 
 @customElement('doge-coin')
 export class DogeCoin extends LitElement {
   static get styles() {
-    return css``;
+    return css`
+      :host {
+        height: 10rem;
+        width: 10rem;
+        display: flex;
+      }
+      svg {
+        height: 100%;
+        width: 100%;
+      }
+    `;
+  }
+
+  // TODO: currently decorators are not reflected https://github.com/Polymer/lit-html/issues/1476
+  static get properties() {
+    return {
+      flip: { type: Boolean },
+    };
   }
 
-  @property({ type: Boolean, reflect: true })
   flip = false;
 
+  constructor() {
+    super();
+    // TODO: setup public directory to pull svgs from
+    console.log('import.meta', import.meta.url);
+  }
+
   render() {
     return this.flip ? DogeCoinImg : DogeCoinAlt;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'doge-coin': DogeCoin;
+  }
+}

examples/lit-kitchen-sink/src/components/dogecoin-alt.svg.ts

@@ -1,3 +1,3 @@
-import { svg } from 'lit-element';
+import { svg } from 'lit';
 
 export default svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" width="2500" height="2500"><g fill="#c2a633"><path d="M1024 659H881.12v281.69h224.79v117.94H881.12v281.67H1031c38.51 0 316.16 4.35 315.73-327.72S1077.44 659 1024 659z"/><path d="M1000 0C447.71 0 0 447.71 0 1000s447.71 1000 1000 1000 1000-447.71 1000-1000S1552.29 0 1000 0zm39.29 1540.1H677.14v-481.46H549.48V940.7h127.65V459.21h310.82c73.53 0 560.56-15.27 560.56 549.48 0 574.09-509.21 531.41-509.21 531.41z"/></g></svg>`;

examples/lit-kitchen-sink/tsconfig.json

@@ -4,7 +4,7 @@
     "module": "esnext",
     "strict": true,
     "moduleResolution": "node",
-    "experimentalDecorators": true,
+    "experimentalDecorators": true
   },
   "include": [
     "src/**/*"

lib/cli/src/versions.json

@@ -1,61 +1,62 @@
 {
-  "@storybook/addon-a11y": "6.2.0-rc.5",
-  "@storybook/addon-actions": "6.2.0-rc.5",
-  "@storybook/addon-backgrounds": "6.2.0-rc.5",
-  "@storybook/addon-controls": "6.2.0-rc.5",
-  "@storybook/addon-cssresources": "6.2.0-rc.5",
-  "@storybook/addon-design-assets": "6.2.0-rc.5",
-  "@storybook/addon-docs": "6.2.0-rc.5",
-  "@storybook/addon-essentials": "6.2.0-rc.5",
-  "@storybook/addon-events": "6.2.0-rc.5",
-  "@storybook/addon-google-analytics": "6.2.0-rc.5",
-  "@storybook/addon-graphql": "6.2.0-rc.5",
-  "@storybook/addon-jest": "6.2.0-rc.5",
-  "@storybook/addon-knobs": "6.2.0-rc.5",
-  "@storybook/addon-links": "6.2.0-rc.5",
-  "@storybook/addon-queryparams": "6.2.0-rc.5",
-  "@storybook/addon-storyshots": "6.2.0-rc.5",
-  "@storybook/addon-storyshots-puppeteer": "6.2.0-rc.5",
-  "@storybook/addon-storysource": "6.2.0-rc.5",
-  "@storybook/addon-toolbars": "6.2.0-rc.5",
-  "@storybook/addon-viewport": "6.2.0-rc.5",
-  "@storybook/addons": "6.2.0-rc.5",
-  "@storybook/angular": "6.2.0-rc.5",
-  "@storybook/api": "6.2.0-rc.5",
-  "@storybook/aurelia": "6.2.0-rc.5",
-  "@storybook/builder-webpack4": "6.2.0-rc.5",
-  "@storybook/builder-webpack5": "6.2.0-rc.5",
-  "@storybook/channel-postmessage": "6.2.0-rc.5",
-  "@storybook/channel-websocket": "6.2.0-rc.5",
-  "@storybook/channels": "6.2.0-rc.5",
-  "@storybook/cli": "6.2.0-rc.5",
-  "@storybook/client-api": "6.2.0-rc.5",
-  "@storybook/client-logger": "6.2.0-rc.5",
-  "@storybook/codemod": "6.2.0-rc.5",
-  "@storybook/components": "6.2.0-rc.5",
-  "@storybook/core": "6.2.0-rc.5",
-  "@storybook/core-client": "6.2.0-rc.5",
-  "@storybook/core-common": "6.2.0-rc.5",
-  "@storybook/core-events": "6.2.0-rc.5",
-  "@storybook/core-server": "6.2.0-rc.5",
-  "@storybook/ember": "6.2.0-rc.5",
-  "@storybook/html": "6.2.0-rc.5",
-  "@storybook/marionette": "6.2.0-rc.5",
-  "@storybook/marko": "6.2.0-rc.5",
-  "@storybook/mithril": "6.2.0-rc.5",
-  "@storybook/node-logger": "6.2.0-rc.5",
-  "@storybook/postinstall": "6.2.0-rc.5",
-  "@storybook/preact": "6.2.0-rc.5",
-  "@storybook/rax": "6.2.0-rc.5",
-  "@storybook/react": "6.2.0-rc.5",
-  "@storybook/riot": "6.2.0-rc.5",
-  "@storybook/router": "6.2.0-rc.5",
-  "@storybook/server": "6.2.0-rc.5",
-  "@storybook/source-loader": "6.2.0-rc.5",
-  "@storybook/svelte": "6.2.0-rc.5",
-  "@storybook/theming": "6.2.0-rc.5",
-  "@storybook/ui": "6.2.0-rc.5",
-  "@storybook/vue": "6.2.0-rc.5",
-  "@storybook/vue3": "6.2.0-rc.5",
-  "@storybook/web-components": "6.2.0-rc.5"
+  "@storybook/addon-a11y": "6.2.0-rc.6",
+  "@storybook/addon-actions": "6.2.0-rc.6",
+  "@storybook/addon-backgrounds": "6.2.0-rc.6",
+  "@storybook/addon-controls": "6.2.0-rc.6",
+  "@storybook/addon-cssresources": "6.2.0-rc.6",
+  "@storybook/addon-design-assets": "6.2.0-rc.6",
+  "@storybook/addon-docs": "6.2.0-rc.6",
+  "@storybook/addon-essentials": "6.2.0-rc.6",
+  "@storybook/addon-events": "6.2.0-rc.6",
+  "@storybook/addon-google-analytics": "6.2.0-rc.6",
+  "@storybook/addon-graphql": "6.2.0-rc.6",
+  "@storybook/addon-jest": "6.2.0-rc.6",
+  "@storybook/addon-knobs": "6.2.0-rc.6",
+  "@storybook/addon-links": "6.2.0-rc.6",
+  "@storybook/addon-queryparams": "6.2.0-rc.6",
+  "@storybook/addon-storyshots": "6.2.0-rc.6",
+  "@storybook/addon-storyshots-puppeteer": "6.2.0-rc.6",
+  "@storybook/addon-storysource": "6.2.0-rc.6",
+  "@storybook/addon-toolbars": "6.2.0-rc.6",
+  "@storybook/addon-viewport": "6.2.0-rc.6",
+  "@storybook/addons": "6.2.0-rc.6",
+  "@storybook/angular": "6.2.0-rc.6",
+  "@storybook/api": "6.2.0-rc.6",
+  "@storybook/aurelia": "6.2.0-rc.6",
+  "@storybook/builder-webpack4": "6.2.0-rc.6",
+  "@storybook/builder-webpack5": "6.2.0-rc.6",
+  "@storybook/channel-postmessage": "6.2.0-rc.6",
+  "@storybook/channel-websocket": "6.2.0-rc.6",
+  "@storybook/channels": "6.2.0-rc.6",
+  "@storybook/cli": "6.2.0-rc.6",
+  "@storybook/client-api": "6.2.0-rc.6",
+  "@storybook/client-logger": "6.2.0-rc.6",
+  "@storybook/codemod": "6.2.0-rc.6",
+  "@storybook/components": "6.2.0-rc.6",
+  "@storybook/core": "6.2.0-rc.6",
+  "@storybook/core-client": "6.2.0-rc.6",
+  "@storybook/core-common": "6.2.0-rc.6",
+  "@storybook/core-events": "6.2.0-rc.6",
+  "@storybook/core-server": "6.2.0-rc.6",
+  "@storybook/ember": "6.2.0-rc.6",
+  "@storybook/html": "6.2.0-rc.6",
+  "@storybook/lit": "6.2.0-rc.6",
+  "@storybook/marionette": "6.2.0-rc.6",
+  "@storybook/marko": "6.2.0-rc.6",
+  "@storybook/mithril": "6.2.0-rc.6",
+  "@storybook/node-logger": "6.2.0-rc.6",
+  "@storybook/postinstall": "6.2.0-rc.6",
+  "@storybook/preact": "6.2.0-rc.6",
+  "@storybook/rax": "6.2.0-rc.6",
+  "@storybook/react": "6.2.0-rc.6",
+  "@storybook/riot": "6.2.0-rc.6",
+  "@storybook/router": "6.2.0-rc.6",
+  "@storybook/server": "6.2.0-rc.6",
+  "@storybook/source-loader": "6.2.0-rc.6",
+  "@storybook/svelte": "6.2.0-rc.6",
+  "@storybook/theming": "6.2.0-rc.6",
+  "@storybook/ui": "6.2.0-rc.6",
+  "@storybook/vue": "6.2.0-rc.6",
+  "@storybook/vue3": "6.2.0-rc.6",
+  "@storybook/web-components": "6.2.0-rc.6"
 }

yarn.lock

@@ -21834,7 +21834,7 @@ lit-element@^2.4.0:
   dependencies:
     lit-html "^1.1.1"
 
-lit-element@next-major:
+lit-element@^3.0.0-pre.4:
   version "3.0.0-pre.4"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.0.0-pre.4.tgz#564930d196193666232636d6bc06efd7965ceac5"
   integrity sha512-5fNufIe3aad1q66DBoBAn+LtbynEE4RXaZDUO0RIGsDoz3ytizR7pMo/zvZGl21QOC0gxlWEm55QzMXdE9EUDg==
@@ -21852,6 +21852,15 @@ lit-html@^2.0.0-pre.7:
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.0.0-pre.7.tgz#499fa78a0119bb4f4398944f6bebf1b265ced914"
   integrity sha512-qy/fHSRzf7cCbXGLXVBRwecnLgioyvkKbk4WGVswbelK6OD5tqhwY2wVWclEA0JEuNkGQW81ad15BeGxR46uig==
 
+lit@^2.0.0-pre.2:
+  version "2.0.0-pre.2"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-pre.2.tgz#b7679c5c253aab6b7e6929b88d45049c14dbd7ed"
+  integrity sha512-IEnHFvhmk2ir+S010tPZoqmPKcXB8+srOJOSnRT8G6fnU//fAFhmUwMHEHwFyOcftjODsXWK8dSv6+j4ms4c/Q==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-pre.3"
+    lit-element "^3.0.0-pre.4"
+    lit-html "^2.0.0-pre.7"
+
 live-server@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/live-server/-/live-server-1.2.1.tgz#670630dd409d22fe9c513ab1c1894686c757153e"