@brightspace-ui/core 3.151.0 → 3.151.2

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/button/button-add.js

@@ -9,7 +9,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const MODE = {
 	icon: 'icon',
@@ -21,7 +20,7 @@ const whiteAddButtonBackgroundFlag = getFlag('GAUD-7495-add-button-white-backgro
 /**
  * A component for quickly adding items to a specific locaiton.
  */
-class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement)))) {
+class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
 	static get properties() {
 		return {
 			/**
@@ -119,39 +118,32 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 			@media (prefers-reduced-motion: no-preference) {
 				button:hover .line,
 				button:focus .line {
-					transition: all var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay);
-				}
-				button:hover .line,
-				button:focus .line,
-				:host([dir="rtl"]) button:hover .line-end,
-				:host([dir="rtl"]) button:focus .line-end {
 					animation: line-start-animation var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay) 1 forwards;
+					transition: all var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay);
 				}
 				button:hover .line-end,
-				button:focus .line-end,
-				:host([dir="rtl"]) button:hover .line-start,
-				:host([dir="rtl"]) button:focus .line-start {
+				button:focus .line-end {
 					animation-name: line-end-animation;
 				}
 
 				@keyframes line-start-animation {
 					0% {
-						background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%;
+						background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%;
 						opacity: 10%;
 					}
 					100% {
-						background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%; /* safari */
-						background-position: right;
+						background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%; /* safari */
+						background-position: var(--d2l-inline-end, right);
 					}
 				}
 				@keyframes line-end-animation {
 					0% {
-						background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%;
+						background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%;
 						opacity: 10%;
 					}
 					100% {
-						background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%; /* safari */
-						background-position: left;
+						background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%; /* safari */
+						background-position: var(--d2l-inline-start, left);
 					}
 				}
 			}

package/components/typography/styles.js

@@ -505,13 +505,15 @@ export const baseTypographyStyles = css`
 	${unsafeCSS(fontFacesCss)}
 	html {
 		--d2l-document-direction: ltr;
-		--d2l-mirror-transform: none;
 		--d2l-inline-end: right;
+		--d2l-inline-start: left;
+		--d2l-mirror-transform: none;
 	}
 	html[dir="rtl"] {
 		--d2l-document-direction: rtl;
-		--d2l-mirror-transform: scale(-1, 1);
 		--d2l-inline-end: left;
+		--d2l-inline-start: right;
+		--d2l-mirror-transform: scale(-1, 1);
 	}
 
 	.d2l-typography {

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.151.0",
+  "version": "3.151.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",