@brightspace-ui/core 2.1.3 → 2.3.0

package/README.md

@@ -54,6 +54,7 @@ npm install @brightspace-ui/core
   * [Switch](components/switch/): switch component with on/off semantics
   * [Table](components/table/): table styles, column sorting and overflow handling
   * [Tabs](components/tabs/): tab and tab-panel components
+  * [Tag List](components/tag-list/): tag-list and tag-list-item components
   * [Tooltip](components/tooltip/): tooltip components
   * [Typography](components/typography/): typography styles and components
   * [Validation](components/validation/): plugin custom validation logic to native and custom form elements

package/components/alert/alert-toast.js

@@ -1,6 +1,6 @@
 import './alert.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 

package/components/alert/alert.js

@@ -2,8 +2,8 @@ import '../button/button-icon.js';
 import '../button/button-subtle.js';
 import '../colors/colors.js';
 import { bodyCompactStyles, bodyStandardStyles } from '../typography/styles.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 { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 

package/components/backdrop/backdrop.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';
 import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 

package/components/breadcrumbs/breadcrumb-current-page.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 
 /**
  * An entry within a <d2l-breadcrumbs> parent representing the current page.

package/components/breadcrumbs/breadcrumb.js

@@ -1,7 +1,7 @@
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { linkStyles } from '../link/link.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 

package/components/breadcrumbs/breadcrumbs.js

@@ -1,5 +1,5 @@
 import './breadcrumb.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 

package/components/button/button-icon.js

@@ -1,12 +1,12 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.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 { ButtonMixin } from './button-mixin.js';
 import { buttonStyles } from './button-styles.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 { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';
 

package/components/button/button-styles.js

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

package/components/button/button-subtle.js

@@ -1,10 +1,10 @@
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { ButtonMixin } from './button-mixin.js';
 import { buttonStyles } from './button-styles.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 { labelStyles } from '../typography/styles.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -40,6 +40,12 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 			 */
 			iconRight: { type: Boolean, reflect: true, attribute: 'icon-right' },
 
+			/**
+			 * Whether to render the slimmer version of the button
+			 * @type {boolean}
+			 */
+			slim: { type: Boolean, reflect: true },
+
 			/**
 			 * REQUIRED: Text for the button
 			 * @type {string}
@@ -59,19 +65,41 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 				}
 
 				button {
+					--d2l-button-subtle-padding-inline-start: 0.6rem;
+					--d2l-button-subtle-padding-inline-end: 0.6rem;
 					background-color: transparent;
 					border-color: transparent;
 					font-family: inherit;
-					padding: 0.55rem 0.6rem;
+					padding: 0 var(--d2l-button-subtle-padding-inline-end) 0 var(--d2l-button-subtle-padding-inline-start);
 					position: relative;
 				}
 
+				:host([dir="rtl"]) button {
+					padding: 0 var(--d2l-button-subtle-padding-inline-start) 0 var(--d2l-button-subtle-padding-inline-end);
+				}
+
+				:host([slim]) button {
+					--d2l-button-subtle-padding-inline-start: 0.5rem;
+					--d2l-button-subtle-padding-inline-end: 0.5rem;
+					min-height: 1.5rem;
+				}
+
+				:host([slim][icon]) button {
+					--d2l-button-subtle-padding-inline-start: 0.4rem;
+					--d2l-button-subtle-padding-inline-end: 0.5rem;
+				}
+
+				:host([slim][icon][icon-right]) button {
+					--d2l-button-subtle-padding-inline-start: 0.5rem;
+					--d2l-button-subtle-padding-inline-end: 0.4rem;
+				}
+
 				:host([h-align="text"]) button {
-					left: -0.6rem;
+					left: calc(var(--d2l-button-subtle-padding-inline-start) * -1);
 				}
 				:host([dir="rtl"][h-align="text"]) button {
 					left: 0;
-					right: -0.6rem;
+					right: calc(var(--d2l-button-subtle-padding-inline-start) * -1);
 				}
 
 				/* Firefox includes a hidden border which messes up button dimensions */
@@ -98,24 +126,17 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 				:host([active]:not([disabled])) button .d2l-button-subtle-content {
 					color: var(--d2l-color-celestine-minus-1);
 				}
-				:host([icon]) .d2l-button-subtle-content {
+				:host([icon]) .d2l-button-subtle-content,
+				:host([dir="rtl"][icon][icon-right]) .d2l-button-subtle-content {
 					padding-left: 1.2rem;
+					padding-right: 0;
 				}
+				:host([dir="rtl"][icon]) .d2l-button-subtle-content,
 				:host([icon][icon-right]) .d2l-button-subtle-content {
 					padding-left: 0;
 					padding-right: 1.2rem;
 				}
 
-				:host([dir="rtl"][icon]) .d2l-button-subtle-content {
-					padding-left: 0;
-					padding-right: 1.2rem;
-				}
-
-				:host([dir="rtl"][icon][icon-right]) .d2l-button-subtle-content {
-					padding-left: 1.2rem;
-					padding-right: 0;
-				}
-
 				d2l-icon.d2l-button-subtle-icon {
 					color: var(--d2l-color-celestine);
 					display: none;
@@ -125,19 +146,21 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 					transform: translateY(-50%);
 					width: 0.9rem;
 				}
+
 				button:hover:not([disabled]) d2l-icon.d2l-button-subtle-icon,
 				button:focus:not([disabled]) d2l-icon.d2l-button-subtle-icon,
 				:host([active]:not([disabled])) button d2l-icon.d2l-button-subtle-icon {
 					color: var(--d2l-color-celestine-minus-1);
 				}
+
 				:host([icon]) d2l-icon.d2l-button-subtle-icon {
 					display: inline-block;
 				}
 				:host([icon][icon-right]) d2l-icon.d2l-button-subtle-icon {
-					right: 0.6rem;
+					right: var(--d2l-button-subtle-padding-inline-end);
 				}
 				:host([dir="rtl"][icon][icon-right]) d2l-icon.d2l-button-subtle-icon {
-					left: 0.6rem;
+					left: var(--d2l-button-subtle-padding-inline-end);
 					right: auto;
 				}
 
@@ -152,6 +175,7 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 	constructor() {
 		super();
 		this.iconRight = false;
+		this.slim = false;
 
 		/** @internal */
 		this._buttonId = getUniqueId();

package/components/button/button.js

@@ -1,10 +1,10 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { ButtonMixin } from './button-mixin.js';
 import { buttonStyles } from './button-styles.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 { labelStyles } from '../typography/styles.js';
 
 /**

package/components/button/demo/button-subtle.html

@@ -17,7 +17,8 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-subtle id="normal" text="Subtle Button"></d2l-button-subtle>
+					<d2l-button-subtle text="Subtle Button"></d2l-button-subtle>
+					<d2l-button-subtle slim text="Slim Subtle Button"></d2l-button-subtle>
 				</template>
 			</d2l-demo-snippet>
 
@@ -25,7 +26,8 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-subtle id="disabled" text="Subtle Button" disabled></d2l-button-subtle>
+					<d2l-button-subtle text="Subtle Button" disabled></d2l-button-subtle>
+					<d2l-button-subtle slim text="Slim Subtle Button" disabled></d2l-button-subtle>
 				</template>
 			</d2l-demo-snippet>
 
@@ -33,7 +35,8 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-subtle id="disabled" text="Subtle Button" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-subtle>
+					<d2l-button-subtle text="Subtle Button" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-subtle>
+					<d2l-button-subtle slim text="Slim Subtle Button" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-subtle>
 				</template>
 			</d2l-demo-snippet>
 
@@ -41,7 +44,8 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-subtle id="with-icon" icon="tier1:bookmark-hollow" text="Subtle Button"></d2l-button-subtle>
+					<d2l-button-subtle icon="tier1:bookmark-hollow" text="Subtle Button"></d2l-button-subtle>
+					<d2l-button-subtle slim icon="tier1:bookmark-hollow" text="Slim Subtle Button"></d2l-button-subtle>
 				</template>
 			</d2l-demo-snippet>
 
@@ -49,7 +53,8 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-subtle id="icon-right" icon="tier1:chevron-down" text="Subtle Button" icon-right></d2l-button-subtle>
+					<d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right></d2l-button-subtle>
+					<d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right></d2l-button-subtle>
 				</template>
 			</d2l-demo-snippet>
 
@@ -60,6 +65,12 @@
 					<d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
 					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
 					<d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-subtle>
+					<br>
+					<d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text"></d2l-button-subtle>
+					<br>
+					<d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text"></d2l-button-subtle>
+					<br>
+					<d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text"></d2l-button-subtle>
 				</template>
 			</d2l-demo-snippet>
 

package/components/button/floating-buttons.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import '../../helpers/requestIdleCallback.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { getBoundingAncestor, getComposedParent } from '../../helpers/dom.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-height: 500px)');
 

package/components/calendar/calendar.js

@@ -1,13 +1,13 @@
 import '../button/button-icon.js';
 import '../colors/colors.js';
 import { bodySmallStyles, heading4Styles } from '../typography/styles.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { formatDateInISO, getClosestValidDate, getDateFromDateObj, getDateFromISODate, getDateTimeDescriptorShared, getToday, isDateInRange } from '../../helpers/dateTime.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { formatDate } from '@brightspace-ui/intl/lib/dateTime.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 { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';

package/components/card/card-content-meta.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';
 
 /**
  * A helper for providing layout/style for meta data within the `content` slot.

package/components/card/card-content-title.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 
 /**
  * A helper for providing layout/style for a title within the `content` slot.

package/components/card/card-footer-link.js

@@ -1,8 +1,8 @@
 import '../colors/colors.js';
 import '../count-badge/count-badge-icon.js';
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 

package/components/card/card-loading-shimmer.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';
 
 /**
  * A card layout component for when the card header is loading.

package/components/card/card.js

@@ -1,12 +1,12 @@
 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 { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 /**
  * A container element that provides specific layout using several slots.

package/components/colors/demo/color-swatch.js

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

package/components/count-badge/count-badge-icon.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { CountBadgeMixin } from './count-badge-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';
 
 class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 

package/components/count-badge/count-badge-mixin.js

@@ -1,13 +1,13 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html } from 'lit-element/lit-element.js';
+import { css, html } from 'lit';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.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';
 
 const maxBadgeDigits = 5;
 

package/components/count-badge/count-badge.js

@@ -1,8 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { CountBadgeMixin } from './count-badge-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';
 
 class CountBadge extends CountBadgeMixin(LitElement) {
 

package/components/demo/code-dark-plus-styles.js

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

package/components/demo/code-tomorrow-styles.js

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

package/components/demo/code-view-styles.js

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

package/components/demo/code-view.js

@@ -1,8 +1,8 @@
 import 'prismjs/prism.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { styles } from './code-view-styles.js';
 import { themeStyles } from './code-dark-plus-styles.js';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 class CodeView extends LitElement {
 

package/components/demo/demo-page.js

@@ -2,7 +2,7 @@ import './demo-snippet.js';
 import './code-view.js';
 import '../colors/colors.js';
 import '../typography/typography.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { heading2Styles } from '../typography/styles.js';
 
 document.body.classList.add('d2l-typography');

package/components/demo/demo-snippet.js

@@ -1,7 +1,7 @@
 import './code-view.js';
 import '../button/button-icon.js';
 import '../switch/switch.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 
 class DemoSnippet extends LitElement {
 

package/components/dialog/demo/dialog-async-content.js

@@ -1,7 +1,7 @@
 import '../../list/list.js';
 import '../../list/list-item.js';
 import '../../list/list-item-content.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { InitialStateError, runAsync } from '../../../directives/run-async/run-async.js';
 
 class DialogAsyncContent extends LitElement {

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

@@ -1,6 +1,6 @@
 import '../../button/button.js';
 import '../dialog.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 
 class DialogContainer extends LitElement {
 

package/components/dialog/dialog-confirm.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { forceFocusVisible } from '../../helpers/focus.js';

package/components/dialog/dialog-fullscreen.js

@@ -1,14 +1,14 @@
 import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { heading2Styles, heading3Styles } from '../typography/styles.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.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), (max-height: 420px) and (max-width: 900px)');
 

package/components/dialog/dialog-mixin.js

@@ -3,12 +3,12 @@ import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { forceFocusVisible, getComposedActiveElement, getNextFocusable, tryApplyFocus } from '../../helpers/focus.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { html } from 'lit-element/lit-element.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 
 window.D2L = window.D2L || {};

package/components/dialog/dialog-styles.js

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

package/components/dialog/dialog.js

@@ -2,15 +2,15 @@ import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
 import '../../helpers/viewport-size.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.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 { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { heading3Styles } from '../typography/styles.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 { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px) and (max-width: 900px)');
 

package/components/dropdown/dropdown-button-subtle.js

@@ -1,8 +1,8 @@
 import '../button/button-subtle.js';
-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';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * A "d2l-button-subtle" opener for dropdown content.

package/components/dropdown/dropdown-button.js

@@ -1,6 +1,6 @@
 import '../button/button.js';
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';

package/components/dropdown/dropdown-content-mixin.js

@@ -4,11 +4,11 @@ import '../focus-trap/focus-trap.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { findComposedAncestor, getBoundingAncestor, isComposedAncestor, isVisible } from '../../helpers/dom.js';
 import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html } from 'lit-element/lit-element.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

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

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