@brightspace-ui/core 2.1.3 → 2.3.0

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

@@ -1,5 +1,5 @@
 import '../button/button-subtle.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 { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SelectionInfo } from './selection-mixin.js';

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/README.md

@@ -0,0 +1,52 @@
+
+# Tag List
+*This component is in progress and the api is not yet stable.*
+
+Tag lists are used to present a list of compact, discrete pieces of information.
+
+<!-- docs: demo display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tag-list/tag-list.js';
+  import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+</script>
+
+<d2l-tag-list description="Example Tags">
+  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+</d2l-tag-list>
+```
+
+## Tag List [d2l-tag-list]
+
+The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-item` and adds the appropriate keyboard navigation, list semantics, clearing behaviour and responsive behaviour.
+
+<!-- docs: demo live name:d2l-tag-list display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tag-list/tag-list.js';
+  import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+</script>
+
+<d2l-tag-list description="Example Tags">
+  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+</d2l-tag-list>
+```
+
+## Tag List Item [d2l-tag-list-item]
+The `d2l-tag-list-item` provides the appropriate `listitem` semantics and styling for children within a tag list. Tag List items do not work outside of a Tag List and should not be used on their own.
+
+<!-- docs: demo live name:d2l-tag-list-item display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tag-list/tag-list.js';
+  import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+</script>
+
+<d2l-tag-list description="Example Tags">
+  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+</d2l-tag-list>
+```

package/components/tag-list/demo/tag-list.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../tag-list.js';
+			import '../tag-list-item.js';
+			import '../test/tag-list-item-mixin-consumer.js';
+		</script>
+	</head>
+	<body unresolved>
+		<d2l-demo-page page-title="d2l-tag-list">
+
+			<h2>Basic Tag List</h2>
+			<d2l-demo-snippet fullscreen>
+				<d2l-tag-list description="A bunch of example tags">
+					<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Another Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
+					<d2l-tag-list-item text="Example Tag 5"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example Tag 6"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
+				</d2l-tag-list>		
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+	</body>
+</html>

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

@@ -0,0 +1,78 @@
+import '../colors/colors.js';
+import { css, html } from 'lit';
+import { labelStyles } from '../typography/styles.js';
+
+export const TagListItemMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			role: { type: String, reflect: true }
+		};
+	}
+
+	static get styles() {
+		return [labelStyles, css`
+			:host {
+				display: grid;
+				outline: none;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.tag-list-item-content {
+				height: 1rem;
+				margin: auto;
+				min-width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.tag-list-item-container {
+				background-color: var(--d2l-color-regolith);
+				border-radius: 6px;
+				box-shadow: inset 0 0 0 1px var(--d2l-color-gypsum), 0 2px 4px rgba(0, 0, 0, 0.03);
+				box-sizing: border-box;
+				color: var(--d2l-color-ferrite);
+				cursor: pointer;
+				display: flex;
+				min-width: 0;
+				padding: 0.25rem 0.6rem;
+				transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
+			}
+			:host(:hover) .tag-list-item-container,
+			:host(:focus) .tag-list-item-container {
+				background-color: var(--d2l-color-sylvite);
+			}
+			:host(:hover) .tag-list-item-container {
+				box-shadow: inset 0 0 0 1px var(--d2l-color-mica), 0 2px 4px rgba(0, 0, 0, 0.03);
+			}
+			:host(:focus) .tag-list-item-container {
+				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				.tag-list-item-container {
+					transition: none;
+				}
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		/** @ignore */
+		this.role = 'listitem';
+	}
+
+	_renderTag(tagContent) {
+		return html`
+			<div class="tag-list-item-container d2l-label-text">
+				<div class="tag-list-item-content">${tagContent}</div>
+			</div>
+		`;
+	}
+
+};

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { TagListItemMixin } from './tag-list-item-mixin.js';
+
+class TagListItem extends TagListItemMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: Text to display
+			 * @type {string}
+			 */
+			text: { type: String }
+		};
+	}
+
+	render() {
+		return this._renderTag(this.text);
+	}
+}
+
+customElements.define('d2l-tag-list-item', TagListItem);

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

@@ -0,0 +1,89 @@
+import { css, html, LitElement } from 'lit';
+import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
+
+class TagList extends ArrowKeysMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: A description of the tag list for additional accessibility context
+			 * @type {string}
+			 */
+			description: { type: String }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.tag-list-container {
+				display: flex;
+				flex-wrap: wrap;
+				margin: -6px -6px 0 0;
+				padding: 0;
+				position: relative;
+			}
+			::slotted(*) {
+				margin: 6px 6px 0 0;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		/** @ignore */
+		this.arrowKeysDirection = 'leftrightupdown';
+		this._items = [];
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		requestAnimationFrame(() => {
+			this._items = this._getTagListItems();
+			this._items.forEach((item, index) => {
+				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
+			});
+		});
+	}
+
+	render() {
+		const list = html`
+			<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description">
+				<slot></slot>
+			</div>
+		`;
+		return html`
+			<div role="application">
+				${this.arrowKeysContainer(list)}
+				<div id="d2l-tag-list-description" hidden>${this.description}</div>
+			</div>
+		`;
+	}
+
+	async arrowKeysFocusablesProvider() {
+		return this._items;
+	}
+
+	focus() {
+		if (this._items.length > 0) this._items[0].focus();
+	}
+
+	_getTagListItems() {
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
+		if (!slot) return;
+		return slot.assignedNodes({ flatten: true }).filter((node) => {
+			if (node.nodeType !== Node.ELEMENT_NODE) return false;
+			const role = node.getAttribute('role');
+			return (role === 'listitem');
+		});
+	}
+
+}
+
+customElements.define('d2l-tag-list', TagList);

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",
@@ -9766,6 +9779,71 @@
         }
       ]
     },
+    {
+      "name": "d2l-tag-list-item",
+      "path": "./components/tag-list/tag-list-item.js",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: Text to display",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text to display",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-tag-list",
+      "path": "./components/tag-list/tag-list.js",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "REQUIRED: A description of the tag list for additional accessibility context",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "REQUIRED: A description of the tag list for additional accessibility context",
+          "type": "string"
+        },
+        {
+          "name": "arrowKeysDirection",
+          "type": "string",
+          "default": "\"leftright\""
+        },
+        {
+          "name": "arrowKeysNoWrap",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
+    {
+      "name": "d2l-tag-list-item-mixin-consumer",
+      "path": "./components/tag-list/test/tag-list-item-mixin-consumer.js",
+      "attributes": [
+        {
+          "name": "name",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "name",
+          "attribute": "name",
+          "type": "string"
+        }
+      ]
+    },
     {
       "name": "d2l-tooltip",
       "path": "./components/tooltip/tooltip.js",

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;