@brightspace-ui/core 3.221.0 → 3.221.2

package/components/alert/alert-toast.js

@@ -2,7 +2,6 @@ import './alert.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

package/components/backdrop/backdrop-loading.js

@@ -90,8 +90,8 @@ class LoadingBackdrop extends LitElement {
 	render() {
 		if (this._state === 'hidden') return nothing;
 		return html`
-			<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}" size="${LOADING_SPINNER_SIZE}"></div>
-			<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })}></d2l-loading-spinner>
+			<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}"></div>
+			<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
 		`;
 	}
 	updated(changedProperties) {

package/components/button/button-add.js

@@ -166,7 +166,7 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
 
 	render() {
 		const text = this.text || this.localize('components.button-add.addItem');
-		const id = !this.mode !== MODE.icon_and_text ? this._buttonId : undefined;
+		const id = this.mode !== MODE.icon_and_text ? this._buttonId : undefined;
 
 		const content = this.mode !== MODE.icon_and_text
 			? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.icon_when_interacted}" animation-type="opacity"></d2l-button-add-icon-text>`

package/components/card/card-footer-link.js

@@ -46,9 +46,9 @@ class CardFooterLink extends FocusMixin(LitElement) {
 			secondaryCount: { type: Number, attribute: 'secondary-count', reflect: true },
 			/**
 			 * Maximum digits to display in the secondary count. Defaults to no limit
-			 * @type {string}
+			 * @type {number}
 			 */
-			secondaryCountMaxDigits: { type: String, attribute: 'secondary-count-max-digits' },
+			secondaryCountMaxDigits: { type: Number, attribute: 'secondary-count-max-digits' },
 			/**
 			 * Controls the style of the secondary count bubble
 			 * @type {'count'|'notification'}

package/components/card/card.js

@@ -1,12 +1,23 @@
 import '../colors/colors.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const GAUD_8697_FEATURE_FLAG = getFlag('GAUD-8697-card-badge-center-flag', true);
+
+// TODO: move this css statement to where this function is being called, when the FF is removed
+const getCenterCardBadgeCSS = () => {
+	return css`
+	:host([align-center]) .d2l-card-badge {
+		display: flex;
+		justify-content: center;
+	}`;
+};
+
 /**
  * A container element that provides specific layout using several slots.
  * @slot content - Slot for primary content such as title and supplementary info (no actionable elements)
@@ -137,6 +148,7 @@ class Card extends LitElement {
 				text-align: center;
 			}
 
+			${GAUD_8697_FEATURE_FLAG ? getCenterCardBadgeCSS() : css``}
 			.d2l-card-footer-hidden .d2l-card-content {
 				padding-bottom: 1.2rem;
 			}

package/components/description-list/description-list-wrapper.js

@@ -1,7 +1,6 @@
 import { _generateBodyCompactStyles, _generateLabelStyles } from '../typography/styles.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 export const descriptionListStyles = [
 	_generateLabelStyles('d2l-dl-wrapper > dl > dt'),

package/components/empty-state/empty-state-action-button.js

@@ -53,7 +53,7 @@ class EmptyStateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement
 				detail: {}
 			});
 			this.dispatchEvent(e);
-			this._illustrated = e.detail.illustrated | false;
+			this._illustrated = e.detail.illustrated || false;
 		});
 	}
 

package/components/empty-state/empty-state-illustrated.js

@@ -5,7 +5,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { EmptyStateMixin } from './empty-state-mixin.js';
 import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { runAsync } from '../../directives/run-async/run-async.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';

package/components/filter/filter.js

@@ -10,6 +10,7 @@ import '../empty-state/empty-state-action-link.js';
 import '../empty-state/empty-state-simple.js';
 import '../expand-collapse/expand-collapse-content.js';
 import '../hierarchical-view/hierarchical-view.js';
+import '../icons/icon.js';
 import '../inputs/input-search.js';
 import '../list/list.js';
 import '../list/list-item.js';

package/components/form/form-error-summary.js

@@ -1,4 +1,5 @@
 import '../alert/alert.js';
+import '../button/button-icon.js';
 import '../expand-collapse/expand-collapse-content.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { linkStyles } from '../link/link.js';

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -1,7 +1,6 @@
 import { findComposedAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { css } from 'lit';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const __nativeFocus = document.createElement('div').focus;

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

@@ -4,7 +4,6 @@ import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getOffsetParent } from '../../helpers/dom.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 function debounce(func, delay) {

package/components/inputs/input-date.js

@@ -14,7 +14,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

package/components/inputs/input-number.js

@@ -1,4 +1,5 @@
 import './input-text.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
 import { formatNumber, getNumberDescriptor, parseNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';

package/components/inputs/input-percent.js

@@ -100,7 +100,6 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
 		return html`
 			<d2l-input-number
 				?autofocus="${this.autofocus}"
-				@blur="${this._handleBlur}"
 				@change="${this._handleChange}"
 				class="vdiff-target"
 				?disabled="${this.disabled}"

package/components/inputs/input-text.js

@@ -141,9 +141,9 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			size: { type: Number },
 			/**
 			 * ADVANCED: For number inputs, sets the step size
-			 * @type {string}
+			 * @type {number}
 			 */
-			step: { type: String },
+			step: { type: Number },
 			/**
 			 * @ignore
 			 */
@@ -227,6 +227,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 				}
 				.d2l-input {
 					-webkit-appearance: textfield;
+					appearance: textfield;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
@@ -487,7 +488,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 						size="${ifDefined(this.size)}"
 						step="${ifDefined(this.step)}"
 						style="${styleMap(inputStyles)}"
-						tabindex="${ifDefined(this.tabindex)}"
 						title="${ifDefined(this.title)}"
 						type="${this._getType()}">
 					<div class="d2l-input-inside-before" @keypress="${this._suppressEvent}">${this.dir === 'rtl' ? unit : ''}<slot name="${firstSlotName}" @slotchange="${this._handleSlotChange}"></slot></div>

package/components/inputs/input-time.js

@@ -20,7 +20,6 @@ import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const MIDNIGHT = new Date(2020, 0, 1, 0, 0, 0);

package/components/list/list.js

@@ -3,7 +3,6 @@ import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
-import ResizeObserver from 'resize-observer-polyfill';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const keyCodes = {

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

@@ -17,8 +17,8 @@ class MenuItemSeparator extends LitElement {
 		`;
 	}
 
-	firstUpdated() {
-		super.firstUpdated();
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
 
 		this.setAttribute('role', 'separator');
 	}

package/components/more-less/more-less.js

@@ -7,7 +7,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { overflowHiddenDeclarations } from '../../helpers/overflow.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const transitionDur = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 400;

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

@@ -1,6 +1,5 @@
 import { css, html, nothing } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 export const OVERFLOW_CLASS = 'd2l-overflow-container';

package/components/scroll-wrapper/scroll-wrapper.js

@@ -4,7 +4,6 @@ import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 const RTL_MULTIPLIER = navigator.userAgent.indexOf('Edge/') > 0 ? 1 : -1; /* legacy-Edge doesn't reverse scrolling in RTL */
 const SCROLL_AMOUNT = 0.8;

package/components/selection/selection-input.js

@@ -1,4 +1,5 @@
 import '../inputs/input-checkbox.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';

package/components/table/demo/table-test.js

@@ -97,6 +97,11 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 						icon="tier1:${this.stickyHeaders ? 'check' : 'close-default'}"
 						@d2l-selection-action-click="${this._toggleStickyHeaders}"
 					></d2l-selection-action>
+					<d2l-selection-action
+						text="Loading"
+						icon="tier1:${this.loading ? 'check' : 'close-default'}"
+						@d2l-selection-action-click="${this._toggleLoading}"
+					></d2l-selection-action>
 				</d2l-table-controls>
 
 				<table class="d2l-table">
@@ -251,6 +256,9 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 		this.requestUpdate();
 	}
 
+	_toggleLoading() {
+		this.loading = !this.loading;
+	}
 	_toggleStickyControls() {
 		this.stickyControls = !this.stickyControls;
 	}

package/components/table/table-wrapper.js

@@ -6,7 +6,6 @@ import { cssSizes } from '../inputs/input-checkbox.js';
 import { getComposedParent } from '../../helpers/dom.js';
 import { isPopoverSupported } from '../popover/popover-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 import { usePopoverMixin as useTooltipPopover } from '../tooltip/tooltip.js';
 

package/components/tabs/tab-mixin.js

@@ -14,6 +14,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 			/**
 			 * @ignore
 			 */
+			// eslint-disable-next-line lit/no-native-attributes
 			hidden: { type: Boolean, reflect: true },
 			/**
 			 * Use to select the tab. Only one tab can be selected at a time.

package/components/tabs/tabs.js

@@ -11,7 +11,6 @@ import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

package/components/tag-list/tag-list.js

@@ -7,7 +7,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
 import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const CLEAR_ALL_THRESHOLD = 4;

package/components/tooltip/tooltip.js

@@ -9,7 +9,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { PopoverMixin } from '../popover/popover-mixin.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -1050,11 +1049,12 @@ if (usePopoverMixin) {
 
 		async getUpdateComplete() {
 			const fontsPromise = document.fonts ? document.fonts.ready : Promise.resolve();
-			await super.getUpdateComplete();
+			const ret = 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;
+			return ret;
 		}
 
 		render() {

package/custom-elements.json

@@ -1274,7 +1274,7 @@
         {
           "name": "secondary-count-max-digits",
           "description": "Maximum digits to display in the secondary count. Defaults to no limit",
-          "type": "string"
+          "type": "number"
         },
         {
           "name": "target",
@@ -1339,7 +1339,7 @@
           "name": "secondaryCountMaxDigits",
           "attribute": "secondary-count-max-digits",
           "description": "Maximum digits to display in the secondary count. Defaults to no limit",
-          "type": "string"
+          "type": "number"
         },
         {
           "name": "target",
@@ -7477,7 +7477,7 @@
         {
           "name": "step",
           "description": "ADVANCED: For number inputs, sets the step size",
-          "type": "string"
+          "type": "number"
         },
         {
           "name": "unit",
@@ -7652,7 +7652,7 @@
           "name": "step",
           "attribute": "step",
           "description": "ADVANCED: For number inputs, sets the step size",
-          "type": "string"
+          "type": "number"
         },
         {
           "name": "unit",

package/mixins/localize/localize-mixin.js

@@ -25,13 +25,14 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinB
 	}
 
 	async getUpdateComplete() {
-		await super.getUpdateComplete();
+		const ret = await super.getUpdateComplete();
 		const hasResources = this._hasResources();
 		const resourcesLoaded = this.localize.resources !== undefined && !this.pristine;
 		if (!hasResources || resourcesLoaded) {
-			return;
+			return ret;
 		}
 		await this.__resourcesLoadedPromise;
+		return ret;
 	}
 
 	shouldUpdate(changedProperties) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.221.0",
+  "version": "3.221.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -71,7 +71,6 @@
     "@open-wc/dedupe-mixin": "^2",
     "ifrau": "^0.41",
     "lit": "^3",
-    "prismjs": "^1",
-    "resize-observer-polyfill": "^1"
+    "prismjs": "^1"
   }
 }

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

@@ -9,7 +9,6 @@ import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js'
 import { classMap } from 'lit/directives/class-map.js';
 import { formatPercent } from '@brightspace-ui/intl';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;