@brightspace-ui/core 3.150.7 → 3.151.1

package/components/breadcrumbs/breadcrumb.js

@@ -4,12 +4,11 @@ import { findComposedAncestor } from '../../helpers/dom.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { linkStyles } from '../link/link.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * An entry within a <d2l-breadcrumbs> parent.
  */
-class Breadcrumb extends RtlMixin(FocusMixin(LitElement)) {
+class Breadcrumb extends FocusMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -59,25 +58,13 @@ class Breadcrumb extends RtlMixin(FocusMixin(LitElement)) {
 			.d2l-link:focus {
 				outline-offset: -2px;
 			}
-
 			d2l-icon {
 				height: 8px;
-				padding-left: 8px;
-				padding-right: 3px;
+				padding-inline: 8px 3px;
 				width: 8px;
 			}
-			:host([dir="rtl"]) d2l-icon {
-				padding-left: 3px;
-				padding-right: 8px;
-			}
-
 			d2l-icon[icon="tier1:chevron-left"] {
-				padding-left: 0;
-				padding-right: 8px;
-			}
-			:host([dir="rtl"]) d2l-icon[icon="tier1:chevron-left"] {
-				padding-left: 8px;
-				padding-right: 0;
+				padding-inline: 0 8px;
 			}
 		`];
 	}

package/components/breadcrumbs/breadcrumbs.js

@@ -3,7 +3,6 @@ import { css, html, LitElement } from 'lit';
 import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
 
@@ -11,7 +10,8 @@ const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping
  * Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.
  * @slot - Breadcrumb items
  */
-class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
+class Breadcrumbs extends LocalizeCoreElement(LitElement) {
+
 	static get properties() {
 		return {
 			/**
@@ -38,23 +38,15 @@ class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			:host([hidden]) {
 				display: none;
 			}
-
 			:host::after {
-				background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(251, 252, 252));
-				bottom: 0;
+				background: linear-gradient(to var(--d2l-inline-end, right), rgba(255, 255, 255, 0), rgb(251, 252, 252));
 				content: "";
+				inset-block: 0;
+				inset-inline-end: 0;
 				pointer-events: none;
 				position: absolute;
-				right: 0;
-				top: 0;
 				width: 10px;
 			}
-			:host([dir="rtl"])::after {
-				background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(251, 252, 252));
-				left: 0;
-				right: auto;
-			}
-
 			:host([compact]) ::slotted(d2l-breadcrumb:not(:last-of-type)),
 			:host([compact]) ::slotted(d2l-breadcrumb-current-page) {
 				display: none;

package/components/link/README.md

@@ -49,7 +49,7 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
 |--|--|--|
 | `aria-label` | String | Label to provide more context for screen reader users when the link text is not enough |
 | `href` | String, required | URL or URL fragment of the link |
-| `download` | Boolean | Download a URL instead of navigating to it |
+| `download` | String | If the attribute is provided, it will prompt the user to download the resource instead of navigating to it. Additionally, if the attribute is provided with a value, that value will be used for the filename. |
 | `main` | Boolean | Whether to apply the "main" link style |
 | `lines` | Number | The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified. |
 | `small` | Boolean | Whether to apply the "small" link style |

package/components/link/link-mixin.js

@@ -0,0 +1,76 @@
+import '../icons/icon.js';
+import { css, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { offscreenStyles } from '../offscreen/offscreen.js';
+
+export const LinkMixin = superclass => class extends LocalizeCoreElement(superclass) {
+
+	static get properties() {
+		return {
+			/**
+			 * Prompts the user to save the linked URL instead of navigating to it.
+			 * Must be to a resource on the same origin.
+			 * Can be used with or without a value, when set the value becomes the filename.
+			 * @type {string}
+			 */
+			download: { type: String },
+			/**
+			 * REQUIRED: URL or URL fragment of the link
+			 * @type {string}
+			 */
+			href: { type: String },
+			/**
+			 * Where to display the linked URL
+			 * @type {string}
+			 */
+			target: { type: String }
+		};
+	}
+
+	static get styles() {
+		return [offscreenStyles, css`
+			#new-window {
+				line-height: 0;
+				white-space: nowrap;
+			}
+			d2l-icon {
+				color: inherit;
+				height: calc(1em - 1px);
+				margin-inline-start: 0.315em;
+				transform: translateY(0.1em);
+				vertical-align: inherit;
+				width: calc(1em - 1px);
+			}
+
+			@media print {
+				d2l-icon {
+					display: none;
+				}
+			}
+		`];
+	}
+
+	_render(inner, { rel = undefined, ariaLabel = undefined, linkClasses = {}, tabindex = undefined } = {}) {
+		/*
+		* 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(ariaLabel)}"
+			class="${classMap(linkClasses)}"
+			download="${this.download}"
+			href="${ifDefined(this.href)}"
+			target="${ifDefined(this.target)}"
+			rel="${ifDefined(rel)}"
+			tabindex="${ifDefined(tabindex)}"
+			>${inner}</a>`;
+	}
+
+	_renderNewWindowIcon() {
+		if (this.target !== '_blank') return nothing;
+		return 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>`;
+	}
+};

package/components/menu/demo/menu.html

@@ -80,6 +80,7 @@
 						<d2l-custom-menu-item text="The Solar System (Custom)"></d2l-custom-menu-item>
 						<d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
 						<d2l-menu-item text="The Night Sky"></d2l-menu-item>
+						<d2l-menu-item-link href="https://en.wikipedia.org/wiki/Interstellar_object" text="Interstellar Objects" target="_blank"></d2l-menu-item-link>
 						<d2l-menu-item-link href="https://en.wikipedia.org/wiki/Universe" text="The Universe (link)"></d2l-menu-item-link>
 						<d2l-menu-item-link href="https://en.wikipedia.org/wiki/Universe" text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon"></d2l-menu-item-link>
 					</d2l-menu>

package/components/menu/menu-item-link.js

@@ -1,16 +1,21 @@
 import { css, html, LitElement } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { LinkMixin } from '../link/link-mixin.js';
 import { MenuItemMixin } from './menu-item-mixin.js';
 import { menuItemStyles } from './menu-item-styles.js';
 
+const newWindowIconEnabled = getFlag('GAUD-8295-menu-item-link-new-window-icon', true);
+
 /**
  * A menu item component used for navigating.
  * @fires click - Dispatched when the link is clicked
  * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
-class MenuItemLink extends MenuItemMixin(LitElement) {
+class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitElement)) : MenuItemMixin(LitElement)) {
 
 	static get properties() {
+		if (newWindowIconEnabled) return {};
 		return {
 			/**
 			 * Prompts the user to save the linked URL instead of navigating to it.
@@ -33,7 +38,8 @@ class MenuItemLink extends MenuItemMixin(LitElement) {
 	}
 
 	static get styles() {
-		return [ menuItemStyles,
+		// remove this block when cleaning up GAUD-8295-menu-item-link-new-window-icon
+		if (!newWindowIconEnabled) return [ menuItemStyles,
 			css`
 				:host {
 					display: block;
@@ -52,6 +58,36 @@ class MenuItemLink extends MenuItemMixin(LitElement) {
 				}
 			`
 		];
+
+		return [ super.styles, menuItemStyles,
+			css`
+				:host {
+					display: block;
+					padding: 0;
+				}
+
+				:host > a {
+					align-items: center;
+					color: inherit;
+					display: flex;
+					line-height: 1rem;
+					outline: none;
+					overflow-x: hidden;
+					padding: 0.75rem 1rem;
+					text-decoration: none;
+				}
+
+				:host([target="_blank"]) .d2l-menu-item-text {
+					align-self: baseline;
+					flex: 0 1 auto;
+				}
+
+				#new-window {
+					align-self: baseline;
+					flex: auto;
+				}
+			`
+		];
 	}
 
 	firstUpdated() {
@@ -61,13 +97,24 @@ class MenuItemLink extends MenuItemMixin(LitElement) {
 	}
 
 	render() {
-		const rel = this.target ? 'noreferrer noopener' : undefined;
-		return html`
-			<a download="${ifDefined(this.download)}" href="${ifDefined(this.href)}" rel="${ifDefined(rel)}" target="${ifDefined(this.target)}" tabindex="-1">
-				<div class="d2l-menu-item-text">${this.text}</div>
-				<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
-			</a>
+		// remove this block when cleaning up GAUD-8295-menu-item-link-new-window-icon
+		if (!newWindowIconEnabled) {
+			const rel = this.target ? 'noreferrer noopener' : undefined;
+			return html`
+				<a download="${ifDefined(this.download)}" href="${ifDefined(this.href)}" rel="${ifDefined(rel)}" target="${ifDefined(this.target)}" tabindex="-1">
+					<div class="d2l-menu-item-text">${this.text}</div>
+					<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
+				</a>
+			`;
+		}
+
+		const inner = html`
+			<div class="d2l-menu-item-text">${this.text}</div>
+			${this._renderNewWindowIcon()}
+			<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
 		`;
+		return this._render(inner, { rel: this.target ? 'noreferrer noopener' : undefined, tabindex: -1 });
+
 	}
 
 	_getTarget() {

package/components/overflow-group/demo/demo-overflow-group.js

@@ -0,0 +1,23 @@
+
+import '../../button/button.js';
+import '../overflow-group.js';
+import { html, LitElement } from 'lit';
+import { LocalizeCoreElement } from '../../../helpers/localize-core-element.js';
+
+class DemoOverflowGroup extends LocalizeCoreElement(LitElement) {
+	render() {
+		return html`
+			<d2l-overflow-group>
+				<d2l-button primary>${this.localize('components.more-less.more')}</d2l-button>
+				<d2l-button>${this.localize('components.more-less.less')}</d2l-button>
+				<d2l-button>${this.localize('components.more-less.more')}</d2l-button>
+				<d2l-button>${this.localize('components.more-less.less')}</d2l-button>
+				<d2l-button>${this.localize('components.more-less.more')}</d2l-button>
+				<d2l-button>${this.localize('components.more-less.less')}</d2l-button>
+				<d2l-button> ${this.localize('components.more-less.more')}</d2l-button>
+				<d2l-button> ${this.localize('components.more-less.less')}</d2l-button>
+			</d2l-overflow-group>
+		`;
+	}
+}
+customElements.define('d2l-demo-overflow-group', DemoOverflowGroup);

package/components/overflow-group/demo/overflow-group.html

@@ -16,6 +16,7 @@
 			import '../../dropdown/dropdown-menu.js';
 			import '../../dropdown/dropdown.js';
 			import '../../link/link.js';
+			import './demo-overflow-group.js';
 		</script>
 	</head>
 	<body unresolved>
@@ -39,7 +40,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-overflow-group auto-show>
-						<d2l-button  disabled primary>New</d2l-button>
+						<d2l-button disabled primary>New</d2l-button>
 						<d2l-dropdown-button text="Explore Topics" class="d2l-button-group-show">
 							<d2l-dropdown-menu id="dropdown">
 								<d2l-menu label="Astronomy">
@@ -97,6 +98,13 @@
 					</d2l-overflow-group>
 				</template>
 			</d2l-demo-snippet>
+
+			<h2>Overflow Group with Localized Text and Spaces</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-overflow-group></d2l-demo-overflow-group>
+				</template>
+			</d2l-demo-snippet>
 		</d2l-demo-page>
 	</body>
 </html>

package/custom-elements.json

@@ -10498,28 +10498,6 @@
           "name": "target",
           "description": "Where to display the linked URL",
           "type": "string"
-        },
-        {
-          "name": "text",
-          "description": "REQUIRED: Text displayed by the menu item",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
-          "type": "string"
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the menu item",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "lines",
-          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
-          "type": "number",
-          "default": "2"
         }
       ],
       "properties": [
@@ -10540,46 +10518,12 @@
           "attribute": "target",
           "description": "Where to display the linked URL",
           "type": "string"
-        },
-        {
-          "name": "text",
-          "attribute": "text",
-          "description": "REQUIRED: Text displayed by the menu item",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "attribute": "description",
-          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
-          "type": "string"
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Disables the menu item",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "lines",
-          "attribute": "lines",
-          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
-          "type": "number",
-          "default": "2"
         }
       ],
       "events": [
         {
           "name": "click",
           "description": "Dispatched when the link is clicked"
-        },
-        {
-          "name": "d2l-menu-item-select",
-          "description": "Dispatched when the menu item is selected"
-        },
-        {
-          "name": "d2l-menu-item-visibility-change",
-          "description": "Dispatched when the visibility of the menu item changes"
         }
       ],
       "slots": [
@@ -11419,6 +11363,10 @@
       "name": "d2l-screen-reader-pause",
       "path": "./components/offscreen/screen-reader-pause.js"
     },
+    {
+      "name": "d2l-demo-overflow-group",
+      "path": "./components/overflow-group/demo/demo-overflow-group.js"
+    },
     {
       "name": "d2l-overflow-group",
       "path": "./components/overflow-group/overflow-group.js",

package/mixins/loading-complete/README.md

@@ -26,7 +26,7 @@ async removeSkeleton() {
 }
 ```
 
-If for any reason `resolveLoadingComplete` is never called, `loadingComplete` won't resolve and any consumers will hang.
+If for any reason `resolveLoadingComplete` is never called, `loadingComplete` won't resolve and any consumers will hang. A warning will be thrown indicating that the component has entered a bad state.
 
 ### `getLoadingComplete`
 

package/mixins/loading-complete/loading-complete-mixin.js

@@ -1,5 +1,7 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
+const timeoutMs = 30000;
+
 export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends superclass {
 	get loadingComplete() {
 		return this.getLoadingComplete();
@@ -22,7 +24,16 @@ export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends su
 	#loadingCompleteResolve;
 
 	#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
-		? new Promise(resolve => this.#loadingCompleteResolve = resolve)
+		? new Promise(resolve => {
+			const timeout = setTimeout(() => {
+				console.warn(`Failed to load ${this.localName} in ${timeoutMs}ms: resolveLoadingComplete was not called`);
+			}, timeoutMs);
+
+			this.#loadingCompleteResolve = () => {
+				clearTimeout(timeout);
+				resolve();
+			};
+		})
 		: Promise.resolve();
 
 });

package/package.json

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