@brightspace-ui/core 2.167.2 → 2.168.0

package/README.md

@@ -138,7 +138,7 @@ This repo uses [@brightspace-ui/testing](https://github.com/BrightspaceUI/testin
 npm run test:vdiff
 
 # re-generate goldens
-npm run test:vdiff golden
+npm run test:vdiff -- --golden
 ```
 
 ### Versioning and Releasing

package/components/alert/alert.js

@@ -172,7 +172,7 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	render() {
-		const hasActions = this.buttonText && this.buttonText.length > 0  || this.hasCloseButton;
+		const hasActions = this.buttonText && this.buttonText.length > 0 || this.hasCloseButton;
 		const alertTextClasses = {
 			'd2l-alert-text': true,
 			'd2l-alert-text-with-actions': hasActions,

package/components/breadcrumbs/breadcrumb.js

@@ -16,7 +16,7 @@ class Breadcrumb extends RtlMixin(FocusMixin(LitElement)) {
 			/**
 			 * @ignore
 			 */
-			_compact: { attribute: 'data-compact', reflect: true, type: Boolean  },
+			_compact: { attribute: 'data-compact', reflect: true, type: Boolean },
 			/**
 			 * @ignore
 			 */

package/components/calendar/calendar.js

@@ -70,7 +70,7 @@ export function getDatesInMonthArray(shownMonth, shownYear) {
 	let nextMonthDay = 1;
 	let firstDateOfWeek = daysInWeek - numDaysFromPrevMonthToShow + 1;
 	const numWeeks = Math.ceil((numDaysFromPrevMonthToShow + numDays) / daysInWeek);
-	const nextMonth =  getNextMonth(shownMonth);
+	const nextMonth = getNextMonth(shownMonth);
 	const nextMonthYear = (shownMonth === 11) ? (shownYear + 1) : shownYear;
 	for (let i = 1; i < numWeeks; i++) {
 		const week = [];

package/components/count-badge/count-badge-mixin.js

@@ -101,7 +101,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 		};
 	}
 
-	static get styles()  {
+	static get styles() {
 		return [super.styles, offscreenStyles, css`
 			:host([hidden]) {
 				display: none;

package/components/count-badge/count-badge.js

@@ -43,7 +43,7 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	render() {
 		const tabbable = (this.tabStop || this.hasTooltip) && !(this.hideZero && this.number === 0) && !this.skeleton;
-		const innerHtml =  html`
+		const innerHtml = html`
 			<div
 			class="d2l-count-badge-wrapper d2l-skeletize"
 			id="${this._badgeId}"

package/components/demo/demo-snippet.js

@@ -219,9 +219,9 @@ class DemoSnippet extends LitElement {
 		});
 
 		return lines.join('\n')
-			.replace(/ class=""/g, '')      // replace empty class attributes (class="")
-			.replace(/_[^=]*="[^"]*"/, '')  // replace private reflected properties (_attr="value")
-			.replace(/=""/g, '');           // replace empty strings for boolean attributes (="")
+			.replace(/ class=""/g, '') // replace empty class attributes (class="")
+			.replace(/_[^=]*="[^"]*"/, '') // replace private reflected properties (_attr="value")
+			.replace(/=""/g, ''); // replace empty strings for boolean attributes (="")
 	}
 
 	async _handleFullscreenChange(e) {

package/components/dialog/dialog-fullscreen.js

@@ -296,8 +296,8 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 	}
 
 	_handleResize() {
-		this._icon =  mediaQueryList.matches ? 'tier1:close-small' : 'tier1:close-large-thick';
-		this._headerStyle =  mediaQueryList.matches ? 'd2l-heading-3' : 'd2l-heading-2';
+		this._icon = mediaQueryList.matches ? 'tier1:close-small' : 'tier1:close-large-thick';
+		this._headerStyle = mediaQueryList.matches ? 'd2l-heading-3' : 'd2l-heading-2';
 	}
 
 }

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

@@ -873,7 +873,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 		maxWidthOverride = `${maxWidthOverride}px`;
 		minWidthOverride = `${minWidthOverride}px`;
-		const  contentWidth = `${widthOverride + 18}px`;
+		const contentWidth = `${widthOverride + 18}px`;
 		/* add 2 to content width since scrollWidth does not include border */
 		const containerWidth = `${widthOverride + 20}px`;
 
@@ -1045,7 +1045,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	async _handleMobileResize() {
-		this._useMobileStyling =  this.mediaQueryList.matches;
+		this._useMobileStyling = this.mediaQueryList.matches;
 		if (this.opened) this._showBackdrop = this._useMobileStyling && this.mobileTray;
 		if (this.opened) await this.__position();
 	}
@@ -1125,7 +1125,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			</d2l-focus-trap>`;
 		}
 
-		const dropdown =  html`
+		const dropdown = html`
 			<div class="d2l-dropdown-content-position" style=${styleMap(positionStyle)}>
 					 ${dropdownContentSlots}
 			</div>

package/components/filter/demo/filter-load-more-demo.js

@@ -41,9 +41,9 @@ class FilterLoadMoreDemo extends LitElement {
 		super();
 		const dimensions = [];
 		for (const dim of FullData) {
-			const values =  {};
+			const values = {};
 			let selectedCount = 0;
-			for (const v of dim.values)  {
+			for (const v of dim.values) {
 				if (!v.selected) continue;
 				values[v.key] = { ...v };
 				selectedCount++;

package/components/filter/filter-dimension-set.js

@@ -116,6 +116,16 @@ class FilterDimensionSet extends LitElement {
 		}
 	}
 
+	willUpdate(changedProperties) {
+		if (changedProperties.has('hasMore') && this.hasMore) {
+			if (this.searchType !== 'manual') {
+				console.warn('Paging requires search type set to manual.');
+				this.hasMore = false;
+			}
+			else this.selectedFirst = true;
+		}
+	}
+
 	getSearchEmptyState() {
 		return this._getEmptyState(this._searchEmptyStateSlot, 'search');
 	}
@@ -138,16 +148,6 @@ class FilterDimensionSet extends LitElement {
 		return values;
 	}
 
-	willUpdate(changedProperties) {
-		if (changedProperties.has('hasMore') && this.hasMore) {
-			if (this.searchType !== 'manual') {
-				console.warn('Paging requires search type set to manual.');
-				this.hasMore = false;
-			}
-			else this.selectedFirst = true;
-		}
-	}
-
 	_dispatchDataChangeEvent(eventDetail) {
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-data-change', {

package/components/filter/filter.js

@@ -502,7 +502,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 						description="${this.localize('components.filter.searchResults', { number: count })}">
 					</d2l-empty-state-simple>
 				`;
-			searchResults =  html`
+			searchResults = html`
 				<div class="${classMap(classes)}" role="alert">
 					${emptyState}
 				</div>
@@ -714,7 +714,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		if (shouldSearch) this._performDimensionSearch(dimension);
 		if (shouldRecount) this._setFilterCounts(dimension);
-		if (shouldUpdate)  this.requestUpdate();
+		if (shouldUpdate) this.requestUpdate();
 		if (shouldResizeDropdown) {
 			this._requestDropdownResize();
 		}

package/components/inputs/input-time-range.js

@@ -216,7 +216,7 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 		const endLabel = this.endLabel ? this.endLabel : this.localize('components.input-time-range.endTime');
 
 		const startTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-time-range-start');
-		const endTimeInput =  this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-time-range-end');
+		const endTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-time-range-end');
 		/**
 		 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
 		 */

package/components/inputs/input-time.js

@@ -58,7 +58,7 @@ export function getDefaultTime(time, enforceTimeIntervals, timeInterval) {
 			const today = getToday();
 			const date = new Date(today.year, today.month - 1, today.date, today.hours, today.minutes, 0);
 			const originalDate = new Date(date); // create new var for date for comparison
-			const timeAtInterval =  getTimeAtInterval(timeInterval, date);
+			const timeAtInterval = getTimeAtInterval(timeInterval, date);
 
 			// set to next interval if original time is already equal to an interval
 			if (timeAtInterval.getTime() === originalDate.getTime()) timeAtInterval.setMinutes(timeAtInterval.getMinutes() + getIntervalNumber(timeInterval));

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

@@ -132,7 +132,7 @@ class ListNestedIterationsHelper extends LitElement {
 			items.push(html`
 				<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" ?expandable="${childOptions[1] && i !== 1}" color="${ifDefined((childOptions[2] && i === 0) || childOptions[3] ? '#ff0000' : undefined)}">
 					<d2l-list-item-content>${childL2Text}</d2l-list-item-content>
-					${i === 1  || !childOptions[1] ? nothing : html`
+					${i === 1 || !childOptions[1] ? nothing : html`
 						<d2l-list slot="nested">
 							<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" color="${ifDefined(childOptions[3] ? '#00ff00' : undefined)}">
 								<d2l-list-item-content>${childL3Text}</d2l-list-item-content>

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

@@ -89,17 +89,17 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		this.selected = (this.selectionInfo.state === SelectionInfo.states.all);
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('selectionDisabled') && this.selectionDisabled === true) this._hoveringSelection = false;
+	}
+
 	setSelected(selected, suppressEvent = false) {
 		if (this.selected === selected || (this.selected === undefined && !selected)) return;
 		this.selected = selected;
 		if (!suppressEvent) this._dispatchSelected(selected);
 	}
 
-	willUpdate(changedProperties) {
-		super.willUpdate(changedProperties);
-		if (changedProperties.has('selectionDisabled') && this.selectionDisabled === true) this._hoveringSelection = false;
-	}
-
 	async _dispatchSelected(value) {
 		/* wait for internal state to be updated in case of action-click case so that a consumer
 		 calling getSelectionInfo will get the correct state */

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

@@ -218,7 +218,7 @@ export class NewPositionEventDetails {
 				list[i] = list[i - 1];
 			}
 		} else {
-			destination = this.dropLocation === dropLocation.above  ? Math.max(destination - 1, 0) : destination;
+			destination = this.dropLocation === dropLocation.above ? Math.max(destination - 1, 0) : destination;
 			for (let i = origin; i < destination; i++) {
 				list[i] = list[i + 1];
 			}

package/components/list/list-item-drag-handle.js

@@ -165,7 +165,7 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 
 	async _doAction(action) {
 		this._dispatchAction(action);
-		const cell = findComposedAncestor(this, (parent) =>  parent.hasAttribute && parent.hasAttribute('draggable'));
+		const cell = findComposedAncestor(this, (parent) => parent.hasAttribute && parent.hasAttribute('draggable'));
 		if (cell) await cell.updateComplete;
 		await this.updateComplete;
 		this.focus();

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

@@ -23,7 +23,7 @@ export const ListItemExpandCollapseMixin = superclass => class extends SkeletonM
 			expanded: { type: Boolean, reflect: true },
 			_siblingHasNestedItems: { state: true },
 			_renderExpandCollapseSlot: { type: Boolean, reflect: true, attribute: '_render-expand-collapse-slot' },
-			_showNestedLoadingSpinner: {  state: true }
+			_showNestedLoadingSpinner: { state: true }
 		};
 	}
 

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

@@ -405,6 +405,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		}
 	}
 
+	willUpdate(changedProperties) {
+		if (changedProperties.has('_siblingHasColor') || changedProperties.has('color')) {
+			this._hasColorSlot = this.color || this._siblingHasColor;
+		}
+	}
+
 	focus() {
 		this._tryFocus();
 	}
@@ -451,12 +457,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._siblingHasColor = siblingHasColor;
 	}
 
-	willUpdate(changedProperties) {
-		if (changedProperties.has('_siblingHasColor') || changedProperties.has('color')) {
-			this._hasColorSlot = this.color || this._siblingHasColor;
-		}
-	}
-
 	_getFlattenedListItems(listItem) {
 		const listItems = new Map();
 		const lazyLoadListItems = new Map();

package/components/list/list.js

@@ -290,7 +290,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	_getLazyLoadItems() {
 		const items = this.getItems();
-		return items.length > 0 ?  items[0]._getFlattenedListItems().lazyLoadListItems : new Map();
+		return items.length > 0 ? items[0]._getFlattenedListItems().lazyLoadListItems : new Map();
 	}
 
 	_handleKeyDown(e) {

package/components/meter/meter-circle.js

@@ -57,7 +57,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 
 		const primary = this._primary(this.value, this.max) || '';
 		const secondary = this._secondary(this.value, this.max, this.text);
-		const textClasses =  {
+		const textClasses = {
 			'd2l-meter-circle-text-ltr': !this.percent,
 			'd2l-body-standard': true,
 			'd2l-meter-circle-text': true

package/components/meter/meter-linear.js

@@ -112,12 +112,12 @@ class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
 		}
 		const primary = this._primary(this.value, this.max);
 		const secondary = this._secondary(this.value, this.max, this.text);
-		const textClasses =  {
+		const textClasses = {
 			'd2l-meter-linear-text-space-between': !this.textInline && secondary !== this.text,
 			'd2l-body-small': true,
 			'd2l-meter-linear-text': true
 		};
-		const primaryTextClasses =  {
+		const primaryTextClasses = {
 			'd2l-meter-linear-primary-ltr': !this.percent,
 			'd2l-meter-linear-primary': true
 		};

package/components/meter/meter-radial.js

@@ -62,7 +62,7 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
 		const primary = this._primary(this.value, this.max);
 		const secondary = this._secondary(this.value, this.max, this.text);
 		const secondaryTextElement = this.text ? html`<div class="d2l-body-small d2l-meter-radial-text">${secondary}</div>` : html``;
-		const textClasses =  {
+		const textClasses = {
 			'd2l-meter-radial-text-ltr': !this.percent,
 			'd2l-heading-4': true,
 			'd2l-meter-radial-text': true

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

@@ -36,8 +36,8 @@ function createMenuItem(node) {
 }
 
 function createMenuItemLink(node) {
-	const text =  node.textContent.trim();
-	const href =  node.href;
+	const text = node.textContent.trim();
+	const href = node.href;
 	const target = node.target;
 
 	return html`<d2l-menu-item-link
@@ -186,7 +186,7 @@ class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 	_createMenuItemMenu(node) {
 		const menuOpener =
 			node.querySelector('d2l-dropdown-button')
-			||  node.querySelector('d2l-dropdown-button-subtle');
+			|| node.querySelector('d2l-dropdown-button-subtle');
 
 		const openerText = node.text || menuOpener.text;
 		const disabled = !!node.disabled;

package/components/selection/selection-mixin.js

@@ -182,7 +182,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
 
 		if (!selectionInput) {
 			// no selection-input since next/previous focusable is before/after list... cycle to first/last
-			focusable = forward ?  getFirstFocusableDescendant(this, false) : getLastFocusableDescendant(this, false);
+			focusable = forward ? getFirstFocusableDescendant(this, false) : getLastFocusableDescendant(this, false);
 			selectionInput = getSelectionInput(focusable, forward);
 		}
 

package/components/skeleton/skeleton-group-mixin.js

@@ -12,7 +12,7 @@ export const SkeletonGroupMixin = dedupeMixin(superclass => class extends Skelet
 
 	constructor() {
 		super();
-		this._anySubscribersWithSkeletonActive  = false;
+		this._anySubscribersWithSkeletonActive = false;
 		this._skeletonSubscribers = new SubscriberRegistryController(this, 'skeleton', {
 			onSubscribe: this.onSubscriberChange.bind(this),
 			onUnsubscribe: this.onSubscriberChange.bind(this),

package/components/tooltip/tooltip.js

@@ -490,6 +490,15 @@ class Tooltip extends RtlMixin(LitElement) {
 		}
 	}
 
+	async getUpdateComplete() {
+		const fontsPromise = document.fonts ? document.fonts.ready : Promise.resolve();
+		await super.getUpdateComplete();
+		/* wait for the fonts to load because browsers have a font block period
+		where they will render an invisible fallback font face that may result in
+		improper width calculations before the real font is loaded */
+		await fontsPromise;
+	}
+
 	render() {
 		const tooltipPositionStyle = {
 			maxWidth: this._maxWidth ? `${this._maxWidth}px` : null
@@ -542,15 +551,6 @@ class Tooltip extends RtlMixin(LitElement) {
 		});
 	}
 
-	async getUpdateComplete() {
-		const fontsPromise = document.fonts ? document.fonts.ready : Promise.resolve();
-		await super.getUpdateComplete();
-		/* wait for the fonts to load because browsers have a font block period
-		where they will render an invisible fallback font face that may result in
-		improper width calculations before the real font is loaded */
-		await fontsPromise;
-	}
-
 	hide() {
 		this._isHovering = false;
 		this._isFocusing = false;

package/components/typography/demo/typography.html

@@ -59,6 +59,21 @@
 				<blockquote class="d2l-blockquote">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</blockquote>
 			</d2l-demo-snippet>
 
+			<h2>BC Sans</h2>
+
+			<div class="d2l-body-small">Showing a small selection of glyphs from Canadian Aboriginal blocks known to be different. For a detailed comparison, see the <a href="https://github.com/Brightspace/fonts-lib">fonts-lib</a>'s demo.</div>
+			<d2l-demo-snippet>
+				<div class="d2l-body-standard" style="font-family: BC Sans, sans-serif;">
+					<p>Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+					<p style="font-weight: 300;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
+					<p>ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
+					<p style="font-weight: 700;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
+					<p style="font-style: italic; font-weight: 300;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
+					<p style="font-style: italic;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
+					<p style="font-style: italic; font-weight: 700;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
+				</div>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

package/components/typography/typography.js

@@ -1,9 +1,15 @@
 import '../colors/colors.js';
 
-export const importUrl = 'https://s.brightspace.com/lib/fonts/0.5.0/assets/';
+export const importUrl = 'https://s.brightspace.com/lib/fonts/0.6.0/assets/';
 export const fonts = {
-	regular: 'Lato-400',
-	bold: 'Lato-700'
+	LatoRegular: 'Lato-400',
+	LatoBold: 'Lato-700',
+	BCSansLight: 'BCSans-Light',
+	BCSansRegular: 'BCSans-Regular',
+	BCSansBold: 'BCSans-Bold',
+	BCSansLightItalic: 'BCSans-LightItalic',
+	BCSansItalic: 'BCSans-Italic',
+	BCSansBoldItalic: 'BCSans-BoldItalic'
 };
 
 if (!document.head.querySelector('#d2l-typography-font-face')) {
@@ -22,13 +28,49 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 			font-family: 'Lato';
 			font-style: normal;
 			font-weight: 400;
-			src: local('Lato Regular'), local('Lato-Regular'), url(${new URL(`${fonts.regular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.regular}.woff`, importUrl)}) format('woff'), url(${new URL(`${fonts.regular}.ttf`, importUrl)}) format('truetype');
+			src: local('Lato Regular'), local('Lato-Regular'), url(${new URL(`${fonts.LatoRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoRegular}.woff`, importUrl)}) format('woff'), url(${new URL(`${fonts.LatoRegular}.ttf`, importUrl)}) format('truetype');
 		}
 		@font-face {
 			font-family: 'Lato';
 			font-style: normal;
 			font-weight: 700;
-			src: local('Lato Bold'), local('Lato-Bold'), url(${new URL(`${fonts.bold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.bold}.woff`, importUrl)}) format('woff'), url(${new URL(`${fonts.bold}.ttf`, importUrl)}) format('truetype');
+			src: local('Lato Bold'), local('Lato-Bold'), url(${new URL(`${fonts.LatoBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoBold}.woff`, importUrl)}) format('woff'), url(${new URL(`${fonts.LatoBold}.ttf`, importUrl)}) format('truetype');
+		}
+		@font-face {
+			font-family: 'BC Sans';
+			font-style: normal;
+			font-weight: 300;
+			src: url(${new URL(`${fonts.BCSansLight}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLight}.woff`, importUrl)}) format('woff');
+		}
+		@font-face {
+			font-family: 'BC Sans';
+			font-style: normal;
+			font-weight: 400;
+			src: url(${new URL(`${fonts.BCSansRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansRegular}.woff`, importUrl)}) format('woff');
+		}
+		@font-face {
+			font-family: 'BC Sans';
+			font-style: normal;
+			font-weight: 700;
+			src: url(${new URL(`${fonts.BCSansBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBold}.woff`, importUrl)}) format('woff');
+		}
+		@font-face {
+			font-family: 'BC Sans';
+			font-style: italic;
+			font-weight: 300;
+			src: url(${new URL(`${fonts.BCSansLightItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLightItalic}.woff`, importUrl)}) format('woff');
+		}
+		@font-face {
+			font-family: 'BC Sans';
+			font-style: italic;
+			font-weight: 400;
+			src: url(${new URL(`${fonts.BCSansItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansItalic}.woff`, importUrl)}) format('woff');
+		}
+		@font-face {
+			font-family: 'BC Sans';
+			font-style: italic;
+			font-weight: 700;
+			src: url(${new URL(`${fonts.BCSansBoldItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBoldItalic}.woff`, importUrl)}) format('woff');
 		}
 
 		.d2l-typography {

package/components/typography/typography.scss

@@ -41,13 +41,49 @@
 		font-family: 'Lato';
 		font-style: normal;
 		font-weight: 400;
-		src: url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-400.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-400.woff) format('woff');
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/Lato-400.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/Lato-400.woff) format('woff');
 	}
 	@font-face {
 		font-family: 'Lato';
 		font-style: normal;
 		font-weight: 700;
-		src: url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-700.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-700.woff) format('woff');
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/Lato-700.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/Lato-700.woff) format('woff');
+	}
+	@font-face {
+		font-family: 'BC Sans';
+		font-style: normal;
+		font-weight: 300;
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Light.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Light.woff) format('woff');
+	}
+	@font-face {
+		font-family: 'BC Sans';
+		font-style: normal;
+		font-weight: 400;
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Regular.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Regular.woff) format('woff');
+	}
+	@font-face {
+		font-family: 'BC Sans';
+		font-style: normal;
+		font-weight: 700;
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Bold.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Bold.woff) format('woff');
+	}
+	@font-face {
+		font-family: 'BC Sans';
+		font-style: italic;
+		font-weight: 300;
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-LightItalic.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-LightItalic.woff) format('woff');
+	}
+	@font-face {
+		font-family: 'BC Sans';
+		font-style: italic;
+		font-weight: 400;
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Italic.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-Italic.woff) format('woff');
+	}
+	@font-face {
+		font-family: 'BC Sans';
+		font-style: italic;
+		font-weight: 700;
+		src: url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-BoldItalic.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.6.0/assets/BCSans-BoldItalic.woff) format('woff');
 	}
 }
 

package/helpers/getLocalizeResources.js

@@ -155,7 +155,7 @@ function fetchWithQueuing(resource) {
 
 function formatCacheKey(resource) {
 
-	return  formatOsloRequest(documentLocaleSettings.oslo.collection, resource);
+	return formatOsloRequest(documentLocaleSettings.oslo.collection, resource);
 }
 
 async function fetchWithCaching(resource) {

package/helpers/mathjax.js

@@ -23,7 +23,7 @@ const mathjaxFontMappings = new Map([
 	['MJXTEX-FRB', 'MathJax_Fraktur-Bold'],
 	['MJXTEX-SS', 'MathJax_SansSerif-Regular'],
 	['MJXTEX-SSB', 'MathJax_SansSerif-Bold'],
-	['MJXTEX-SSI',  'MathJax_SansSerif-Italic'],
+	['MJXTEX-SSI', 'MathJax_SansSerif-Italic'],
 	['MJXTEX-SC', 'MathJax_Script-Regular'],
 	['MJXTEX-T', 'MathJax_Typewriter-Regular'],
 	['MJXTEX-V', 'MathJax_Vector-Regular'],

package/mixins/localize/localize-mixin.js

@@ -10,7 +10,7 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinC
 
 	static get properties() {
 		return {
-			__resources: { type: Object, attribute: false  }
+			__resources: { type: Object, attribute: false }
 		};
 	}
 
@@ -61,6 +61,16 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinC
 		this.__updatedProperties.clear();
 	}
 
+	async getUpdateComplete() {
+		await super.getUpdateComplete();
+		const hasResources = this._hasResources();
+		const resourcesLoaded = this.__resources !== undefined;
+		if (!hasResources || resourcesLoaded) {
+			return;
+		}
+		await this.__resourcesLoadedPromise;
+	}
+
 	shouldUpdate(changedProperties) {
 
 		const hasResources = this._hasResources();
@@ -87,16 +97,6 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinC
 
 	}
 
-	async getUpdateComplete() {
-		await super.getUpdateComplete();
-		const hasResources = this._hasResources();
-		const resourcesLoaded = this.__resources !== undefined;
-		if (!hasResources || resourcesLoaded) {
-			return;
-		}
-		await this.__resourcesLoadedPromise;
-	}
-
 	localize(key) {
 
 		const { language, value } = this.__resources?.[key] ?? {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.167.2",
+  "version": "2.168.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -53,7 +53,7 @@
     "@web/dev-server": "^0.2",
     "chalk": "^5",
     "eslint": "^8",
-    "eslint-config-brightspace": "^0.23",
+    "eslint-config-brightspace": "^0.25",
     "glob-all": "^3",
     "messageformat-validator": "^2",
     "node-sass": "^9",

package/templates/primary-secondary/primary-secondary.js

@@ -513,7 +513,7 @@ class MobileTouchResizer extends Resizer {
 		let isScrollable;
 		let secondaryHeight = this.panelSize;
 		if (delta > 0) {
-			if (isScrollingDivider ||  curScroll === 0) {
+			if (isScrollingDivider || curScroll === 0) {
 				secondaryHeight = this.clampMaxHeight(this.panelSize - delta);
 			}
 			isScrollable = curScroll > 0;