@brightspace-ui/core 3.148.7 → 3.148.9

package/components/link/link.js

@@ -1,11 +1,11 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
-import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -112,7 +112,11 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 				a {
 					display: inherit;
 				}
-				a.truncate {
+				:host([lines]) a {
+					align-items: baseline;
+					display: flex;
+				}
+				a span.truncate {
 					${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
 						-webkit-box-orient: vertical;
 						display: -webkit-box;
@@ -120,12 +124,20 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 						overflow-wrap: anywhere;
 					`}
 				}
+				a span.truncate-one {
+					${overflowEllipsisDeclarations}
+				}
+				#new-window {
+					line-height: 0;
+					white-space: nowrap;
+				}
 				d2l-icon {
 					color: var(--d2l-color-celestine);
-					height: 0.95em;
+					height: calc(1em - 1px);
 					margin-inline-start: 0.315em;
+					transform: translateY(0.1em);
 					vertical-align: inherit;
-					width: 0.95em;
+					width: calc(1em - 1px);
 				}
 
 				a:hover d2l-icon {
@@ -157,22 +169,31 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 		const linkClasses = {
 			'd2l-link': true,
 			'd2l-link-main': this.main,
-			'd2l-link-small': this.small,
-			'truncate': this.lines > 0
+			'd2l-link-small': this.small
+		};
+		const spanClasses = {
+			'truncate': this.lines > 1,
+			'truncate-one': this.lines === 1
 		};
 		const styles = { webkitLineClamp: this.lines || null };
 		const newWindowElements = (this.target === '_blank')
-			? html`<span style="white-space: nowrap; line-height: 0;"><span style="font-size: 0;">&nbsp;</span><d2l-icon icon="tier1:new-window"></d2l-icon></span><span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
+			? html`<span id="new-window"><span style="font-size: 0;">&nbsp;</span><d2l-icon icon="tier1:new-window"></d2l-icon></span><span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
 			: nothing;
 
+		/*
+		* NOTICE:
+		* All html template whitespace within this component is critical to proper rendering and wrapping.
+		* Do not modify for readability!
+		*/
 		return html`<a
 				aria-label="${ifDefined(this.ariaLabel)}"
 				class="${classMap(linkClasses)}"
-				style="${styleMap(styles)}"
 				?download="${this.download}"
 				href="${ifDefined(this.href)}"
 				target="${ifDefined(this.target)}"
-			><slot></slot>${newWindowElements}</a>`;
+				><span
+					class="${classMap(spanClasses)}"
+					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>`;
 	}
 
 }

package/components/list/demo/demo-list-nav.js

@@ -123,14 +123,14 @@ class ListDemoNav extends LitElement {
 
 		this.requestUpdate();
 		await this.updateComplete;
-		await this.updateComplete;
 
 		if (e.detail.keyboardActive) {
-			setTimeout(() => {
+			setTimeout(async() => {
 				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				await newItem.waitForUpdateComplete();
 				newItem.activateDragHandle();
-			}, 50);
+			});
 		}
 	}
 

package/components/list/demo/demo-list-nested.js

@@ -134,14 +134,14 @@ class ListDemoNested extends LitElement {
 
 		this.requestUpdate();
 		await this.updateComplete;
-		await this.updateComplete;
 
 		if (e.detail.keyboardActive) {
-			setTimeout(() => {
+			setTimeout(async() => {
 				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				await newItem.waitForUpdateComplete();
 				newItem.activateDragHandle();
-			}, 50);
+			});
 		}
 
 	}

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

@@ -6,7 +6,7 @@ import './list-item-placement-marker.js';
 import '../tooltip/tooltip.js';
 import '../expand-collapse/expand-collapse-content.js';
 import { css, html, nothing, unsafeCSS } from 'lit';
-import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
+import { findComposedAncestor, getComposedChildren, getComposedParent } from '../../helpers/dom.js';
 import { interactiveElements, isInteractiveInComposedPath } from '../../helpers/interactive.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { composeMixins } from '../../helpers/composeMixins.js';
@@ -24,6 +24,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { waitForElem } from '../../helpers/internal/waitForElem.js';
 
 let tabPressed = false;
 let tabListenerAdded = false;
@@ -594,6 +595,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._siblingHasColor = siblingHasColor;
 	}
 
+	async waitForUpdateComplete() {
+		const predicate = () => true;
+		const composedChildren = getComposedChildren(this, predicate);
+		await Promise.all(composedChildren.map(child => waitForElem(child, predicate)));
+	}
+
 	_getFlattenedListItems(listItem) {
 		const listItems = new Map();
 		const lazyLoadListItems = new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.148.7",
+  "version": "3.148.9",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -68,7 +68,7 @@
   "dependencies": {
     "@brightspace-ui/intl": "^3",
     "@brightspace-ui/lms-context-provider": "^1",
-    "@open-wc/dedupe-mixin": "^1",
+    "@open-wc/dedupe-mixin": "^2",
     "ifrau": "^0.41",
     "lit": "^3",
     "prismjs": "^1",