@brightspace-ui/core 3.156.1 → 3.156.2

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

@@ -7,7 +7,6 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { moveActions } from '../button/button-move.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = Object.freeze({
 	DOWN: 40,
@@ -43,7 +42,7 @@ let hasDisplayedKeyboardTooltip = false;
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
-class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElement))) {
+class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -186,6 +185,8 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 
 	async _onMoveButtonAction(e) {
 
+		const isRtl = document.documentElement.getAttribute('dir') === 'rtl';
+
 		let action = null;
 		switch (e.detail.action) {
 			case moveActions.up:
@@ -199,11 +200,11 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 				break;
 			case moveActions.right:
 				this._movingElement = true;
-				action = (this.dir === 'rtl' ? dragActions.unnest : dragActions.nest);
+				action = (isRtl ? dragActions.unnest : dragActions.nest);
 				break;
 			case moveActions.left:
 				this._movingElement = true;
-				action = (this.dir === 'rtl' ? dragActions.nest : dragActions.unnest) ;
+				action = (isRtl ? dragActions.nest : dragActions.unnest) ;
 				break;
 			case moveActions.rootHome:
 				this._movingElement = true;

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

@@ -4,10 +4,9 @@ import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(RtlMixin(LitElement))) {
+class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -24,7 +23,7 @@ class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(RtlMixin(LitEl
 			:host {
 				display: block;
 				height: 70px;
-				left: -10000px;
+				inset-inline-start: -10000px;
 				position: absolute;
 				width: 340px;
 				z-index: 0;
@@ -32,10 +31,6 @@ class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(RtlMixin(LitEl
 			:host([hidden]) {
 				display: none;
 			}
-			:host([dir="rtl"]) {
-				left: 0;
-				right: -10000px;
-			}
 			.first, .second, .third {
 				background-color: white;
 				border: 1px solid var(--d2l-color-mica);
@@ -90,7 +85,7 @@ class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(RtlMixin(LitEl
 				top: 30px;
 				z-index: 998; /* must be higher than the skeleton z-index */
 			}
-			:host([dir="rtl"]) .count {
+			.count:dir(rtl) {
 				left: 14px;
 			}
 		`];

package/components/list/list-item-generic-layout.js

@@ -3,7 +3,6 @@ import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, getFirstFocusableDescendant, getFocusableDescendants, getLastFocusableDescendant, getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { getFlag } from '../../helpers/flags.js';
 import { isInteractiveDescendant } from '../../mixins/interactive/interactive-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
 	DOWN: 40,
@@ -20,6 +19,10 @@ const keyCodes = {
 
 const listItemUpButtonFixFlag = getFlag('GAUD-8229-list-up-button-fix', true);
 
+function isRtl() {
+	return document.documentElement.getAttribute('dir') === 'rtl';
+}
+
 /**
  * A component for generating a list item's layout with forced focus ordering and grid support.
  * Focusable items placed in the "content" slot will have their focus removed; use the content-action
@@ -33,7 +36,7 @@ const listItemUpButtonFixFlag = getFlag('GAUD-8229-list-up-button-fix', true);
  * @slot actions - Other actions for the list item on the far right, such as a context menu
  * @slot nested - Optional `d2l-list` for creating nested lists
  */
-class ListItemGenericLayout extends RtlMixin(LitElement) {
+class ListItemGenericLayout extends LitElement {
 
 	static get properties() {
 		return {
@@ -289,7 +292,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	_focusFirstRow() {
 		const list = findComposedAncestor(this, (node) => node.tagName === 'D2L-LIST');
 		const row = list.firstElementChild.shadowRoot.querySelector('[role="gridcell"]');
-		if (this.dir === 'rtl') {
+		if (isRtl()) {
 			row._focusLastCell();
 		} else {
 			row._focusFirstCell();
@@ -312,7 +315,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	_focusLastRow() {
 		const list = findComposedAncestor(this, (node) => node.tagName === 'D2L-LIST');
 		const row = list.lastElementChild.shadowRoot.querySelector('[role="gridcell"]');
-		if (this.dir === 'rtl') {
+		if (isRtl()) {
 			row._focusFirstCell();
 		} else {
 			row._focusLastCell();
@@ -485,14 +488,14 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 		switch (e.keyCode) {
 			case keyCodes.RIGHT:
-				if (this.dir === 'rtl') {
+				if (isRtl()) {
 					this._focusPreviousWithinRow(focusInfo, focusables);
 				} else {
 					this._focusNextWithinRow(focusInfo, focusables);
 				}
 				break;
 			case keyCodes.LEFT:
-				if (this.dir === 'rtl') {
+				if (isRtl()) {
 					this._focusNextWithinRow(focusInfo, focusables);
 				} else {
 					this._focusPreviousWithinRow(focusInfo, focusables);
@@ -507,7 +510,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				this._focusNextRow(focusInfo);
 				break;
 			case keyCodes.HOME:
-				if (this.dir === 'rtl') {
+				if (isRtl()) {
 					if (e.ctrlKey) {
 						this._focusFirstRow();
 					} else {
@@ -525,7 +528,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				}
 				break;
 			case keyCodes.END:
-				if (this.dir === 'rtl') {
+				if (isRtl()) {
 					if (e.ctrlKey) {
 						// focus first item of last row
 						this._focusLastRow();

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

@@ -247,11 +247,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			[slot="content"] {
 				display: flex;
 				justify-content: start;
-				padding: 0.55rem 0.55rem 0.55rem 0;
-			}
-			:host([dir="rtl"]) [slot="content"] {
-				padding-left: 0.55rem;
-				padding-right: 0;
+				padding-block: 0.55rem;
+				padding-inline: 0 0.55rem;
 			}
 			:host([padding-type="none"]) [slot="content"] {
 				padding-bottom: 0;
@@ -292,12 +289,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 			.d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
 			.d2l-list-item-content-extend-separators .d2l-list-item-actions > * {
-				margin-right: 0.9rem;
-			}
-			:host([dir="rtl"]) .d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
-			:host([dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-actions > * {
-				margin-left: 0.9rem;
-				margin-right: 0;
+				margin-inline-end: 0.9rem;
 			}
 
 			d2l-selection-input {
@@ -453,31 +445,17 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				width: var(--d2l-list-item-color-width, 6px);
 			}
 			.d2l-list-item-color-outer {
-				padding: 2px 12px 1px 0;
-			}
-			:host([dir="rtl"]) .d2l-list-item-color-outer {
-				padding-left: 12px;
-				padding-right: 0;
+				padding-block: 2px 1px;
+				padding-inline: 0 12px;
 			}
 			:host(:not([_nested])) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
-				padding-left: 3px;
-			}
-			:host(:not([_nested])[dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
-				padding-left: 12px;
-				padding-right: 3px;
+				padding-inline-start: 3px;
 			}
 			:host([selectable]:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
-				padding-right: 0;
-			}
-			:host([selectable]:not([_render-expand-collapse-slot])[dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
-				padding-left: 0;
+				padding-inline-end: 0;
 			}
 			.d2l-list-item-color-outer + .d2l-list-expand-collapse {
-				margin-left: -6px;
-			}
-			:host([dir="rtl"]) .d2l-list-item-color-outer + .d2l-list-expand-collapse {
-				margin-left: 0;
-				margin-right: -6px;
+				margin-inline-start: -6px;
 			}
 
 			[slot="add"],

package/components/list/list-item-placement-marker.js

@@ -1,8 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
-class ListItemPlacementMarker extends RtlMixin(LitElement) {
+class ListItemPlacementMarker extends LitElement {
 
 	static get styles() {
 		return css`
@@ -26,32 +25,20 @@ class ListItemPlacementMarker extends RtlMixin(LitElement) {
 			.d2l-list-drag-marker-linecap {
 				fill: var(--d2l-color-celestine);
 				height: 12px;
-				margin-left: -1px;
-				margin-right: 0;
+				margin-inline: -1px 0;
 				stroke: none;
 				width: 4px;
 			}
 
-			:host([dir="rtl"]) .d2l-list-drag-marker-linecap {
-				margin-left: 0;
-				margin-right: -1px;
-			}
-
 			.d2l-list-drag-marker-circle {
 				fill: none;
 				height: 12px;
-				margin-left: 0;
-				margin-right: -1px;
+				margin-inline: 0 -1px;
 				stroke: var(--d2l-color-celestine);
 				stroke-width: 3px;
 				width: 12px;
 			}
 
-			:host([dir="rtl"]) .d2l-list-drag-marker-circle {
-				margin-left: -1px;
-				margin-right: 0;
-			}
-
 			.d2l-list-drag-marker {
 				display: flex;
 				flex-wrap: nowrap;

package/package.json

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