diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index a5dddd327..14f9c71b4 100644 --- a/docs/resources/changelog.md +++ b/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 `` to use only CSS for styling - Updated `` to use an SVG and improved the indicator animation +- Updated to Lit 2.0 and lit-html 2.0 ## 2.0.0-beta.51 diff --git a/package-lock.json b/package-lock.json index ee34ddb0c..f2140ca9a 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 9777d07f3..63668c231 100644 --- a/package.json +++ b/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": { diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 5f503f950..3978248ea 100644 --- a/src/components/alert/alert.ts +++ b/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'; diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 78ea79724..d45bfec87 100644 --- a/src/components/avatar/avatar.ts +++ b/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'; diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index b92781884..653784ea2 100644 --- a/src/components/badge/badge.ts +++ b/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'; /** diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts index 928158f56..3872db636 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.ts +++ b/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'; diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 622a704a4..32f02d6cd 100644 --- a/src/components/button/button.ts +++ b/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'; diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 4755556f4..65b3c9568 100644 --- a/src/components/card/card.ts +++ b/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'; diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 09461045b..48bb939b8 100644 --- a/src/components/checkbox/checkbox.ts +++ b/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'; diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 884a88108..fff0aa213 100644 --- a/src/components/color-picker/color-picker.ts +++ b/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'; diff --git a/src/components/details/details.ts b/src/components/details/details.ts index c97358e08..45d76de17 100644 --- a/src/components/details/details.ts +++ b/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'; diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 68f428930..8c7445f3b 100644 --- a/src/components/dialog/dialog.ts +++ b/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'; diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index 4d3dfdc1e..9cc8e1b72 100644 --- a/src/components/drawer/drawer.ts +++ b/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'; diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 021fbf65b..678aa78e7 100644 --- a/src/components/dropdown/dropdown.ts +++ b/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'; diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index eada30532..10005de75 100644 --- a/src/components/icon-button/icon-button.ts +++ b/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'; diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index ed4a197fa..12aa56f40 100644 --- a/src/components/icon/icon.ts +++ b/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'; diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts index 3082c167f..769dd91b5 100644 --- a/src/components/image-comparer/image-comparer.ts +++ b/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'; diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 5cfbe495c..557c2b2a1 100644 --- a/src/components/input/input.ts +++ b/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'; diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 3f5f90953..fd7db91a0 100644 --- a/src/components/menu-item/menu-item.ts +++ b/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'; diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index 8c53eb4a0..a9ca019af 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/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'; /** diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts index 2d916caa9..d27bc623e 100644 --- a/src/components/qr-code/qr-code.ts +++ b/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'; diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index f44aab72e..f632558c4 100644 --- a/src/components/radio-group/radio-group.ts +++ b/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'; diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 6d4c7d0cb..0b7c02ce6 100644 --- a/src/components/radio/radio.ts +++ b/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'; diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 4f99cd5f6..6cede7fe6 100644 --- a/src/components/range/range.ts +++ b/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'; diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index fe43f188f..4e057bc7d 100644 --- a/src/components/rating/rating.ts +++ b/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'; diff --git a/src/components/responsive-media/responsive-media.ts b/src/components/responsive-media/responsive-media.ts index 5af78b789..8363a6d7e 100644 --- a/src/components/responsive-media/responsive-media.ts +++ b/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'; /** diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 970531c38..af4933195 100644 --- a/src/components/select/select.ts +++ b/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'; diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts index e64c92c9b..4c557d4b3 100644 --- a/src/components/skeleton/skeleton.ts +++ b/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'; /** diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 236f83750..cf189d5c5 100644 --- a/src/components/switch/switch.ts +++ b/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'; diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 6f87bd69c..1ce0c6767 100644 --- a/src/components/tab-group/tab-group.ts +++ b/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'; diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts index 8bbd9e35b..d676a23b7 100644 --- a/src/components/tab/tab.ts +++ b/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'; diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index 760d3aedb..6cd1e4be5 100644 --- a/src/components/tag/tag.ts +++ b/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'; diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 8e4c68ea7..11398976b 100644 --- a/src/components/textarea/textarea.ts +++ b/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'; diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index fde301d65..76b21d97c 100644 --- a/src/components/tooltip/tooltip.ts +++ b/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'; diff --git a/src/internal/form-control.ts b/src/internal/form-control.ts index 8a90f7e35..f6e1eaabc 100644 --- a/src/internal/form-control.ts +++ b/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: {