update to lit 2.0

docs/resources/changelog.md

@@ -17,6 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in the Remix Icons example where some icons would 404 [#528](https://github.com/shoelace-style/shoelace/issues/528)
 - Updated `<sl-progress-ring>` to use only CSS for styling
 - Updated `<sl-spinner>` to use an SVG and improved the indicator animation
+- Updated to Lit 2.0 and lit-html 2.0
 
 ## 2.0.0-beta.51
 

package-lock.json

@@ -12,8 +12,8 @@
         "@popperjs/core": "^2.7.0",
         "@shoelace-style/animations": "^1.1.0",
         "color": "^3.1.3",
-        "lit": "^2.0.0-rc.3",
-        "lit-html": "^2.0.0-rc.4",
+        "lit": "^2.0.0",
+        "lit-html": "^2.0.0",
         "qr-creator": "^1.0.0"
       },
       "devDependencies": {
@@ -175,9 +175,9 @@
       }
     },
     "node_modules/@lit/reactive-element": {
-      "version": "1.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz",
-      "integrity": "sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0.tgz",
+      "integrity": "sha512-Kpgenb8UNFsKCsFhggiVvUkCbcFQSd6N8hffYEEGjz27/4rw3cTSsmP9t3q1EHOAsdum60Wo64HvuZDFpEwexA=="
     },
     "node_modules/@mdn/browser-compat-data": {
       "version": "3.3.5",
@@ -800,9 +800,9 @@
       }
     },
     "node_modules/@types/trusted-types": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz",
-      "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
     "node_modules/@types/uuid": {
       "version": "8.3.0",
@@ -6145,30 +6145,30 @@
       "dev": true
     },
     "node_modules/lit": {
-      "version": "2.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-rc.3.tgz",
-      "integrity": "sha512-UZDLWuspl7saA+WvS0e+TE3NdGGE05hOIwUPTWiibs34c5QupcEzpjB/aElt79V9bELQVNbUUwa0Ow7D1Wuszw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0.tgz",
+      "integrity": "sha512-pqi5O/wVzQ9Bn4ERRoYQlt1EAUWyY5Wv888vzpoArbtChc+zfUv1XohRqSdtQZYCogl0eHKd+MQwymg2XJfECg==",
       "dependencies": {
-        "@lit/reactive-element": "^1.0.0-rc.2",
-        "lit-element": "^3.0.0-rc.2",
-        "lit-html": "^2.0.0-rc.4"
+        "@lit/reactive-element": "^1.0.0",
+        "lit-element": "^3.0.0",
+        "lit-html": "^2.0.0"
       }
     },
     "node_modules/lit-element": {
-      "version": "3.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-rc.2.tgz",
-      "integrity": "sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0.tgz",
+      "integrity": "sha512-oPqRhhBBhs+AlI62QLwtWQNU/bNK/h2L1jI3IDroqZubo6XVAkyNy2dW3CRfjij8mrNlY7wULOfyyKKOnfEePA==",
       "dependencies": {
-        "@lit/reactive-element": "^1.0.0-rc.2",
-        "lit-html": "^2.0.0-rc.3"
+        "@lit/reactive-element": "^1.0.0",
+        "lit-html": "^2.0.0"
       }
     },
     "node_modules/lit-html": {
-      "version": "2.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-rc.4.tgz",
-      "integrity": "sha512-WSLGu3vxq7y8q/oOd9I3zxyBELNLLiDk6gAYoKK4PGctI5fbh6lhnO/jVBdy0PV/vTc+cLJCA/occzx3YoNPeg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0.tgz",
+      "integrity": "sha512-tJsCapCmc0vtLj6harqd6HfCxnlt/RSkgowtz4SC9dFE3nSL38Tb33I5HMDiyJsRjQZRTgpVsahrnDrR9wg27w==",
       "dependencies": {
-        "@types/trusted-types": "^1.0.1"
+        "@types/trusted-types": "^2.0.2"
       }
     },
     "node_modules/localtunnel": {
@@ -11290,9 +11290,9 @@
       }
     },
     "@lit/reactive-element": {
-      "version": "1.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz",
-      "integrity": "sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0.tgz",
+      "integrity": "sha512-Kpgenb8UNFsKCsFhggiVvUkCbcFQSd6N8hffYEEGjz27/4rw3cTSsmP9t3q1EHOAsdum60Wo64HvuZDFpEwexA=="
     },
     "@mdn/browser-compat-data": {
       "version": "3.3.5",
@@ -11898,9 +11898,9 @@
       }
     },
     "@types/trusted-types": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz",
-      "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
     "@types/uuid": {
       "version": "8.3.0",
@@ -16167,30 +16167,30 @@
       "dev": true
     },
     "lit": {
-      "version": "2.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-rc.3.tgz",
-      "integrity": "sha512-UZDLWuspl7saA+WvS0e+TE3NdGGE05hOIwUPTWiibs34c5QupcEzpjB/aElt79V9bELQVNbUUwa0Ow7D1Wuszw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0.tgz",
+      "integrity": "sha512-pqi5O/wVzQ9Bn4ERRoYQlt1EAUWyY5Wv888vzpoArbtChc+zfUv1XohRqSdtQZYCogl0eHKd+MQwymg2XJfECg==",
       "requires": {
-        "@lit/reactive-element": "^1.0.0-rc.2",
-        "lit-element": "^3.0.0-rc.2",
-        "lit-html": "^2.0.0-rc.4"
+        "@lit/reactive-element": "^1.0.0",
+        "lit-element": "^3.0.0",
+        "lit-html": "^2.0.0"
       }
     },
     "lit-element": {
-      "version": "3.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-rc.2.tgz",
-      "integrity": "sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0.tgz",
+      "integrity": "sha512-oPqRhhBBhs+AlI62QLwtWQNU/bNK/h2L1jI3IDroqZubo6XVAkyNy2dW3CRfjij8mrNlY7wULOfyyKKOnfEePA==",
       "requires": {
-        "@lit/reactive-element": "^1.0.0-rc.2",
-        "lit-html": "^2.0.0-rc.3"
+        "@lit/reactive-element": "^1.0.0",
+        "lit-html": "^2.0.0"
       }
     },
     "lit-html": {
-      "version": "2.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-rc.4.tgz",
-      "integrity": "sha512-WSLGu3vxq7y8q/oOd9I3zxyBELNLLiDk6gAYoKK4PGctI5fbh6lhnO/jVBdy0PV/vTc+cLJCA/occzx3YoNPeg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0.tgz",
+      "integrity": "sha512-tJsCapCmc0vtLj6harqd6HfCxnlt/RSkgowtz4SC9dFE3nSL38Tb33I5HMDiyJsRjQZRTgpVsahrnDrR9wg27w==",
       "requires": {
-        "@types/trusted-types": "^1.0.1"
+        "@types/trusted-types": "^2.0.2"
       }
     },
     "localtunnel": {

package.json

@@ -42,8 +42,8 @@
     "@popperjs/core": "^2.7.0",
     "@shoelace-style/animations": "^1.1.0",
     "color": "^3.1.3",
-    "lit": "^2.0.0-rc.3",
-    "lit-html": "^2.0.0-rc.4",
+    "lit": "^2.0.0",
+    "lit-html": "^2.0.0",
     "qr-creator": "^1.0.0"
   },
   "devDependencies": {

src/components/alert/alert.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';

src/components/avatar/avatar.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import styles from './avatar.styles';
 
 import '../icon/icon';

src/components/badge/badge.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import styles from './badge.styles';
 
 /**

src/components/breadcrumb-item/breadcrumb-item.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { hasSlot } from '../../internal/slot';
 import styles from './breadcrumb-item.styles';
 

src/components/button/button.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { emit } from '../../internal/event';
 import { hasSlot } from '../../internal/slot';
 import styles from './button.styles';

src/components/card/card.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { hasSlot } from '../../internal/slot';
 import styles from './card.styles';
 

src/components/checkbox/checkbox.ts

@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { live } from 'lit-html/directives/live';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { live } from 'lit-html/directives/live.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './checkbox.styles';

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

@@ -1,9 +1,9 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { live } from 'lit-html/directives/live';
-import { styleMap } from 'lit-html/directives/style-map';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { live } from 'lit-html/directives/live.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { clamp } from '../../internal/math';

src/components/details/details.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { animateTo, stopAnimations, shimKeyframesHeightAuto } from '../../internal/animate';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';

src/components/dialog/dialog.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';

src/components/drawer/drawer.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';

src/components/dropdown/dropdown.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { Instance as PopperInstance, createPopper } from '@popperjs/core/dist/esm';
 import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit } from '../../internal/event';

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

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import styles from './icon-button.styles';
 
 import '../icon/icon';

src/components/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { getIconLibrary, watchIcon, unwatchIcon } from './library';

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

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { clamp } from '../../internal/math';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';

src/components/input/input.ts

@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { classMap } from 'lit-html/directives/class-map';
-import { live } from 'lit-html/directives/live';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { live } from 'lit-html/directives/live.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';

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

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { watch } from '../../internal/watch';
 import styles from './menu-item.styles';
 

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

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { styleMap } from 'lit-html/directives/style-map';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import styles from './progress-bar.styles';
 
 /**

src/components/qr-code/qr-code.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { watch } from '../../internal/watch';
 import QrCreator from 'qr-creator';
 import styles from './qr-code.styles';

src/components/radio-group/radio-group.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import type SlRadio from '../radio/radio';
 import styles from './radio-group.styles';
 

src/components/radio/radio.ts

@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { live } from 'lit-html/directives/live';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { live } from 'lit-html/directives/live.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './radio.styles';

src/components/range/range.ts

@@ -1,9 +1,9 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { emit } from '../../internal/event';
-import { live } from 'lit-html/directives/live';
+import { live } from 'lit-html/directives/live.js';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';

src/components/rating/rating.ts

@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { styleMap } from 'lit-html/directives/style-map';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { clamp } from '../../internal/math';

src/components/responsive-media/responsive-media.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import styles from './responsive-media.styles';
 
 /**

src/components/select/select.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';

src/components/skeleton/skeleton.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import styles from './skeleton.styles';
 
 /**

src/components/switch/switch.ts

@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { live } from 'lit-html/directives/live';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { live } from 'lit-html/directives/live.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './switch.styles';

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

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { getOffset } from '../../internal/offset';

src/components/tab/tab.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { emit } from '../../internal/event';
 import styles from './tab.styles';
 

src/components/tag/tag.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { emit } from '../../internal/event';
 import styles from './tag.styles';
 

src/components/textarea/textarea.ts

@@ -1,9 +1,9 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { emit } from '../../internal/event';
-import { live } from 'lit-html/directives/live';
+import { live } from 'lit-html/directives/live.js';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';

src/components/tooltip/tooltip.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { Instance as PopperInstance, createPopper } from '@popperjs/core/dist/esm';
 import { animateTo, parseDuration, stopAnimations } from '../../internal/animate';
 import { emit, waitForEvent } from '../../internal/event';

src/internal/form-control.ts

@@ -1,6 +1,6 @@
 import { html, TemplateResult } from 'lit';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 export const renderFormControl = (
   props: {