@brightspace-ui/core 3.153.1 → 3.153.2

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

@@ -26,8 +26,6 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 		return [super.styles, css`
 		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
 		:host {
-			/* for long numbers, center the number on the icon */
-			--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
 			display: inline-block;
 			/* symmetrical padding to prevent overflows for most numbers */
 			padding-left: 0.5rem;
@@ -45,16 +43,6 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 			padding-top: var(--d2l-count-badge-icon-padding-top);
 		}
 
-		:host([icon*="tier1:"]) {
-			--d2l-count-badge-icon-height: 18px;
-		}
-		:host([icon*="tier2:"]) {
-			--d2l-count-badge-icon-height: 24px;
-		}
-		:host([icon*="tier3:"]) {
-			--d2l-count-badge-icon-height: 30px;
-		}
-
 		d2l-tooltip[_open-dir="top"] {
 			margin-top: calc(0px - var(--d2l-count-badge-icon-padding-top));
 		}
@@ -87,17 +75,16 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 		const centerNumber = this.getNumberString().length >= 4;
 
 		if (centerNumber) {
-			const xPadding = 'var(--d2l-count-badge-icon-padding)';
+			// left 50% + translateX(-50%) will center for both LTR and RTL
 			numberStyles = {
 				... numberStyles,
-				transform: this.dir === 'rtl'
-					? `translateY(-50%) translateX(calc(0px - ${xPadding}))`
-					: `translateY(-50%) translateX(${xPadding})`
+				left: '50%',
+				transform: 'translate(-50%, -50%)'
 			};
 		} else {
 			numberStyles = {
 				... numberStyles,
-				[this.dir === 'rtl' ? 'left' : 'right'] : '-0.1rem',
+				insetInlineEnd: '-0.1rem',
 				transform: 'translateY(-50%)'
 			};
 		}

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

@@ -5,13 +5,12 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const maxBadgeDigits = 5;
 
-export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(RtlMixin(superclass))) {
+export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(superclass)) {
 
 	static get properties() {
 		return {

package/components/paging/pager-load-more.js

@@ -10,7 +10,6 @@ import { labelStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { PageableSubscriberMixin } from './pageable-subscriber-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const nativeFocus = document.createElement('div').focus;
 
@@ -19,7 +18,7 @@ const nativeFocus = document.createElement('div').focus;
  * @fires d2l-pager-load-more - Dispatched when the user clicks the load-more button. Consumers must call the provided "complete" method once items have been loaded.
  * @fires d2l-pager-load-more-loaded - Dispatched after more items have been loaded.
  */
-class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))) {
+class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
 
 	static get properties() {
 		return {

package/package.json

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