@brightspace-ui/core 2.2.0 → 2.3.1

package/components/selection/selection-select-all.js

@@ -1,7 +1,7 @@
 import '../inputs/input-checkbox.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 { 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 { SelectionInfo } from './selection-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';

package/components/selection/selection-summary.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SelectionInfo } from './selection-mixin.js';

package/components/skeleton/demo/skeleton-test-box.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 { SkeletonMixin } from '../skeleton-mixin.js';
 
 export class SkeletonTestBox extends SkeletonMixin(LitElement) {

package/components/skeleton/demo/skeleton-test-container.js

@@ -1,6 +1,6 @@
 import '../../colors/colors.js';
 import '../../inputs/input-checkbox.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { bodyCompactStyles } from '../../typography/styles.js';
 import { SkeletonMixin } from '../skeleton-mixin.js';
 

package/components/skeleton/demo/skeleton-test-heading.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '../../typography/styles.js';
 import { SkeletonMixin } from '../skeleton-mixin.js';
 

package/components/skeleton/demo/skeleton-test-link.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 { linkStyles } from '../../link/link.js';
 import { SkeletonMixin } from '../skeleton-mixin.js';
 

package/components/skeleton/demo/skeleton-test-paragraph.js

@@ -1,6 +1,6 @@
 import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, labelStyles } 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 { SkeletonMixin } from '../skeleton-mixin.js';
 
 export class SkeletonTestParagraph extends SkeletonMixin(LitElement) {

package/components/skeleton/demo/skeleton-test-stack.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 { SkeletonMixin } from '../skeleton-mixin.js';
 
 export class SkeletonTestStack extends SkeletonMixin(LitElement) {

package/components/skeleton/demo/skeleton-test-width.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { SkeletonMixin } from '../skeleton-mixin.js';
 
 export class SkeletonTestWidth extends SkeletonMixin(LitElement) {

package/components/skeleton/skeleton-mixin.js

@@ -1,5 +1,5 @@
 import '../colors/colors.js';
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 

package/components/status-indicator/status-indicator.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 component for communicating the status of an item. It is non-interactive and used to assert prominence on state.

package/components/switch/switch-mixin.js

@@ -1,10 +1,10 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html } from 'lit-element/lit-element.js';
+import { css, html } from 'lit';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-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 { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(FocusVisiblePolyfillMixin(superclass))) {

package/components/switch/switch-visibility.js

@@ -1,5 +1,5 @@
 import '../icons/icon.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SwitchMixin } from './switch-mixin.js';
 

package/components/switch/switch.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import '../icons/icon-custom.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { SwitchMixin } from './switch-mixin.js';
 
 /**

package/components/table/README.md

@@ -51,7 +51,7 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
 <!-- docs: demo live name:d2l-test-table display:block -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
 
   const fruits = ['Apples', 'Oranges', 'Bananas'];
@@ -157,7 +157,7 @@ When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used t
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/table/table-col-sort-button.js';
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
 
   class MySortableTableElem extends LitElement {
@@ -257,7 +257,7 @@ If your table supports row selection, apply the `selected` attribute to `<tr>` r
 <!-- docs: demo -->
 ```html
 <script type="module">
-  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { html, LitElement } from 'lit';
   import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
 
   class MySelectableTableElem extends LitElement {

package/components/table/demo/table-test.js

@@ -1,5 +1,5 @@
 import '../table-col-sort-button.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
 import { tableStyles } from '../table-wrapper.js';
 

package/components/table/table-col-sort-button.js

@@ -1,5 +1,5 @@
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 
 /**

package/components/table/table-wrapper.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 export const tableStyles = css`

package/components/tabs/tab-internal.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 { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 const keyCodes = {

package/components/tabs/tab-panel-mixin.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
 export const TabPanelMixin = superclass => class extends superclass {

package/components/tabs/tab-panel.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { TabPanelMixin } from './tab-panel-mixin.js';
 
 /**

package/components/tabs/tabs.js

@@ -2,17 +2,17 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import '../../helpers/queueMicrotask.js';
 import './tab-internal.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { cssEscape, findComposedAncestor } from '../../helpers/dom.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { repeat } from 'lit-html/directives/repeat.js';
+import { repeat } from 'lit/directives/repeat.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';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 

package/components/tag-list/tag-list-item-mixin.js

@@ -1,5 +1,5 @@
 import '../colors/colors.js';
-import { css, html } from 'lit-element/lit-element.js';
+import { css, html } from 'lit';
 import { labelStyles } from '../typography/styles.js';
 
 export const TagListItemMixin = superclass => class extends superclass {

package/components/tag-list/tag-list-item.js

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element/lit-element.js';
+import { LitElement } from 'lit';
 import { TagListItemMixin } from './tag-list-item-mixin.js';
 
 class TagListItem extends TagListItemMixin(LitElement) {

package/components/tag-list/tag-list.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
 
 class TagList extends ArrowKeysMixin(LitElement) {

package/components/tooltip/tooltip.js

@@ -1,5 +1,5 @@
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { cssEscape, elemIdListAdd, getBoundingAncestor, getOffsetParent } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { bodySmallStyles } from '../typography/styles.js';
@@ -7,7 +7,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isFocusable } from '../../helpers/focus.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';
 
 let logAccessibilityWarning = true;
 

package/components/typography/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 
 export const bodyStandardStyles = css`
 	.d2l-body-standard {

package/components/validation/validation-custom.js

@@ -1,5 +1,5 @@
 
-import { LitElement } from 'lit-element/lit-element.js';
+import { LitElement } from 'lit';
 import { ValidationCustomMixin } from './validation-custom-mixin.js';
 
 class ValidationCustom extends ValidationCustomMixin(LitElement) {

package/custom-elements.json

@@ -457,6 +457,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "slim",
+          "description": "Whether to render the slimmer version of the button",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabled-tooltip",
           "description": "Tooltip text when disabled",
@@ -501,6 +507,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "slim",
+          "attribute": "slim",
+          "description": "Whether to render the slimmer version of the button",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabledTooltip",
           "attribute": "disabled-tooltip",

package/directives/animate/animate.js

@@ -1,8 +1,8 @@
-import { directive, PartType } from 'lit-html/directive.js';
+import { directive, PartType } from 'lit/directive.js';
 import { getComposedActiveElement, getNextFocusable } from '../../helpers/focus.js';
-import { AsyncDirective } from 'lit-html/async-directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
-import { noChange } from 'lit-html';
+import { noChange } from 'lit';
 
 const stateMap = new WeakMap();
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

package/directives/animate/demo/animate-test.js

@@ -2,7 +2,7 @@ import '../../../components/button/button.js';
 import '../../../components/inputs/input-checkbox.js';
 import '../../../components/list/list.js';
 import '../../../components/list/list-item.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { hide, show } from '../animate.js';
 
 export class AnimateTest extends LitElement {

package/directives/run-async/run-async.js

@@ -16,10 +16,10 @@
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-import { AsyncDirective } from 'lit-html/async-directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
 import { AsyncStateEvent } from '../../helpers/asyncStateEvent.js';
-import { directive } from 'lit-html/directive.js';
-import { noChange } from 'lit-html';
+import { directive } from 'lit/directive.js';
+import { noChange } from 'lit';
 
 const hasAbortController = typeof AbortController === 'function';
 
@@ -119,7 +119,7 @@ class RunAsync extends AsyncDirective {
 
 /**
  * Runs an async function whenever the key changes, and calls one of several
- * lit-html template functions depending on the state of the async call:
+ * Lit template functions depending on the state of the async call:
  *
  *  - success() is called when the result of the function resolves.
  *  - pending() is called immediately

package/helpers/demo/announce-test.js

@@ -1,6 +1,6 @@
 import '../../components/inputs/input-text.js';
 import '../../components/button/button.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { announce } from '../announce.js';
 
 class AnnounceTest extends LitElement {

package/helpers/demo/dismissible-test.js

@@ -1,6 +1,6 @@
 import '../../components/colors/colors.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 
 class DismissibleTest extends LitElement {
 

package/mixins/arrow-keys-mixin.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element/lit-element.js';
+import { html } from 'lit';
 
 const keyCodes = Object.freeze({
 	END: 35,

package/mixins/async-container/demo/async-container.js

@@ -1,5 +1,5 @@
 import { AsyncContainerMixin, asyncStates } from '../async-container-mixin.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 
 class AsyncContainer extends AsyncContainerMixin(LitElement) {
 

package/mixins/async-container/demo/async-item.js

@@ -1,5 +1,5 @@
 import '../../../components/colors/colors.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { InitialStateError, runAsync } from '../../../directives/run-async/run-async.js';
 
 class AsyncItem extends LitElement {

package/mixins/demo/arrow-keys-test.js

@@ -1,5 +1,5 @@
 import '../../components/colors/colors.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit';
 import { ArrowKeysMixin } from '../arrow-keys-mixin.js';
 
 export class ArrowKeysTest extends ArrowKeysMixin(LitElement) {

package/mixins/demo/labelled-mixin.html

@@ -5,9 +5,9 @@
 		<script type="module">
 			import '../../components/demo/demo-page.js';
 			import '../../components/inputs/input-checkbox.js';
-			import { css, html, LitElement } from 'lit-element/lit-element.js';
+			import { css, html, LitElement } from 'lit';
 			import { LabelledMixin, LabelMixin } from '../labelled-mixin.js';
-			import { ifDefined } from 'lit-html/directives/if-defined.js';
+			import { ifDefined } from 'lit/directives/if-defined.js';
 
 			class DemoInput extends LabelledMixin(LitElement) {
 				static get styles() {

package/mixins/demo/localize-test.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit';
 import { LocalizeMixin } from '../../mixins/localize-mixin.js';
 
 class LocalizeTest extends LocalizeMixin(LitElement) {

package/mixins/visible-on-ancestor-mixin.js

@@ -1,5 +1,5 @@
 import { findComposedAncestor, isComposedAncestor } from '../helpers/dom.js';
-import { css } from 'lit-element/lit-element.js';
+import { css } from 'lit';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -70,8 +70,7 @@
     "focus-visible": "^5",
     "ifrau": "^0.39",
     "intl-messageformat": "^7",
-    "lit-element": "^3",
-    "lit-html": "^2",
+    "lit": "^2",
     "prismjs": "^1",
     "resize-observer-polyfill": "^1"
   }

package/templates/primary-secondary/primary-secondary.js

@@ -2,15 +2,15 @@ import '../../components/colors/colors.js';
 import '../../components/icons/icon-custom.js';
 import '../../components/icons/icon.js';
 import '../../components/offscreen/offscreen.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 { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-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 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';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;