@brightspace-ui/core 3.155.0 → 3.155.2

package/components/calendar/calendar.js

@@ -11,7 +11,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const daysInWeek = 7;
 const keyCodes = {
@@ -148,7 +147,7 @@ export function getPrevMonth(month) {
  * A component can be used to display a responsively sized calendar that allows for date selection.
  * @slot - Content displayed under the calendar (e.g., buttons)
  */
-class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
+class Calendar extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -712,6 +711,8 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		let preventDefault = false;
 
+		const isRtl = (document.documentElement.getAttribute('dir') === 'rtl');
+
 		switch (e.keyCode) {
 			case keyCodes.ENTER:
 			case keyCodes.SPACE:
@@ -728,17 +729,17 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				break;
 			case keyCodes.LEFT:
 				preventDefault = true; // needed for voiceover in safari to properly read aria-label on dates
-				await this._onKeyDownUpdateFocusDate(this.dir === 'rtl' ? 1 : -1);
+				await this._onKeyDownUpdateFocusDate(isRtl ? 1 : -1);
 				break;
 			case keyCodes.RIGHT:
 				preventDefault = true; // needed for voiceover in safari to properly read aria-label on dates
-				await this._onKeyDownUpdateFocusDate(this.dir === 'rtl' ? -1 : 1);
+				await this._onKeyDownUpdateFocusDate(isRtl ? -1 : 1);
 				break;
 			case keyCodes.HOME: {
 				preventDefault = true;
 				let numDaysChange;
 				const dayOfTheWeek = this._focusDate.getDay();
-				if (this.dir === 'rtl') {
+				if (isRtl) {
 					numDaysChange = 6 - dayOfTheWeek + calendarData.firstDayOfWeek;
 					if (numDaysChange > 6) {
 						numDaysChange -= daysInWeek;
@@ -762,7 +763,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				preventDefault = true;
 				let numDaysChange;
 				const dayOfTheWeek = this._focusDate.getDay();
-				if (this.dir === 'rtl') {
+				if (isRtl) {
 					numDaysChange = dayOfTheWeek - calendarData.firstDayOfWeek;
 					if (numDaysChange < 0) {
 						numDaysChange += daysInWeek;
@@ -898,7 +899,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 	_triggerMonthChangeAnimations(increase, keyboardTriggered, transitionUpDown) {
 		this._monthNav = undefined;
-		increase = this.dir === 'rtl' ? !increase : increase;
+		increase = document.documentElement.getAttribute('dir') === 'rtl' ? !increase : increase;
 		if (!keyboardTriggered) this._isInitialFocusDate = true;
 		if (!reduceMotion) {
 			setTimeout(() => {

package/components/collapsible-panel/collapsible-panel.js

@@ -9,7 +9,6 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const normalizeHeadingStyle = (number) => {
@@ -53,7 +52,7 @@ function addTabListener() {
  * @fires d2l-collapsible-panel-expand - Dispatched when the panel is expanded
  * @fires d2l-collapsible-panel-collapse - Dispatched when the panel is collapsed
  */
-class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
+class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -261,11 +260,9 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				margin: 0.6rem;
 				margin-inline-end: var(--d2l-collapsible-panel-spacing-inline);
 				position: relative;
-				width: 0.9rem;
-			}
-			:host([dir="rtl"]) d2l-icon-custom {
-				transform: scale(-1, 1);
+				transform: var(--d2l-mirror-transform, ${document.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
 				transform-origin: center;
+				width: 0.9rem;
 			}
 			d2l-icon-custom svg {
 				position: absolute;

package/components/dropdown/dropdown-button.js

@@ -3,13 +3,12 @@ import '../icons/icon.js';
 import { css, html, LitElement } from 'lit';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A "d2l-button" opener for dropdown content.
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
  */
-class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
+class DropdownButton extends DropdownOpenerMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -36,17 +35,13 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
 		return [dropdownOpenerStyles, css`
 			d2l-icon {
 				height: 0.8rem;
-				margin-left: 0.6rem;
+				margin-inline-start: 0.6rem;
 				pointer-events: none;
 				width: 0.8rem;
 			}
 			:host([primary]) d2l-icon {
 				color: white;
 			}
-			:host([dir="rtl"]) d2l-icon {
-				margin-left: 0;
-				margin-right: 0.6rem;
-			}
 			d2l-button {
 				width: 100%;
 			}

package/package.json

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