@brightspace-ui/core 2.1.3 → 2.3.0

package/components/dropdown/dropdown-content.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { DropdownContentMixin } from './dropdown-content-mixin.js';
 import { dropdownContentStyles } from './dropdown-content-styles.js';
 

package/components/dropdown/dropdown-context-menu.js

@@ -1,5 +1,5 @@
 import '../button/button-icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor-mixin.js';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';

package/components/dropdown/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { DropdownContentMixin } from './dropdown-content-mixin.js';
 import { dropdownContentStyles } from './dropdown-content-styles.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';

package/components/dropdown/dropdown-more.js

@@ -1,5 +1,5 @@
 import '../button/button-icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor-mixin.js';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';

package/components/dropdown/dropdown-opener-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 
 export const dropdownOpenerStyles = css`
 	:host {

package/components/dropdown/dropdown-tabs.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { DropdownContentMixin } from './dropdown-content-mixin.js';
 import { dropdownContentStyles } from './dropdown-content-styles.js';
 

package/components/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
 

package/components/expand-collapse/expand-collapse-content.js

@@ -1,5 +1,5 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { css, html, LitElement } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 

package/components/filter/README.md

@@ -131,6 +131,25 @@ Filter with a single dimension:
 </div>
 ```
 
+### Iterating Over Dimensions and Values
+
+Lit tries to reuse DOM nodes when it can to help with performance, but in this case we don't want unique dimensions and values to be reused - otherwise we can't detect additions/removals properly.
+
+If you are going to be constructing your dimensions and/or dimension values by iterating over an array or object (using `forEach,` , `map`, etc.), you'll want to use the [Lit `repeat` directive with a `KeyFn` set](https://lit.dev/docs/templates/directives/#repeat) instead to tell Lit not to reuse a DOM node if the `key` has changed:
+```js
+import { repeat } from 'lit/directives/repeat.js';
+...
+return html`<d2l-filter>
+	${repeat(this._dimensions, (dim) => dim.key, dim => html`
+		<d2l-filter-dimension-set key="${dim.key}" text=${dim.text}>
+			${repeat(dim._values, (value) => value.key, value => html`
+				<d2l-filter-dimension-set-value key="${value.kay}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
+			`)}
+		</d2l-filter-dimension-set>
+	`)}
+</d2l-filter>`;
+```
+
 ### Accessibility
 The filter will announce changes to filter selections, search results, and when filters are being cleared. It is up to the consumer to then announce when these changes have propagated and resulted in new/loaded/updated data on the page. This is very important for screenreader users who are not able to visually see the page changing behind the filter control as selections are made.
 

package/components/filter/demo/filter-search-demo.js

@@ -1,7 +1,7 @@
 import '../filter.js';
 import '../filter-dimension-set.js';
 import '../filter-dimension-set-value.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 
 const initialData = [
 	{ key: 'admin', text: 'Admin', selected: false },

package/components/filter/filter-dimension-set-value.js

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element/lit-element.js';
+import { LitElement } from 'lit';
 
 /**
  * A component to represent a possible value that can be selected for a dimension set (the main filter dimension type).

package/components/filter/filter-dimension-set.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 
 /**
  * A component to represent the main filter dimension type - a set of possible values that can be selected.

package/components/filter/filter.js

@@ -16,11 +16,11 @@ import '../selection/selection-select-all.js';
 import '../selection/selection-summary.js';
 
 import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { announce } from '../../helpers/announce.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';

package/components/focus-trap/focus-trap.js

@@ -1,7 +1,7 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { forceFocusVisible, getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 
 /**

package/components/form/demo/form-demo.js

@@ -7,7 +7,7 @@ import '../../inputs/input-textarea.js';
 import '../../validation/validation-custom.js';
 import '../form.js';
 import './form-panel-demo.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { inputStyles } from '../../inputs/input-styles.js';
 import { selectStyles } from '../../inputs/input-select-styles.js';
 

package/components/form/demo/form-dialog-demo.js

@@ -6,7 +6,7 @@ import '../../inputs/input-text.js';
 import '../../validation/validation-custom.js';
 import '../form.js';
 import './form-panel-demo.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { inputStyles } from '../../inputs/input-styles.js';
 import { selectStyles } from '../../inputs/input-select-styles.js';
 

package/components/form/demo/form-native-demo.js

@@ -5,7 +5,7 @@ import '../../inputs/input-date-time-range.js';
 import '../../inputs/input-text.js';
 import '../../validation/validation-custom.js';
 import '../form-native.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { inputStyles } from '../../inputs/input-styles.js';
 import { selectStyles } from '../../inputs/input-select-styles.js';
 

package/components/form/demo/form-panel-demo.js

@@ -5,7 +5,7 @@ import '../../expand-collapse/expand-collapse-content.js';
 import '../../inputs/input-number.js';
 import '../../inputs/input-text.js';
 import '../form.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { heading3Styles } from '../../typography/styles.js';
 import { inputStyles } from '../../inputs/input-styles.js';
 

package/components/form/form-errory-summary.js

@@ -1,6 +1,6 @@
 import '../alert/alert.js';
 import '../expand-collapse/expand-collapse-content.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { linkStyles } from '../link/link.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';

package/components/form/form-native.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { findFormElements, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
 import { FormMixin } from './form-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';

package/components/form/form.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
 import { FormMixin } from './form-mixin.js';
 

package/components/hierarchical-view/README.md

@@ -9,7 +9,7 @@ The `d2l-hierarchical-view` component uses the `d2l-hierarchical-view-mixin` for
 <!-- docs: demo code autoSize:false display:block size:medium -->
 ```html
 <script type="module">
-  import { css, html,LitElement } from 'lit-element/lit-element.js';
+  import { css, html,LitElement } from 'lit';
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/hierarchical-view/hierarchical-view.js';
 

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -1,6 +1,6 @@
 import { findComposedAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

package/components/hierarchical-view/hierarchical-view.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 
 class HierarchicalView extends HierarchicalViewMixin(LitElement) {

package/components/html-block/README.md

@@ -48,8 +48,8 @@ To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https
 
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
-  import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+  import { html, LitElement } from 'lit';
+  import { unsafeHTML } from 'lit/directives/unsafe-html.js';
   import '@brightspace-ui/core/components/icons/icon.js';
 
   class SomeComponent extends LitElement {

package/components/html-block/demo/html-block.html

@@ -465,8 +465,8 @@
 			</d2l-demo-snippet>
 
 			<d2l-code-view language="javascript">
-				import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-				import { html, LitElement } from 'lit-element/lit-element.js';
+				import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+				import { html, LitElement } from 'lit';
 
 				class SomeComponent extends LitElement {
 
@@ -486,8 +486,8 @@
 		</d2l-demo-page>
 
 		<script type="module">
-			import { html, LitElement } from 'lit-element/lit-element.js';
-			import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+			import { html, LitElement } from 'lit';
+			import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 			class SomeComponent extends LitElement {
 

package/components/html-block/html-block.js

@@ -1,5 +1,5 @@
 import '../colors/colors.js';
-import { css, LitElement } from 'lit-element/lit-element.js';
+import { css, LitElement } from 'lit';
 import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
 import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';

package/components/icons/demo/icon-color-override.js

@@ -1,5 +1,5 @@
 import '../../colors/colors.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 
 class IconColorOverride extends LitElement {
 

package/components/icons/demo/icon-size-override.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 
 class IconSizeOverride extends LitElement {
 

package/components/icons/icon-custom.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { fixSvg } from './fix-svg.js';
 import { iconStyles } from './icon-styles.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';

package/components/icons/icon-styles.js

@@ -1,5 +1,5 @@
 import '../colors/colors.js';
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 
 export const iconStyles = css`
 	:host {

package/components/icons/icon.js

@@ -1,11 +1,11 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { fixSvg } from './fix-svg.js';
 import { iconStyles } from './icon-styles.js';
 import { loadSvg } from '../../generated/icons/presetIconLoader.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { runAsync } from '../../directives/run-async/run-async.js';
-import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 class Icon extends RtlMixin(LitElement) {
 

package/components/inputs/demo/input-radio-label-simple-test.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { radioStyles } from '../input-radio-styles.js';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
 

package/components/inputs/demo/input-radio-label-test.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { radioStyles } from '../input-radio-styles.js';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
 

package/components/inputs/demo/input-radio-solo-test.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { radioStyles } from '../input-radio-styles.js';
 
 class TestInputRadioSolo extends LitElement {

package/components/inputs/demo/input-radio-spacer-test.js

@@ -1,5 +1,5 @@
 import '../input-radio-spacer.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { radioStyles } from '../input-radio-styles.js';
 
 class TestInputRadioSpacer extends LitElement {

package/components/inputs/demo/input-select-test.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
 import { selectStyles } from '../input-select-styles.js';
 import { SkeletonMixin } from '../../../components/skeleton/skeleton-mixin.js';

package/components/inputs/docs/input-checkbox.md

@@ -121,7 +121,7 @@ As an alternative to using the `<d2l-input-checkbox>` custom element, you can st
 <!-- docs: demo code display:block -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { checkboxStyles } from '@brightspace-ui/core/components/inputs/input-checkbox.js';
 
   class MyCheckboxElem extends LitElement {

package/components/inputs/docs/input-radio.md

@@ -42,7 +42,7 @@ For disabled items, add the `d2l-input-radio-label-disabled` class on the label
 <!-- docs: demo code display:block -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
   import { radioStyles } from '@brightspace-ui/core/components/inputs/input-radio-styles.js';
 
@@ -82,7 +82,7 @@ If you'd like to manually link the radio input with a label, or use an ARIA labe
 <!-- docs: demo live name:d2l-test-input-radio-solo display:block -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { radioStyles } from '@brightspace-ui/core/components/inputs/input-radio-styles.js';
 
   class MyRadioElem extends LitElement {
@@ -126,7 +126,7 @@ To align related content below radio buttons, the `d2l-input-radio-spacer` eleme
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-radio-spacer.js';
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { radioStyles } from '@brightspace-ui/core/components/inputs/input-radio-styles.js';
 
   class MyRadioElem extends LitElement {

package/components/inputs/docs/input-select-styles.md

@@ -5,7 +5,7 @@ A Select List allows the user to select a single option out of a relatively larg
 <!-- docs: demo -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
 
   class MySelectElem extends LitElement {
@@ -59,7 +59,7 @@ Note: in order for RTL to function correctly, make sure your component uses the
 <!-- docs: demo live name:d2l-test-input-select -->
 ```html
 <script type="module">
-  import { css, html, LitElement } from 'lit-element/lit-element.js';
+  import { css, html, LitElement } from 'lit';
   import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
   import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
   import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';

package/components/inputs/docs/input-text.md

@@ -149,7 +149,7 @@ As an alternative to using the `<d2l-input-text>` custom element, you can style
 <!-- docs: demo code -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { inputStyles } from '@brightspace-ui/core/components/inputs/input-styles.js';
 
   class MyTextInputElem extends LitElement {
@@ -265,7 +265,7 @@ Native `<textarea>` elements can be styled by importing `input-styles.js` into y
 <!-- docs: demo code -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { inputStyles } from '@brightspace-ui/core/components/inputs/input-styles.js';
 
   class MyTextareaInputElem extends LitElement {

package/components/inputs/input-checkbox-spacer.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**

package/components/inputs/input-checkbox.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/inputs/input-date-range.js

@@ -2,12 +2,12 @@ import './input-date.js';
 import './input-date-time-range-to.js';
 import './input-fieldset.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { formatDateTimeInISO, getDateFromISODate, parseISODateTime } from '../../helpers/dateTime.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/inputs/input-date-time-range-to.js

@@ -1,7 +1,7 @@
 import './input-text.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/inputs/input-date-time-range.js

@@ -3,12 +3,12 @@ import './input-date-time-range-to.js';
 import './input-fieldset.js';
 import '../tooltip/tooltip.js';
 import { convertLocalToUTCDateTime, convertUTCToLocalDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { formatDateTimeInISO, getAdjustedTime, getDateFromISODateTime, getDateNoConversion, parseISODateTime } from '../../helpers/dateTime.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/inputs/input-date-time.js

@@ -2,7 +2,7 @@ import './input-date.js';
 import './input-fieldset.js';
 import '../tooltip/tooltip.js';
 import { convertUTCToLocalDateTime, formatDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { formatDateInISO,
 	formatDateInISOTime,
 	formatDateTimeInISO,
@@ -18,12 +18,12 @@ import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getDefaultTime } from './input-time.js';
 import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 export function _formatLocalDateTimeInISO(date, time) {
 	const dateObj = parseISODate(date);

package/components/inputs/input-date.js

@@ -5,18 +5,18 @@ import '../dropdown/dropdown-content.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import './input-text.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { formatDate, parseDate } from '@brightspace-ui/intl/lib/dateTime.js';
 import { formatDateInISO, getDateFromISODate, getDateTimeDescriptorShared, getToday } from '../../helpers/dateTime.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-width: 615px)');
 

package/components/inputs/input-fieldset.js

@@ -1,5 +1,5 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';

package/components/inputs/input-label-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 
 export const inputLabelStyles = css`
 	.d2l-input-label {

package/components/inputs/input-number.js

@@ -1,10 +1,10 @@
 import './input-text.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { formatNumber, getNumberDescriptor, parseNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/inputs/input-percent.js

@@ -1,8 +1,8 @@
 import './input-number.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';

package/components/inputs/input-radio-spacer.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**

package/components/inputs/input-radio-styles.js

@@ -1,5 +1,5 @@
 import '../colors/colors.js';
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 
 export const radioStyles = css`
 	.d2l-input-radio,