chore(cxl-ui): yarn upgrade-interactive --latest --scope '@vaadin'

package.json

@@ -61,7 +61,6 @@
     "karma-webpack": "^4.0.0-rc.5",
     "lerna": "^3.20.1",
     "lint-staged": "^10.5.3",
-    "lit-html": "^2.0.0-rc.3",
     "mocha": "^6.1.4",
     "node-watch": "^0.7.1",
     "npm-run-all": "^4.1.5",

packages/cxl-lumo-styles/package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@polymer/iron-iconset-svg": "^3.0.1",
-    "@vaadin/vaadin-lumo-styles": "^1.5.0",
-    "@vaadin/vaadin-themable-mixin": "^1.5.2",
-    "lit-element": "^2.2.1",
-    "lit-html": "^2.0.0-rc.3"
+    "@vaadin/polymer-legacy-adapter": "^22.0.0",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0",
+    "lit": "^2.0.2"
   }
 }

packages/cxl-lumo-styles/src/utils.js

@@ -1,5 +1,6 @@
 // @see https://github.com/vaadin/vaadin-themable-mixin/blob/v1.5.2/register-styles.html
-import { CSSResult } from 'lit-element';
+import { css, CSSResult, unsafeCSS } from 'lit';
+import '@vaadin/polymer-legacy-adapter';
 
 let moduleIdIndex = 0;
 const styleMap = {};
@@ -15,7 +16,13 @@ export const registerGlobalStyles = (styles, options) => {
 
   styles.forEach((cssResult) => {
     if (!(cssResult instanceof CSSResult)) {
-      throw new Error('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+      // After upgrading vaadin components (37967abeb35bc5382021fcc46095ee31a), cssResult is no long of type CSSResult.
+      // throw new Error('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+
+      // eslint-disable-next-line no-param-reassign
+      cssResult = css`
+        ${unsafeCSS(cssResult)}
+      `;
     }
 
     if (!styleMap[cssResult]) {

packages/cxl-ui/package.json

@@ -16,16 +16,15 @@
     "@pika/plugin-build-web": "^0.9.2",
     "@pika/plugin-bundle-web": "^0.9.2",
     "@pika/plugin-standard-pkg": "^0.9.2",
-    "@vaadin/vaadin-accordion": "^2.0.0-alpha5",
-    "@vaadin/vaadin-button": "^3.0.0-alpha1",
-    "@vaadin/vaadin-context-menu": "^5.0.0-alpha2",
-    "@vaadin/vaadin-notification": "^2.0.0-alpha1",
-    "@vaadin/vaadin-progress-bar": "^2.0.0-alpha2",
-    "@vaadin/vaadin-tabs": "^4.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^1.6.2",
+    "@vaadin/accordion": "^22.0.0",
+    "@vaadin/button": "^22.0.0",
+    "@vaadin/context-menu": "^22.0.0",
+    "@vaadin/notification": "^22.0.0",
+    "@vaadin/progress-bar": "^22.0.0",
+    "@vaadin/tabs": "^22.0.0",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0",
     "headroom.js": "^0.12.0",
-    "lit-element": "^2.2.1",
-    "lit-html": "^2.0.0-rc.3"
+    "lit": "^2.0.2"
   },
   "@pika/pack": {
     "pipeline": [

packages/cxl-ui/src/components/cxl-accordion-card.js

@@ -1,9 +1,9 @@
-import { customElement } from 'lit-element';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
-import { AccordionPanelElement } from '@vaadin/vaadin-accordion/src/vaadin-accordion-panel';
+import { AccordionPanel } from '@vaadin/accordion/src/vaadin-accordion-panel';
 
 @customElement('cxl-accordion-card')
-export class CXLAccordionCardElement extends AccordionPanelElement {
+export class CXLAccordionCardElement extends AccordionPanel {
   ready() {
     super.ready();
 

packages/cxl-ui/src/components/cxl-app-layout.js

@@ -1,14 +1,15 @@
 /**
  * @todo implement primary action button.
  */
-import { LitElement, html, customElement, property, query } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import normalizeWheel from '@conversionxl/normalize-wheel';
 import cxlAppLayoutStyles from '../styles/cxl-app-layout-css.js';
 import cxlAppLayoutGlobalStyles from '../styles/global/cxl-app-layout-css.js';
-import '@vaadin/vaadin-button';
-import '@vaadin/vaadin-context-menu/src/vaadin-device-detector.js';
+import '@vaadin/button';
+import '@vaadin/context-menu/src/vaadin-device-detector.js';
 
 const ASIDE_LOCAL_STORAGE_KEY = 'cxl-app-layout-aside-opened';
 

packages/cxl-ui/src/components/cxl-card.js

@@ -1,4 +1,5 @@
-import { customElement, LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import cxlCardGlobalStyles from '../styles/global/cxl-card-css.js';

packages/cxl-ui/src/components/cxl-marketing-nav.js

@@ -1,11 +1,12 @@
-import { LitElement, html, customElement, property, query } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import cxlMarketingNavStyles from '../styles/cxl-marketing-nav-css.js';
 import cxlMarketingNavGlobalStyles from '../styles/global/cxl-marketing-nav-css.js';
-import '@vaadin/vaadin-button';
-import '@vaadin/vaadin-tabs';
-import '@vaadin/vaadin-context-menu';
+import '@vaadin/button';
+import '@vaadin/tabs';
+import '@vaadin/context-menu';
 
 @customElement('cxl-marketing-nav')
 export class CXLMarketingNavElement extends LitElement {
@@ -132,9 +133,8 @@ export class CXLMarketingNavElement extends LitElement {
     /**
      * Configure `.menu-item-search`.
      */
-    const menuItemSearchContextMenu = this.menuItemSearchElement.querySelector(
-      'vaadin-context-menu'
-    );
+    const menuItemSearchContextMenu =
+      this.menuItemSearchElement.querySelector('vaadin-context-menu');
 
     /**
      * `<vaadin-context-menu-item>` interferes with form input.

packages/cxl-ui/src/components/cxl-section.js

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, svg } from 'lit-element';
+import { LitElement, html, svg } from 'lit';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
 

packages/cxl-ui/src/components/cxl-tabs-slider.js

@@ -1,9 +1,9 @@
 import '@conversionxl/cxl-lumo-styles';
-import { TabsElement } from '@vaadin/vaadin-tabs';
-import { customElement } from 'lit-element';
+import { Tabs } from '@vaadin/tabs';
+import { customElement } from 'lit/decorators';
 
 @customElement('cxl-tabs-slider')
-export class CXLTabsSliderElement extends TabsElement {
+export class CXLTabsSliderElement extends Tabs {
   _updateOverflow() {
     this.centeredContainerWidthCheck();
     super._updateOverflow();

packages/cxl-ui/src/components/cxl-vaadin-accordion.js

@@ -1,7 +1,7 @@
-import { customElement } from 'lit-element';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
-import '@vaadin/vaadin-accordion';
-import { AccordionElement } from '@vaadin/vaadin-accordion/src/vaadin-accordion';
+import '@vaadin/accordion';
+import { Accordion } from '@vaadin/accordion/src/vaadin-accordion';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import cxlVaadinAccordionGlobalStyles from '../styles/global/cxl-vaadin-accordion-css.js';
 
@@ -10,7 +10,7 @@ import cxlVaadinAccordionGlobalStyles from '../styles/global/cxl-vaadin-accordio
  * Saves panel state, restores on page load.
  */
 @customElement('cxl-vaadin-accordion')
-export class CXLVaadinAccordionElement extends AccordionElement {
+export class CXLVaadinAccordionElement extends Accordion {
   /**
    * Global styles.
    */

packages/cxl-ui/src/index.js

@@ -1,5 +1,5 @@
-import '@vaadin/vaadin-notification';
-import '@vaadin/vaadin-progress-bar';
+import '@vaadin/notification';
+import '@vaadin/progress-bar';
 import * as Headroom from 'headroom.js';
 
 export { CXLAppLayoutElement } from './components/cxl-app-layout.js';

packages/storybook/cxl-lumo-styles/elements.stories.js

@@ -1,7 +1,7 @@
 import '@conversionxl/cxl-lumo-styles';
-import '@vaadin/vaadin-button';
-import '@vaadin/vaadin-notification';
-import { html } from 'lit-html';
+import '@vaadin/button';
+import '@vaadin/notification';
+import { html } from 'lit';
 import cxlLoadingStyles from '@conversionxl/cxl-lumo-styles/src/styles/loading-css.js';
 import { CXLAppLayout } from '../cxl-ui/cxl-app-layout/layout=1c.stories';
 

packages/storybook/cxl-lumo-styles/typography.stories.js

@@ -1,7 +1,7 @@
 import '@conversionxl/cxl-lumo-styles';
-import '@vaadin/vaadin-button';
+import '@vaadin/button';
 import { withKnobs } from '@storybook/addon-knobs';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default {
   decorators: [withKnobs],

packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
 import { CXLMarketingNav } from '../cxl-marketing-nav.stories';

packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
 import { CXLMarketingNav } from '../cxl-marketing-nav.stories';

packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';

packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';

packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';

packages/storybook/cxl-ui/cxl-card/[theme=cxl-testimonial].stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-card.js';
 import '@conversionxl/cxl-lumo-styles';
 

packages/storybook/cxl-ui/cxl-marketing-nav.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { useEffect } from '@storybook/client-api';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
 import { Headroom } from '@conversionxl/cxl-ui';

packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js

@@ -1,6 +1,6 @@
 import '@conversionxl/cxl-ui/src/components/cxl-card';
 import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { CXLTestimonial } from '../cxl-card/[theme=cxl-testimonial].stories';
 import archiveData from '../cxl-vaadin-accordion/theme=cxl-archive.data.json';
 

packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 import '@conversionxl/cxl-ui/src/components/cxl-accordion-card.js';
 import archiveData from './theme=cxl-archive.data.json';

packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-faq.story.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 import faqData from './theme=cxl-faq.data.json';
 

packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-minidegree-track.story.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 
 export const CXLVaadinAccordionThemeMinidegreeTrack = () => html`

packages/storybook/cxl-ui/footer-nav.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default {
   title: 'CXL UI/footer',

packages/storybook/package.json

@@ -18,9 +18,9 @@
     "@storybook/core": "^6.3.12",
     "@storybook/storybook-deployer": "^2.8.10",
     "@storybook/web-components": "^6.3.12",
-    "@vaadin/vaadin-button": "^3.0.0-alpha1",
-    "@vaadin/vaadin-notification": "^2.0.0-alpha1",
-    "lit-html": "^2.0.0-rc.3"
+    "@vaadin/button": "^22.0.0",
+    "@vaadin/notification": "^22.0.0",
+    "lit": "^2.0.2"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"