@brightspace-ui/core 2.142.2 → 2.143.0

package/components/card/card.js

@@ -318,7 +318,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 	_onBadgeResize(entries) {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];
-		this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px`;
+		requestAnimationFrame(() => this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px`);
 	}
 
 	_onDropdownClose() {
@@ -334,7 +334,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		const entry = entries[0];
 		// firefox has a rounding error when calculating the height of the contentRect
 		// with `box-sizing: border-box;` so check for numbers which are close to 0 as well
-		this._footerHidden = (entry.contentRect.height < 1);
+		requestAnimationFrame(() => this._footerHidden = (entry.contentRect.height < 1));
 	}
 
 	_onLinkBlur() {

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

@@ -216,7 +216,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 			aria-live="${this.announceChanges ? 'polite' : 'off'}">
 			${innerHtml}
 		</div>
-		${this.hasTooltip && !this.skeleton ? html`<d2l-tooltip for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
+		${this.hasTooltip && !this.skeleton ? html`<d2l-tooltip class="vdiff-target" for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
 		`;
 	}
 };

package/components/tooltip/tooltip.js

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { cssEscape, elemIdListAdd, elemIdListRemove, getBoundingAncestor, getOffsetParent } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { bodySmallStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isFocusable } from '../../helpers/focus.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -501,11 +502,17 @@ class Tooltip extends RtlMixin(LitElement) {
 			}
 		}
 
+		const contentClasses = {
+			'd2l-tooltip-content': true,
+			'd2l-body-small': true,
+			'vdiff-target': this.showing
+		};
+
 		// Note: role="text" is a workaround for Safari. Otherwise, list-item content is not announced with VoiceOver
 		return html`
 			<div class="d2l-tooltip-container">
 				<div class="d2l-tooltip-position" style=${styleMap(tooltipPositionStyle)}>
-					<div class="d2l-body-small d2l-tooltip-content">
+					<div class="${classMap(contentClasses)}">
 						<div role="text">
 							<slot></slot>
 						</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.142.2",
+  "version": "2.143.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.30",
+    "@brightspace-ui/testing": "^0.32",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",