@brightspace-ui/core 3.300.0 → 3.301.0

package/components/dropdown/README.md

@@ -215,6 +215,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 | Property | Type | Description |
 |---|---|---|
 | `align` | String | Optionally align dropdown to either `start` or `end`. If not set, the dropdown will attempt to be centred. |
+| `async` | Boolean, default: `false` | Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content. |
 | `max-height` | Number | Override default `max-height`. _Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed_ |
 | `min-height` | Number | Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. _Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed._ |
 | `max-width` | Number | Override default `max-width` |
@@ -236,7 +237,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 | Name | Description |
 |---|---|
 | `d2l-dropdown-open` | Dispatched when the dropdown is opened |
-| `d2l-dropdown-open-async` | Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content |
+| `d2l-dropdown-async-load` | Dispatched before an "async" dropdown is opened for the first time, giving an opportunity to load async content |
 | `d2l-dropdown-close` | dispatched when the dropdown is closed |
 | `d2l-dropdown-position` | Dispatched when the dropdown position finishes adjusting |
 | `d2l-dropdown-focus-enter` | dispatched when the 'trap-focus' attribute is applied and the focus-trap is entered (trap-focus option only) |
@@ -254,28 +255,35 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 
 ### Asynchronous Content
 
-For dropdown content that's fetched asynchronously, the `d2l-dropdown-open-async` event can be leveraged to let `<d2l-dropdown-content>` know when things are ready. That way, automatic focus and sizing logic until can be delayed.
+For dropdown content that's fetched asynchronously, the `async` attribute and the `d2l-dropdown-async-load` event can be leveraged to let `<d2l-dropdown-content>` know when things are ready.
 
-- Add a listener for the `d2l-dropdown-open-async` event
-- In the handler, call `preventDefault()` on the event to let it know that the content will be loaded asynchronously
-- Fetch the content and when it's ready, call `complete()` on the event detail
-- Note: the `d2l-dropdown-open-async` event will only be dispatched the first time the dropdown is opened, so no need to ignore subsequent calls
+Automatic focus and sizing logic will be delayed until content has loaded.
+
+- Set the `async` attribute
+- Add a listener for the `d2l-dropdown-async-load` event that fetches the content
+- Render `nothing` inside  `<d2l-dropdown-content>`, allowing dropdown to render a loading spinner while content loads
+- When content is ready, call `complete()` on the event detail
+- To avoid a shift in size between the "loading" and "loaded" states, consider setting a `min-width` matching the typical width of the loaded content 
+
+The `d2l-dropdown-async-load` event will dispatch pre-emptively when the user hovers or focuses on the dropdown opener, anticipating that the dropdown will be opened.
+
+It is also only be dispatched once, so there's no need to ignore subsequent calls
 
 ```javascript
 class MyElem extends LitElement {
+  properties: {
+    _content: { state: true }
+  }
   render() {
-    const content = this._loading ? 'Loading...' : 'Loaded!';
     return html`
       <d2l-dropdown-content
-        @d2l-dropdown-open-async="${this.#handleDropdownOpenAsync}">
-        ${content}
+        @d2l-dropdown-async-load="${this.#handleDropdownAsyncLoad}">
+        ${this._content}
       </d2l-dropdown-content>
     `;
   }
-  async #handleDropdownOpenAsync(e) {
-    e.preventDefault();
-    await this.#fetchData();
-    this._loaded = true;
+  async #handleDropdownAsyncLoad(e) {
+    this._content = await this.#fetchData();
     e.detail.complete();
   }
 }

package/components/dropdown/dropdown-content.js

@@ -7,8 +7,6 @@ import { LitElement } from 'lit';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-open-async - Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content
- * @fires d2l-popover-open-async - Ignore
  */
 class DropdownContent extends DropdownPopoverMixin(LitElement) { }
 customElements.define('d2l-dropdown-content', DropdownContent);

package/components/dropdown/dropdown-menu.js

@@ -11,8 +11,6 @@ const dropdownDelay = 300;
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-open-async - Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content
- * @fires d2l-popover-open-async - Ignore
  */
 class DropdownMenu extends ThemeMixin(DropdownPopoverMixin(LitElement)) {
 

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

@@ -71,6 +71,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 		// listeners
 		this.addEventListener('keypress', this.__onKeypress);
+		this.addEventListener('focusin', this.#handleFocusIn);
 		this.addEventListener('mouseup', this.__onMouseUp);
 		this.addEventListener('mouseenter', this.__onMouseEnter);
 		this.addEventListener('mouseleave', this.__onMouseLeave);
@@ -226,12 +227,15 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	async __onMouseEnter() {
-		if (!this.openOnHover) return;
-		// do not respond to hover events on mobile screens
 		const dropdownContent = this.__getContentElement();
 
+		// do not respond to hover events on mobile screens
 		if (dropdownContent._mobile) return;
 
+		dropdownContent?.startAsyncLoad();
+
+		if (!this.openOnHover) return;
+
 		clearTimeout(this._dismissTimerId);
 		if (!this.dropdownOpened) await this.openDropdown(false);
 		this._closeTimerStop();
@@ -316,4 +320,11 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		}
 		return true;
 	}
+
+	#handleFocusIn(e) {
+		const opener = this.getOpenerElement();
+		if (e.target === this || isComposedAncestor(opener, e.target)) {
+			this.__getContentElement()?.startAsyncLoad();
+		}
+	}
 };

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

@@ -1,16 +1,21 @@
 import '../button/button.js';
+import '../loading-spinner/loading-spinner.js';
 import '../../helpers/viewport-size.js';
 import '../../helpers/visualReady.js';
-import { css, html } from 'lit';
+import { asyncStates, PopoverMixin } from '../popover/popover-mixin.js';
+import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { PopoverMixin } from '../popover/popover-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElement(PopoverMixin(superclass)) {
 
 	static properties = {
+		/**
+		 * Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.
+		 */
+		async: { type: Boolean },
 		/**
 		 * Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.
 		 * @type {'start'|'end'}
@@ -121,6 +126,11 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 			overflow-y: auto;
 			padding: 1rem;
 		}
+		.dropdown-content-loading {
+			display: flex;
+			justify-content: center;
+			padding: 20px;
+		}
 		.dropdown-header,
 		.dropdown-footer {
 			box-sizing: border-box;
@@ -169,6 +179,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 
 	constructor() {
 		super();
+		this.async = false;
 		this.opened = false;
 		this.noAutoClose = false;
 		this.noAutoFit = false;
@@ -197,8 +208,8 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		if (this.#contentElement) {
 			this.#resizeObserver.observe(this.#contentElement);
 		}
+		this.addEventListener('d2l-popover-async-load', this.#handlePopoverAsyncLoad);
 		this.addEventListener('d2l-popover-open', this.#handlePopoverOpen);
-		this.addEventListener('d2l-popover-open-async', this.#handlePopoverOpenAsync);
 		this.addEventListener('d2l-popover-close', this.#handlePopoverClose);
 		this.addEventListener('d2l-popover-position', this.#handlePopoverPosition);
 		this.addEventListener('d2l-popover-focus-enter', this.#handlePopoverFocusEnter);
@@ -232,13 +243,16 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 
 		const closeButtonStyles = this.#getMobileCloseButtonStyles();
 
+		const isLoading = (this._async && this._asyncState === asyncStates.loading);
+		const loading = isLoading ? html`<div class="dropdown-content-loading"><d2l-loading-spinner></d2l-loading-spinner></div>` : nothing;
+
 		const content = html`
 			<div class="dropdown-content-layout" style="${styleMap(contentLayoutStyles)}">
 				<div class="${classMap(headerClasses)}">
 					<slot name="header" @slotchange="${this.#handleHeaderSlotChange}"></slot>
 				</div>
 				<div class="${classMap(contentClasses)}" @scroll="${this.#toggleScrollStyles}">
-					<slot></slot>
+					<slot>${loading}</slot>
 				</div>
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this.#handleFooterSlotChange}"></slot>
@@ -253,12 +267,13 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	willUpdate(changedProperties) {
-		if (changedProperties.has('align') || changedProperties.has('maxHeight') || changedProperties.has('maxWidth') || changedProperties.has('minHeight') || changedProperties.has('minWidth') || changedProperties.has('mobileBreakpointOverride') || changedProperties.has('mobileTray') || changedProperties.has('noAutoClose') || changedProperties.has('noAutoFit') || changedProperties.has('noAutoFocus') || changedProperties.has('noPointer') || changedProperties.has('trapFocus') || changedProperties.has('verticalOffset')) {
+		if (changedProperties.has('align') || changedProperties.has('async') || changedProperties.has('maxHeight') || changedProperties.has('maxWidth') || changedProperties.has('minHeight') || changedProperties.has('minWidth') || changedProperties.has('mobileBreakpointOverride') || changedProperties.has('mobileTray') || changedProperties.has('noAutoClose') || changedProperties.has('noAutoFit') || changedProperties.has('noAutoFocus') || changedProperties.has('noPointer') || changedProperties.has('trapFocus') || changedProperties.has('verticalOffset')) {
 			super.configure({
+				async: this.async,
 				maxHeight: this.maxHeight,
 				maxWidth: this.maxWidth,
 				minHeight: this.minHeight,
-				minWidth: this.minWidth,
+				minWidth: (this.minWidth === undefined && this.async) ? 88 : this.minWidth, /* loading-spinner + padding */
 				mobileBreakpoint: this.mobileBreakpointOverride,
 				mobileTrayLocation: this.#adaptMobileTrayLocation(this.mobileTray),
 				noAutoClose: this.noAutoClose,
@@ -356,6 +371,20 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeaderSlotContent = e.target.assignedNodes().length !== 0;
 	}
 
+	#handlePopoverAsyncLoad(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		/** Dispatched before an "async" dropdown is opened for the first time, giving an opportunity to load async content */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-dropdown-async-load', {
+				bubbles: false,
+				cancelable: false,
+				composed: false,
+				detail: { complete: e.detail.complete, reset: e.detail.reset }
+			}
+		));
+	}
+
 	#handlePopoverClose(e) {
 		// ignore popover close events from nested popovers
 		if (e.target !== this) return;
@@ -387,22 +416,6 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		});
 	}
 
-	#handlePopoverOpenAsync(e) {
-		const openAsyncEvent = new CustomEvent(
-			'd2l-dropdown-open-async', {
-				bubbles: false,
-				cancelable: true,
-				composed: false,
-				detail: { complete: e.detail.complete }
-			}
-		);
-		/** @ignore */
-		this.dispatchEvent(openAsyncEvent);
-		if (openAsyncEvent.defaultPrevented) {
-			e.preventDefault();
-		}
-	}
-
 	#handlePopoverPosition() {
 		this.#toggleScrollStyles();
 

package/components/dropdown/dropdown-tabs.js

@@ -7,8 +7,6 @@ import { DropdownPopoverMixin } from './dropdown-popover-mixin.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-open-async - Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content
- * @fires d2l-popover-open-async - Ignore
  */
 class DropdownTabs extends DropdownPopoverMixin(LitElement) {
 

package/components/popover/popover-mixin.js

@@ -12,6 +12,11 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 import { waitForElem } from '../../helpers/internal/waitForElem.js';
 
+export const asyncStates = Object.freeze({
+	unloaded: 'unloaded',
+	loading: 'loading',
+	loaded: 'loaded'
+});
 export const positionLocations = Object.freeze({
 	blockEnd: 'block-end',
 	blockStart: 'block-start',
@@ -53,6 +58,8 @@ const SCROLLBAR_WIDTH = (() => {
 export const PopoverMixin = superclass => class extends superclass {
 
 	static properties = {
+		_async: { type: Boolean },
+		_asyncState: { state: true },
 		_contentHeight: { state: true },
 		_location: { type: String, reflect: true, attribute: '_location' },
 		_margin: { state: true },
@@ -261,6 +268,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	constructor() {
 		super();
 		this.configure();
+		this._asyncState = asyncStates.unloaded;
 		this._mobile = false;
 		this._showBackdrop = false;
 		this._useNativePopover = isPopoverSupported ? 'manual' : undefined;
@@ -316,6 +324,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		else if (properties?.position?.location === positionLocations.inlineStart
 			|| properties?.position?.location === positionLocations.inlineEnd) this._margin = 0;
 		else this._margin = 18;
+		this._async = properties?.async ?? false;
 		this._maxHeight = properties?.maxHeight;
 		this._maxWidth = properties?.maxWidth;
 		this._minHeight = properties?.minHeight;
@@ -372,7 +381,15 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this.#addRepositionHandlers();
 
-		await this.#waitForOpenAsync();
+		if (this._async) {
+			await this.startAsyncLoad();
+			if (!this._opened) return; // could have closed while async loading
+			if (this.#firstOpen) {
+				this.#firstOpen = false;
+				await waitForElem(this.#getContentContainer());
+				await this.position();
+			}
+		}
 
 		this.#focusContent(this);
 
@@ -579,12 +596,43 @@ export const PopoverMixin = superclass => class extends superclass {
 		await this.position();
 	}
 
+	async startAsyncLoad() {
+		if (!this._async || this._asyncState === asyncStates.loaded) return;
+		if (this._asyncState === asyncStates.loading) {
+			return this.#asyncLoadPromise;
+		}
+		this._asyncState = asyncStates.loading;
+
+		this.#asyncLoadPromise = new Promise(resolve => {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent(
+				'd2l-popover-async-load', {
+					bubbles: false,
+					cancelable: true,
+					composed: false,
+					detail: {
+						complete: resolve,
+						reset: () => {
+							this._asyncState = asyncStates.unloaded;
+							this.#firstOpen = true;
+						}
+					}
+				}
+			));
+		});
+		await this.#asyncLoadPromise;
+
+		this._asyncState = asyncStates.loaded;
+		await this.updateComplete;
+	}
+
 	toggleOpen(opener, applyFocus = true) {
 		if (this._opened) return this.close();
 		else return this.open(opener, (!this._noAutoFocus && applyFocus));
 	}
 
 	#ancestorMutations;
+	#asyncLoadPromise;
 	#firstOpen = true;
 	#ifrauContextInfo;
 	#mediaQueryList;
@@ -1198,32 +1246,4 @@ export const PopoverMixin = superclass => class extends superclass {
 		removeResizeNoopEventListener(this.#handleResize);
 	}
 
-	async #waitForOpenAsync() {
-		if (!this.#firstOpen) return;
-		this.#firstOpen = false;
-
-		let doWait = false;
-		await new Promise(resolve => {
-			const openAsyncEvent = new CustomEvent(
-				'd2l-popover-open-async', {
-					bubbles: false,
-					cancelable: true,
-					composed: false,
-					detail: { complete: resolve }
-				}
-			);
-			/** @ignore */
-			this.dispatchEvent(openAsyncEvent);
-			if (!openAsyncEvent.defaultPrevented) {
-				resolve();
-			} else {
-				doWait = true;
-			}
-		});
-		if (doWait) {
-			await waitForElem(this.#getContentContainer());
-			await this.position();
-		}
-	}
-
 };

package/components/tooltip/tooltip.js

@@ -55,7 +55,6 @@ let activeTooltip = null;
  * @slot - Default content placed inside of the tooltip
  * @fires d2l-tooltip-show - Dispatched when the tooltip is opened
  * @fires d2l-tooltip-hide - Dispatched when the tooltip is closed
- * @fires d2l-popover-open-async - Ignore
  */
 class Tooltip extends PopoverMixin(LitElement) {
 

package/custom-elements.json

@@ -3329,6 +3329,12 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
@@ -3439,6 +3445,13 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -3514,12 +3527,8 @@
           "description": "Dispatched when the dropdown is opened"
         },
         {
-          "name": "d2l-dropdown-open-async",
-          "description": "Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
+          "name": "d2l-dropdown-async-load",
+          "description": "Dispatched before an \"async\" dropdown is opened for the first time, giving an opportunity to load async content"
         },
         {
           "name": "d2l-dropdown-close",
@@ -3708,6 +3717,12 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
@@ -3818,6 +3833,13 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -3893,12 +3915,8 @@
           "description": "Dispatched when the dropdown is opened"
         },
         {
-          "name": "d2l-dropdown-open-async",
-          "description": "Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
+          "name": "d2l-dropdown-async-load",
+          "description": "Dispatched before an \"async\" dropdown is opened for the first time, giving an opportunity to load async content"
         },
         {
           "name": "d2l-dropdown-close",
@@ -4087,6 +4105,12 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
@@ -4197,6 +4221,13 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -4272,12 +4303,8 @@
           "description": "Dispatched when the dropdown is opened"
         },
         {
-          "name": "d2l-dropdown-open-async",
-          "description": "Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
+          "name": "d2l-dropdown-async-load",
+          "description": "Dispatched before an \"async\" dropdown is opened for the first time, giving an opportunity to load async content"
         },
         {
           "name": "d2l-dropdown-close",
@@ -13803,6 +13830,11 @@
           "description": "Position the popover to span from the opener edge to this grid line. Default is \"all\" (centered).",
           "type": "'start'|'end'|'all'"
         },
+        {
+          "name": "async",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "no-auto-close",
           "description": "Whether to disable auto-close/light-dismiss",
@@ -13881,6 +13913,12 @@
           "name": "opened",
           "type": "boolean | undefined"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "noAutoClose",
           "attribute": "no-auto-close",
@@ -13914,11 +13952,6 @@
           "type": "array",
           "default": "[\"styles\",null]"
         }
-      ],
-      "events": [
-        {
-          "name": "d2l-popover-open-async"
-        }
       ]
     },
     {
@@ -17342,10 +17375,6 @@
         {
           "name": "d2l-tooltip-hide",
           "description": "Dispatched when the tooltip is closed"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
         }
       ],
       "slots": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.300.0",
+  "version": "3.301.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",