update to lit-element and lit-html prerelease

docs/resources/changelog.md

@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Updated to the prerelease versions of LitElement and lit-html
+
 ## 2.0.0-beta.35
 
 - Fixed a bug in `sl-animation` where `sl-cancel` and `sl-finish` events would never fire

package-lock.json

@@ -82,6 +82,11 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@lit/reactive-element": {
+      "version": "1.0.0-pre.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-pre.2.tgz",
+      "integrity": "sha512-IjguhOf9rFxtStHr8Sou2TuaUgpeLFojdKDoorssuyY0MnPCFdlcOJ2VhTOnoxV3fwHDC9m3Esc8zT+B3UG3Kw=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -2303,18 +2308,36 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
-    "lit-element": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.4.0.tgz",
-      "integrity": "sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==",
+    "lit": {
+      "version": "2.0.0-pre.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-pre.1.tgz",
+      "integrity": "sha512-1c/Df773r0yKZmZfzz0e0EzltdKDmEKrfyF7DFWagmiMxaA3c/9m9+58BhMF7LJg2Rt04L5ZQ3GWpkt1MtX/mA==",
       "requires": {
-        "lit-html": "^1.1.1"
+        "@lit/reactive-element": "^1.0.0-pre.2",
+        "lit-element": "^3.0.0-pre.3",
+        "lit-html": "^2.0.0-pre.6"
+      }
+    },
+    "lit-element": {
+      "version": "3.0.0-pre.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-pre.3.tgz",
+      "integrity": "sha512-E6QaOQ+OJx4HX5bI6Xtojw5qHlOSY5R7NWXRtbq+/xxIIPXfwNTF5fOpOKREd8/GSdQP1hHBCxBovlitVPKYaA==",
+      "requires": {
+        "@lit/reactive-element": "^1.0.0-pre.1",
+        "lit-html": "^2.0.0-pre.4"
+      },
+      "dependencies": {
+        "lit-html": {
+          "version": "2.0.0-pre.6",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+          "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
+        }
       }
     },
     "lit-html": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.3.0.tgz",
-      "integrity": "sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q=="
+      "version": "2.0.0-pre.6",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+      "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
     },
     "localtunnel": {
       "version": "2.0.1",

package.json

@@ -31,15 +31,15 @@
   "scripts": {
     "start": "node scripts/build.cjs --dev",
     "build": "node scripts/build.cjs",
-    "prepublish": "npm run build",
+    "prepublishOnly": "npm run build",
     "prettier": "prettier --write --loglevel warn ."
   },
   "dependencies": {
     "@popperjs/core": "^2.7.0",
     "@shoelace-style/animations": "^1.1.0",
     "color": "^3.1.3",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "lit": "^2.0.0-pre.1",
+    "lit-html": "^2.0.0-pre.6"
   },
   "devDependencies": {
     "@types/color": "^3.0.1",

src/components/alert/alert.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./alert.scss';
@@ -25,7 +26,7 @@ export default class SlAlert extends LitElement {
 
   private autoHideTimeout: any;
 
-  @internalProperty() private isVisible = false;
+  @state() private isVisible = false;
 
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;

src/components/animation/animation.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, queryAsync, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, queryAsync } from 'lit/decorators';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./animation.scss';
 import { animations } from './animations';
@@ -49,7 +50,7 @@ export default class SlAnimation extends LitElement {
   @property({ attribute: 'iteration-start', type: Number }) iterationStart = 0;
 
   /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
-  @property() keyframes: Keyframe[];
+  @property({ attribute: false }) keyframes: Keyframe[];
 
   /**
    * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this

src/components/avatar/avatar.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./avatar.scss';
 
@@ -19,7 +20,7 @@ import styles from 'sass:./avatar.scss';
 export default class SlAvatar extends LitElement {
   static styles = unsafeCSS(styles);
 
-  @internalProperty() private hasError = false;
+  @state() private hasError = false;
 
   /** The image source to use for the avatar. */
   @property({ reflect: true }) image: string;
@@ -43,7 +44,6 @@ export default class SlAvatar extends LitElement {
           'avatar--rounded': this.shape === 'rounded',
           'avatar--square': this.shape === 'square'
         })}
-        role="image"
         aria-label=${this.alt}
       >
         ${this.initials

src/components/badge/badge.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./badge.scss';
 

src/components/button-group/button-group.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import styles from 'sass:./button-group.scss';
 
 /**

src/components/button/button.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter } from '../../internal/decorators';
@@ -27,10 +28,10 @@ export default class SlButton extends LitElement {
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasLabel = false;
-  @internalProperty() private hasPrefix = false;
-  @internalProperty() private hasSuffix = false;
+  @state() private hasFocus = false;
+  @state() private hasLabel = false;
+  @state() private hasPrefix = false;
+  @state() private hasSuffix = false;
 
   /** The button's type. */
   @property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' =

src/components/card/card.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./card.scss';
 import { hasSlot } from '../../internal/slot';
@@ -22,9 +23,9 @@ import { hasSlot } from '../../internal/slot';
 export default class SlCard extends LitElement {
   static styles = unsafeCSS(styles);
 
-  @internalProperty() private hasFooter = false;
-  @internalProperty() private hasImage = false;
-  @internalProperty() private hasHeader = false;
+  @state() private hasFooter = false;
+  @state() private hasImage = false;
+  @state() private hasHeader = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/checkbox/checkbox.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./checkbox.scss';
@@ -26,7 +27,7 @@ export default class SlCheckbox extends LitElement {
   private inputId = `checkbox-${++id}`;
   private labelId = `checkbox-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** The checkbox's name attribute. */
   @property() name: string;

src/components/color-picker/color-picker.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -41,12 +42,12 @@ export default class SlColorPicker extends LitElement {
   private bypassValueParse = false;
   private lastValueEmitted: string;
 
-  @internalProperty() private inputValue = '';
-  @internalProperty() private hue = 0;
-  @internalProperty() private saturation = 100;
-  @internalProperty() private lightness = 100;
-  @internalProperty() private alpha = 100;
-  @internalProperty() private showCopyFeedback = false;
+  @state() private inputValue = '';
+  @state() private hue = 0;
+  @state() private saturation = 100;
+  @state() private lightness = 100;
+  @state() private alpha = 100;
+  @state() private showCopyFeedback = false;
 
   /** The current color. */
   @property() value = '#ffffff';

src/components/details/details.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./details.scss';

src/components/dialog/dialog.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -43,8 +44,8 @@ export default class SlDialog extends LitElement {
   private willShow = false;
   private willHide = false;
 
-  @internalProperty() private hasFooter = false;
-  @internalProperty() private isVisible = false;
+  @state() private hasFooter = false;
+  @state() private isVisible = false;
 
   /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;

src/components/drawer/drawer.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter } from '../../internal/decorators';
@@ -43,8 +44,8 @@ export default class SlDrawer extends LitElement {
   private willShow = false;
   private willHide = false;
 
-  @internalProperty() private hasFooter = false;
-  @internalProperty() private isVisible = false;
+  @state() private hasFooter = false;
+  @state() private isVisible = false;
 
   /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;

src/components/dropdown/dropdown.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./dropdown.scss';

src/components/form/form.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./form.scss';
 import {

src/components/format-bytes/format-bytes.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { formatBytes } from '../../internal/number';
 
 /**

src/components/format-date/format-date.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators';
 
 /**
  * @since 2.0

src/components/format-number/format-number.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators';
 
 /**
  * @since 2.0

src/components/icon-button/icon-button.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import styles from 'sass:./icon-button.scss';

src/components/icon/icon.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./icon.scss';
@@ -17,7 +18,7 @@ const parser = new DOMParser();
 export default class SlIcon extends LitElement {
   static styles = unsafeCSS(styles);
 
-  @internalProperty() private svg = '';
+  @state() private svg = '';
 
   /** The name of the icon to draw. */
   @property() name: string;

src/components/image-comparer/image-comparer.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { styleMap } from 'lit-html/directives/style-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./image-comparer.scss';

src/components/include/include.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./include.scss';
 import { requestInclude } from './request';

src/components/input/input.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -42,10 +43,10 @@ export default class SlInput extends LitElement {
   private inputId = `input-${++id}`;
   private labelId = `input-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
-  @internalProperty() private isPasswordVisible = false;
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
+  @state() private isPasswordVisible = false;
 
   /** The input's type. */
   @property({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';

src/components/menu-divider/menu-divider.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators';
 import styles from 'sass:./menu-divider.scss';
 
 /**

src/components/menu-item/menu-item.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import styles from 'sass:./menu-item.scss';
@@ -25,7 +26,7 @@ export default class SlMenuItem extends LitElement {
 
   @query('.menu-item') menuItem: HTMLElement;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** Draws the item in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;

src/components/menu-label/menu-label.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators';
 import styles from 'sass:./menu-label.scss';
 
 /**

src/components/menu/menu.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, query } from 'lit/decorators';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./menu.scss';
 import { SlMenuItem } from '../../shoelace';

src/components/progress-bar/progress-bar.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 import styles from 'sass:./progress-bar.scss';

src/components/progress-ring/progress-ring.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { watch } from '../../internal/decorators';
 import styles from 'sass:./progress-ring.scss';
 

src/components/radio/radio.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./radio.scss';
@@ -25,7 +26,7 @@ export default class SlRadio extends LitElement {
   private inputId = `radio-${++id}`;
   private labelId = `radio-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** The radio's name attribute. */
   @property() name: string;

src/components/range/range.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -31,10 +32,10 @@ export default class SlRange extends LitElement {
   private labelId = `input-label-${id}`;
   private resizeObserver: ResizeObserver;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
-  @internalProperty() private hasTooltip = false;
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
+  @state() private hasTooltip = false;
 
   /** The input's name attribute. */
   @property() name = '';

src/components/rating/rating.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
@@ -21,8 +22,8 @@ export default class SlRating extends LitElement {
 
   @query('.rating') rating: HTMLElement;
 
-  @internalProperty() private hoverValue = 0;
-  @internalProperty() private isHovering = false;
+  @state() private hoverValue = 0;
+  @state() private isHovering = false;
 
   /** The current rating. */
   @property({ type: Number }) value = 0;

src/components/relative-time/relative-time.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { watch } from '../../internal/decorators';
 
 /**
@@ -9,9 +10,9 @@ import { watch } from '../../internal/decorators';
 export default class SlRelativeTime extends LitElement {
   private updateTimeout: any;
 
-  @internalProperty() private isoTime = '';
-  @internalProperty() private relativeTime = '';
-  @internalProperty() private titleTime = '';
+  @state() private isoTime = '';
+  @state() private relativeTime = '';
+  @state() private titleTime = '';
 
   /** The date from which to calculate time from. */
   @property() date: Date | string;

src/components/resize-observer/resize-observer.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./resize-observer.scss';
 

src/components/responsive-embed/responsive-embed.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import styles from 'sass:./responsive-embed.scss';
 import { watch } from '../../internal/decorators';
 

src/components/select/select.ts

@@ -1,13 +1,5 @@
-import {
-  LitElement,
-  customElement,
-  TemplateResult,
-  html,
-  internalProperty,
-  property,
-  query,
-  unsafeCSS
-} from 'lit-element';
+import { LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./select.scss';
@@ -55,12 +47,12 @@ export default class SlSelect extends LitElement {
   private labelId = `select-label-${id}`;
   private resizeObserver: ResizeObserver;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
-  @internalProperty() private isOpen = false;
-  @internalProperty() private displayLabel = '';
-  @internalProperty() private displayTags: TemplateResult[] = [];
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
+  @state() private isOpen = false;
+  @state() private displayLabel = '';
+  @state() private displayTags: TemplateResult[] = [];
 
   /** Enables multiselect. With this enabled, value will be an array. */
   @property({ type: Boolean, reflect: true }) multiple = false;

src/components/skeleton/skeleton.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./skeleton.scss';
 

src/components/spinner/spinner.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators';
 import styles from 'sass:./spinner.scss';
 
 /**

src/components/switch/switch.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./switch.scss';
@@ -25,7 +26,7 @@ export default class SlSwitch extends LitElement {
   private switchId = `switch-${++id}`;
   private labelId = `switch-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** The switch's name attribute. */
   @property() name: string;

src/components/tab-group/tab-group.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./tab-group.scss';
@@ -38,7 +39,7 @@ export default class SlTabGroup extends LitElement {
   private tabs: SlTab[] = [];
   private panels: SlTabPanel[] = [];
 
-  @internalProperty() private hasScrollControls = false;
+  @state() private hasScrollControls = false;
 
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';

src/components/tab-panel/tab-panel.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import styles from 'sass:./tab-panel.scss';
 
 let id = 0;

src/components/tab/tab.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./tab.scss';

src/components/tag/tag.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./tag.scss';

src/components/textarea/textarea.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -32,9 +33,9 @@ export default class SlTextarea extends LitElement {
   private labelId = `textarea-label-${id}`;
   private resizeObserver: ResizeObserver;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
 
   /** The textarea's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

src/components/tooltip/tooltip.ts

@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./tooltip.scss';

src/internal/decorators.ts

@@ -63,7 +63,7 @@ export class EventEmitter<T> {
 
 // @watch decorator
 //
-// Runs after an observed property changes, e.g. @property or @internalProperty. This will only run after the first
+// Runs after an observed property changes, e.g. @property or @state. This will only run after the first
 // update, so initial attribute => property mappings will not trigger the watch handler.
 //
 // Note that changing props in a watch handler *will* trigger a rerender. To make pre-update changes to observed

src/internal/form-control.ts

@@ -1,4 +1,4 @@
-import { html, TemplateResult } from 'lit-element';
+import { html, TemplateResult } from 'lit';
 import { classMap } from 'lit-html/directives/class-map';
 
 export interface FormControlProps {