feat(cxl-ui): migrate to lit

package.json

@@ -60,7 +60,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",
@@ -96,5 +95,6 @@
       "stylelint --syntax=scss",
       "prettier --single-quote=false --write"
     ]
-  }
+  },
+  "dependencies": {}
 }

packages/core/package.json

@@ -13,8 +13,7 @@
     "directory": "packages/core"
   },
   "dependencies": {
-    "lit-element": "^2.0.1",
-    "lit-html": "^2.0.0-rc.3"
+    "lit": "^2.0.0-rc.2"
   },
   "devDependencies": {
     "@aybolit/test-helpers": "^0.1.0",

packages/core/src/components/button.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js';
 import buttonBaseStyles from '../styles/button-base-css.js';
 
@@ -10,8 +10,8 @@ export class ButtonElement extends DelegateFocusMixin(LitElement) {
        */
       link: {
         type: String,
-        reflect: true
-      }
+        reflect: true,
+      },
     };
   }
 

packages/core/src/components/checkbox.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js';
 import checkboxBaseStyles from '../styles/checkbox-base-css.js';
 
@@ -12,7 +12,7 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) {
        */
       checked: {
         type: Boolean,
-        reflect: true
+        reflect: true,
       },
 
       /**
@@ -21,16 +21,16 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) {
        */
       indeterminate: {
         type: Boolean,
-        reflect: true
+        reflect: true,
       },
 
       /**
        * The value given to the data submitted with the name
        * to the server when the checkbox is inside a form.
        */
       value: {
-        reflect: true
-      }
+        reflect: true,
+      },
     };
   }
 
@@ -105,7 +105,7 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) {
     }
     this.dispatchEvent(
       new CustomEvent('checked-changed', {
-        detail: { value: checked }
+        detail: { value: checked },
       })
     );
   }
@@ -127,10 +127,10 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) {
     // into the ancestor tree, so we must do this manually.
     const changeEvent = new CustomEvent('change', {
       detail: {
-        sourceEvent: e
+        sourceEvent: e,
       },
       bubbles: e.bubbles,
-      cancelable: e.cancelable
+      cancelable: e.cancelable,
     });
     this.dispatchEvent(changeEvent);
   }

packages/core/src/components/progress.js

@@ -1,5 +1,5 @@
-import { LitElement, html } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { LitElement, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined';
 import progressBaseStyles from '../styles/progress-base-css.js';
 
 export class ProgressElement extends LitElement {
@@ -10,16 +10,16 @@ export class ProgressElement extends LitElement {
        * or empty string to set indeterminate state.
        */
       value: {
-        type: Number
+        type: Number,
       },
 
       /**
        * Maximum bound to the native progress element.
        * Note: the minimum value is always 0.
        */
       max: {
-        type: Number
-      }
+        type: Number,
+      },
     };
   }
 
@@ -39,8 +39,6 @@ export class ProgressElement extends LitElement {
     if (value === null || value === '') {
       value = undefined;
     }
-    return html`
-      <progress value="${ifDefined(value)}" max="${this.max}"></progress>
-    `;
+    return html` <progress value="${ifDefined(value)}" max="${this.max}"></progress> `;
   }
 }

packages/core/src/components/range.js

@@ -1,28 +1,28 @@
-import { LitElement, html } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { LitElement, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined';
 import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js';
 import rangeBaseStyles from '../styles/range-base-css.js';
 
-const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n);
+const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 
 export class RangeElement extends DelegateFocusMixin(LitElement) {
   static get properties() {
     return {
       value: {
-        type: Number
+        type: Number,
       },
 
       min: {
-        type: Number
+        type: Number,
       },
 
       max: {
-        type: Number
+        type: Number,
       },
 
       step: {
-        type: Number
-      }
+        type: Number,
+      },
     };
   }
 
@@ -98,8 +98,8 @@ export class RangeElement extends DelegateFocusMixin(LitElement) {
       this.dispatchEvent(
         new CustomEvent('value-changed', {
           detail: {
-            value: this.value
-          }
+            value: this.value,
+          },
         })
       );
     }
@@ -114,10 +114,10 @@ export class RangeElement extends DelegateFocusMixin(LitElement) {
     // into the ancestor tree, so we must do this manually.
     const changeEvent = new CustomEvent('change', {
       detail: {
-        sourceEvent: e
+        sourceEvent: e,
       },
       bubbles: e.bubbles,
-      cancelable: e.cancelable
+      cancelable: e.cancelable,
     });
     this.dispatchEvent(changeEvent);
   }

packages/core/src/components/switch.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js';
 import switchBaseStyles from '../styles/switch-base-css.js';
 
@@ -10,8 +10,8 @@ export class SwitchElement extends DelegateFocusMixin(LitElement) {
        */
       checked: {
         type: Boolean,
-        reflect: true
-      }
+        reflect: true,
+      },
     };
   }
 
@@ -64,7 +64,7 @@ export class SwitchElement extends DelegateFocusMixin(LitElement) {
     this.setAttribute('aria-checked', checked);
     this.dispatchEvent(
       new CustomEvent('checked-changed', {
-        detail: { value: checked }
+        detail: { value: checked },
       })
     );
   }
@@ -77,10 +77,10 @@ export class SwitchElement extends DelegateFocusMixin(LitElement) {
     // into the ancestor tree, so we must do this manually.
     const changeEvent = new CustomEvent('change', {
       detail: {
-        sourceEvent: e
+        sourceEvent: e,
       },
       bubbles: e.bubbles,
-      cancelable: e.cancelable
+      cancelable: e.cancelable,
     });
     this.dispatchEvent(changeEvent);
   }

packages/cxl-lumo-styles/package.json

@@ -13,7 +13,7 @@
     "@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"
+    "lit": "^2.0.0-rc.2",
+    "lit-element": "^2.2.1"
   }
 }

packages/cxl-ui/package.json

@@ -23,8 +23,7 @@
     "@vaadin/vaadin-tabs": "^4.0.0-alpha4",
     "@vaadin/vaadin-themable-mixin": "^1.6.2",
     "headroom.js": "^0.12.0",
-    "lit-element": "^2.2.1",
-    "lit-html": "^2.0.0-rc.3"
+    "lit": "^2.0.0-rc.2"
   },
   "@pika/pack": {
     "pipeline": [

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

@@ -1,4 +1,4 @@
-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';
 

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

@@ -1,7 +1,8 @@
 /**
  * @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 cxlAppLayoutStyles from '../styles/cxl-app-layout-css.js';

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,4 +1,5 @@
-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';
@@ -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,6 +1,6 @@
 import '@conversionxl/cxl-lumo-styles';
 import { TabsElement } from '@vaadin/vaadin-tabs';
-import { customElement } from 'lit-element';
+import { customElement } from 'lit/decorators';
 
 @customElement('cxl-tabs-slider')
 export class CXLTabsSliderElement extends TabsElement {

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

@@ -1,4 +1,4 @@
-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';

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 { 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 { 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';