feat: migrate to the next major for lit

README.md

@@ -2,15 +2,13 @@
 
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/helium-animated-pages)[![npm version](https://badge.fury.io/js/helium-animated-pages.svg)](https://badge.fury.io/js/helium-animated-pages)
 
-###### [Docs/Demo](https://helium-animated-pages.glitch.me/demo/) | [Using it in `pwa-starter-kit`](https://github.com/alangdm/helium-animated-pages/wiki/Usage-in-pwa-starter-kit)
+###### [Docs/Demo](https://helium-animated-pages.glitch.me/demo/)
 
 This is a light spiritual successor to the now deprecated [`<neon-animated-pages>`](https://www.webcomponents.org/element/PolymerElements/neon-animation/elements/neon-animated-pages).
 
-It works with css animations and only depends on [lit-element](https://github.com/Polymer/lit-element) so you don't have to worry about including any heavy js libraries.
+It works with css animations and only depends on [lit](https://www.npmjs.com/package/lit) so you don't have to worry about including any heavy js libraries.
 
-This component takes care of the logic behind triggering the animations so that you can focus on making your views and your animations (or just use the animations included in the `sample-animations` folder if you don't want to bother with those either 😉.)
-
-It can be easily used in [pwa-starter-kit](https://github.com/Polymer/pwa-starter-kit/) and [here's how](https://github.com/alangdm/helium-animated-pages/wiki/Usage-in-pwa-starter-kit).
+This component takes care of the logic behind triggering the animations so that you can focus on making your views and your animations. Alternatively, you can use the animations included in the `sample-animations` folder. 😉
 
 To begin using it just follow this simple steps:
 
@@ -26,14 +24,14 @@ To begin using it just follow this simple steps:
   <!-- type="module" is essential -->
   <script
     type="module"
-    src="node_modules/helium-animated-pages/helium-animated-pages.js"
+    src="node_modules/helium-animated-pages"
   ></script>
   ```
 
   In a js module:
 
   ```javascript
-  import 'helium-animated-pages/helium-animated-pages.js';
+  import 'helium-animated-pages';
   ```
 
 - Create an instance of `<helium-animated-pages>` in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/) and start using it:
@@ -82,11 +80,6 @@ To begin using it just follow this simple steps:
     <!-- The pages can be almost anything -->
     <section name="page1">Page 1</section>
     <div name="page2">Page 2</div>
-    <!-- It is recommended that custom elements
-        used as a page all extend an element like pwa-starter-kit's
-        page-view-element
-        https://github.com/Polymer/pwa-starter-kit/blob/master/src/components/page-view-element.js
-      -->
     <custom-element name="page3"></custom-element>
   </helium-animated-pages>
   <script>
@@ -99,8 +92,8 @@ To begin using it just follow this simple steps:
     });
 
     // defining the "rules" for which css classes to apply on
-    // diferent page transitions, for more info go to:
-    // https://github.com/alangdm/helium-animated-pages/wiki/API#attrforselected
+    // different page transitions, for more info go to:
+    // https://helium-animated-pages.glitch.me/demo/
     // I'm using css classes which aren't defined on this context but you
     // must define them when actually using this
     document.querySelector('#pages').animationClasses = {

demo/components/demo-element.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import './settings-demo.js';
 import './property-demo.js';
 import { sharedStyles } from './shared-styles.js';

demo/components/page-view-element.js

@@ -8,7 +8,7 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 
 export class PageViewElement extends LitElement {
   // Only render this page if it's actually visible.

demo/components/property-demo.js

@@ -1,4 +1,4 @@
-import { html, css } from 'lit-element';
+import { html, css } from 'lit';
 import { PageViewElement } from './page-view-element.js';
 import { sharedStyles } from './shared-styles.js';
 import '../../helium-animated-pages.js';

demo/components/settings-demo.js

@@ -1,4 +1,4 @@
-import { html, css } from 'lit-element';
+import { html, css } from 'lit';
 import { PageViewElement } from './page-view-element.js';
 import { sharedStyles } from './shared-styles.js';
 import '../../helium-animated-pages.js';

demo/components/shared-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export const sharedStyles = css`
   *,

demo/demo.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>&lt;helium-animated-pages&gt; - Demo</title>
-    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script type="module" src="./components/demo-element.js"></script>
     <style>
       body {

demo/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>&lt;helium-animated-pages&gt; - Docs</title>
-    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script type="module">
       import 'api-viewer-element/lib/api-docs.js';
     </script>

package.json

@@ -9,11 +9,10 @@
   "author": "alangdm",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "lit-element": "^2.2.1"
+    "lit": "2.0.0-pre.1"
   },
   "devDependencies": {
     "@web/dev-server": "0.1.7",
-    "@webcomponents/webcomponentsjs": "2.5.0",
     "api-viewer-element": "0.4.4",
     "eslint": "7.20.0",
     "eslint-config-prettier": "7.2.0",

sample-animations/carousel-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateCarouselLeftIn = css`

sample-animations/cube-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateCubeLeftIn = css`

sample-animations/fade-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 

sample-animations/flip-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const FlipInLeft = css`

sample-animations/fold-unfold-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateUnfoldLeft = css`

sample-animations/move-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 

sample-animations/push-pull-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 

sample-animations/room-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateRoomLeftIn = css`

sample-animations/rotate-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateInNewspaper = css`

sample-animations/scale-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 

sample-animations/sides-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateSidesIn = css`

sample-animations/slides-animations.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateSlideIn = css`

src/HeliumAnimatedPages.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { stringOrIntSerializer } from './serializers.js';
 
 const _isString = (next) => {