@brightspace-ui/core 3.156.0 → 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/components/typography/styles.js

@@ -504,15 +504,21 @@ export const fontFacesCss = `@font-face {
 export const baseTypographyStyles = css`
 	${unsafeCSS(fontFacesCss)}
 	html {
+		--d2l-cursor-resize-inline-end: e-resize;
+		--d2l-cursor-resize-inline-start: w-resize;
 		--d2l-document-direction: ltr;
 		--d2l-inline-end: right;
 		--d2l-inline-start: left;
+		--d2l-length-factor: 1;
 		--d2l-mirror-transform: none;
 	}
 	html[dir="rtl"] {
+		--d2l-cursor-resize-inline-end: w-resize;
+		--d2l-cursor-resize-inline-start: e-resize;
 		--d2l-document-direction: rtl;
 		--d2l-inline-end: left;
 		--d2l-inline-start: right;
+		--d2l-length-factor: -1;
 		--d2l-mirror-transform: scale(-1, 1);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.156.0",
+  "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",

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

@@ -8,7 +8,6 @@ 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 { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -28,6 +27,10 @@ const keyCodes = Object.freeze({
 	SPACE: 32
 });
 
+function isRtl() {
+	return document.documentElement.getAttribute('dir') === 'rtl';
+}
+
 function isMobile() {
 	return matchMedia('only screen and (max-width: 767px)').matches;
 }
@@ -49,7 +52,6 @@ class Resizer {
 		this.contentBounds = null;
 		this.isCollapsed = false;
 		this.isMobile = false;
-		this.isRtl = false;
 		this.panelSize = 0;
 		this.secondaryFirst = false;
 		this._wasCollapsed = false;
@@ -126,7 +128,7 @@ class DesktopKeyboardResizer extends Resizer {
 		e.preventDefault();
 
 		// The direction of the container is flipped if exactly one of isRtl and secondaryFirst is true
-		const isFlipped = this.isRtl ^ this.secondaryFirst;
+		const isFlipped = isRtl() ^ this.secondaryFirst;
 		const direction = e.keyCode === keyCodes.LEFT && !isFlipped
 			|| e.keyCode === keyCodes.RIGHT && isFlipped ? 1 : -1;
 		let secondaryWidth;
@@ -196,7 +198,7 @@ class DesktopMouseResizer extends Resizer {
 	_computeContentX(clientX) {
 		const x = clientX - this.contentRect.left;
 		// The direction of the container is flipped if exactly one of isRtl and secondaryFirst is true
-		return this.isRtl ^ this.secondaryFirst ? x : this.contentRect.width - x;
+		return isRtl() ^ this.secondaryFirst ? x : this.contentRect.width - x;
 	}
 
 	_onMouseDown(e) {
@@ -546,7 +548,7 @@ class MobileTouchResizer extends Resizer {
  * @fires d2l-template-primary-secondary-resize-start - Dispatched when a user begins moving the divider.
  * @fires d2l-template-primary-secondary-resize-end - Dispatched when a user finishes moving the divider.
  */
-class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement)) {
+class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -673,13 +675,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 			:host([resizable]) [data-is-collapsed] aside {
 				visibility: hidden;
 			}
-			:host([resizable]:not([dir="rtl"]):not([secondary-first])) aside,
-			:host([resizable][dir="rtl"][secondary-first]) aside {
-				float: left;
-			}
-			:host([resizable][dir="rtl"]:not([secondary-first])) aside,
-			:host([resizable]:not([dir="rtl"])[secondary-first]) aside {
-				float: right;
+			:host([resizable]:not([secondary-first])) aside {
+				float: inline-start;
 			}
 			.d2l-template-primary-secondary-divider,
 			.d2l-template-primary-secondary-divider-not-resizable {
@@ -701,26 +698,22 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				cursor: ew-resize;
 				width: 0.45rem;
 			}
-			:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider,
-			:host([resizable][dir="rtl"]) [data-is-expanded] .d2l-template-primary-secondary-divider {
-				cursor: w-resize;
+			:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {
+				cursor: var(--d2l-cursor-resize-inline-end, e-resize);
 			}
-			:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider,
-			:host([resizable][dir="rtl"]) [data-is-collapsed] .d2l-template-primary-secondary-divider {
-				cursor: e-resize;
+			:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {
+				cursor: var(--d2l-cursor-resize-inline-start, w-resize);
 			}
 			:host([resizable]) .d2l-template-primary-secondary-divider-handle {
 				align-items: center;
 				display: flex;
 				justify-content: center;
 			}
-			:host([resizable]) [data-background-shading="secondary"] .d2l-template-primary-secondary-divider,
-			:host([resizable][dir="rtl"]) [data-background-shading="primary"] .d2l-template-primary-secondary-divider {
-				box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.15);
+			:host([resizable]) [data-background-shading="secondary"] .d2l-template-primary-secondary-divider {
+				box-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);
 			}
-			:host([resizable]) [data-background-shading="primary"] .d2l-template-primary-secondary-divider,
-			:host([resizable][dir="rtl"]) [data-background-shading="secondary"] .d2l-template-primary-secondary-divider {
-				box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.15);
+			:host([resizable]) [data-background-shading="primary"] .d2l-template-primary-secondary-divider {
+				box-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);
 			}
 			.d2l-template-primary-secondary-divider-handle-desktop {
 				align-items: center;
@@ -735,10 +728,10 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				position: absolute;
 			}
 			.d2l-template-primary-secondary-divider-handle-left {
-				left: -1rem;
+				inset-inline-start: -1rem;
 			}
 			.d2l-template-primary-secondary-divider-handle-right {
-				right: -1rem;
+				inset-inline-end: -1rem;
 			}
 			.d2l-template-primary-secondary-divider-handle-line {
 				display: flex;
@@ -758,12 +751,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 			.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {
 				display: block;
 			}
-			:host(:not([dir="rtl"]):not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,
-			:host([dir="rtl"][secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left {
-				display: none;
-			}
-			:host(:not([dir="rtl"])[secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right,
-			:host([dir="rtl"]:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {
+			:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,
+			:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {
 				display: none;
 			}
 			d2l-icon {
@@ -781,14 +770,11 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 			}
 
 			:host([resizable]) .d2l-template-primary-secondary-divider:focus,
-			:host([resizable]) .d2l-template-primary-secondary-divider:hover,
-			:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider:focus,
-			:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider:hover {
+			:host([resizable]) .d2l-template-primary-secondary-divider:hover {
 				background-color: var(--d2l-color-mica);
 				box-shadow: none;
 			}
-			:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())},
-			:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {
+			:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: var(--d2l-color-celestine);
 			}
 			.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,
@@ -897,15 +883,10 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 					border-radius: 0;
 					bottom: 0.1rem;
 					display: block;
-					left: auto;
+					inset-inline-end: calc(17px + 0.2rem);
 					overflow: hidden;
-					right: calc(17px + 0.2rem);
 					top: auto;
 				}
-				:host([dir="rtl"]) .d2l-template-primary-secondary-divider-handle {
-					left: calc(17px + 0.2rem);
-					right: auto;
-				}
 				.d2l-template-primary-secondary-divider-handle-mobile {
 					align-items: center;
 					background-color: var(--d2l-color-celestine);
@@ -928,13 +909,9 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {
 					box-shadow: none;
 					height: 1.2rem;
-					right: 17px;
+					inset-inline-end: 17px;
 					width: 2.6rem;
 				}
-				:host([dir="rtl"]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {
-					left: 17px;
-					right: auto;
-				}
 				d2l-icon {
 					color: white;
 					display: block;
@@ -1038,13 +1015,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 	}
 
 	firstUpdated(changedProperties) {
-
 		super.firstUpdated(changedProperties);
 
-		const isRtl = this.getAttribute('dir') === 'rtl';
-		for (const resizer of this._resizers) {
-			resizer.isRtl = isRtl;
-		}
 		const contentArea = this.shadowRoot.querySelector('.d2l-template-primary-secondary-content');
 		this._resizeObserver = new ResizeObserver(this._onContentResize);
 		this._resizeObserver.observe(contentArea);
@@ -1290,13 +1262,13 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				<div class="d2l-template-primary-secondary-divider-handle" @click=${this._onHandleTap} @mousedown=${this._onHandleTapStart}>
 					<div class="d2l-template-primary-secondary-divider-handle-desktop">
 						<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-left">
-							<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+							<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg">
 								<path transform="rotate(90 9.004714965820312,9.000227928161623)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
 							</svg>
 						</d2l-icon-custom>
 						<div class="d2l-template-primary-secondary-divider-handle-line"></div>
 						<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-right">
-							<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+							<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg">
 								<path transform="rotate(-90 9.004714965820314,9.000227928161621)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
 							</svg>
 						</d2l-icon-custom>