@brightspace-ui/core 3.88.3 → 3.89.0

package/components/popover/popover-mixin.js

@@ -63,7 +63,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				--d2l-popover-default-border-color: var(--d2l-color-mica);
 				--d2l-popover-default-border-radius: 0.3rem;
 				--d2l-popover-default-foreground-color: var(--d2l-color-ferrite);
-				--d2l-popover-default-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
+				--d2l-popover-default-shadow-color: rgba(0, 0, 0, 0.15);
 				background-color: transparent; /* override popover default */
 				border: none; /* override popover */
 				box-sizing: border-box;
@@ -75,8 +75,17 @@ export const PopoverMixin = superclass => class extends superclass {
 				overflow: visible; /* override popover */
 				padding: 0; /* override popover */
 				position: fixed; /* normalize popover */
+				text-align: start;
 				width: fit-content; /* normalize popover */
 			}
+			:host([theme="dark"]) {
+				--d2l-popover-default-animation-name: d2l-popover-animation-dark;
+				--d2l-popover-default-background-color: #333536; /* tungsten @ 70% */
+				--d2l-popover-default-border-color: var(--d2l-color-tungsten);
+				--d2l-popover-default-foreground-color: var(--d2l-color-sylvite);
+				--d2l-popover-default-shadow-color: rgba(0, 0, 0, 1);
+				opacity: 0.9;
+			}
 			:host([hidden]) {
 				display: none;
 			}
@@ -99,8 +108,9 @@ export const PopoverMixin = superclass => class extends superclass {
 				background-color: var(--d2l-popover-background-color, var(--d2l-popover-default-background-color));
 				border: 1px solid var(--d2l-popover-border-color, var(--d2l-popover-default-border-color));
 				border-radius: var(--d2l-popover-border-radius, var(--d2l-popover-default-border-radius));
-				box-shadow: var(--d2l-popover-shadow, var(--d2l-popover-default-shadow));
+				box-shadow: 0 2px 12px 0 var(--d2l-popover-shadow-color, var(--d2l-popover-default-shadow-color));
 				box-sizing: border-box;
+				display: flex;
 				max-width: 370px;
 				min-width: 70px;
 				width: 100vw;
@@ -109,6 +119,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				box-sizing: border-box;
 				display: inline-block;
 				max-width: 100%;
+				min-width: inherit;
 				outline: none;
 				overflow-y: auto;
 			}
@@ -142,6 +153,10 @@ export const PopoverMixin = superclass => class extends superclass {
 				0% { opacity: 0; transform: translate(0, -10px); }
 				100% { opacity: 1; transform: translate(0, 0); }
 			}
+			@keyframes d2l-popover-animation-dark {
+				0% { opacity: 0; transform: translate(0, -10px); }
+				100% { opacity: 0.9; transform: translate(0, 0); }
+			}
 			@media (prefers-reduced-motion: no-preference) {
 				:host([_opened]) {
 					animation: var(--d2l-popover-animation-name, var(--d2l-popover-default-animation-name)) 300ms ease;
@@ -259,6 +274,8 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		await this.updateComplete; // wait before applying focus to opener
 		this.#focusOpener();
+
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
 
 	}
@@ -290,7 +307,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._trapFocus = properties?.trapFocus ?? false;
 	}
 
-	async open(applyFocus = true) {
+	async open(opener, applyFocus = true) {
 		if (this._opened) return;
 
 		const ifrauBackdropService = await tryGetIfrauBackdropService();
@@ -306,10 +323,10 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this._previousFocusableAncestor = getPreviousFocusableAncestor(this, false, false);
 
-		this._opener = getComposedActiveElement();
+		this._opener = opener;
 		this.#addAutoCloseHandlers();
 
-		await this.#position();
+		await this.position();
 
 		this._showBackdrop = this._mobile && this._mobileTrayLocation;
 		if (ifrauBackdropService && this._showBackdrop) {
@@ -322,10 +339,99 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this.#addRepositionHandlers();
 
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
 
 	}
 
+	async position(contentRect, options) {
+		if (!this._opener) return;
+
+		options = Object.assign({ updateLocation: true, updateHeight: true }, options);
+
+		const content = this.#getContentContainer();
+
+		if (!this._noAutoFit && options.updateHeight) {
+			this._contentHeight = null;
+		}
+
+		// don't let popover content horizontally overflow viewport
+		this._width = null;
+
+		await this.updateComplete;
+
+		const adjustPosition = async() => {
+
+			const scrollHeight = document.documentElement.scrollHeight;
+			const openerRect = this._opener.getBoundingClientRect();
+			contentRect = contentRect ?? content.getBoundingClientRect();
+
+			const height = this._minHeight ?? Math.min(this._maxHeight ?? Number.MAX_VALUE, contentRect.height);
+
+			const spaceRequired = {
+				height: height + 10,
+				width: contentRect.width
+			};
+
+			// space in viewport
+			const spaceAround = this.#constrainSpaceAround({
+				// allow for opener offset + outer margin
+				above: openerRect.top - this._offset - this._margin,
+				// allow for opener offset + outer margin
+				below: window.innerHeight - openerRect.bottom - this._offset - this._margin,
+				// allow for outer margin
+				left: openerRect.left - 20,
+				// allow for outer margin
+				right: document.documentElement.clientWidth - openerRect.right - 15
+			}, spaceRequired, openerRect);
+
+			// space in document
+			const spaceAroundScroll = this.#constrainSpaceAround({
+				above: openerRect.top + document.documentElement.scrollTop,
+				below: scrollHeight - openerRect.bottom - document.documentElement.scrollTop
+			}, spaceRequired, openerRect);
+
+			if (options.updateLocation) {
+				this._location = this.#getLocation(spaceAround, spaceAroundScroll, spaceRequired);
+			}
+
+			this._position = this.#getPosition(spaceAround, openerRect, contentRect);
+			if (!this._noPointer) this._pointerPosition = this.#getPointerPosition(openerRect);
+
+			if (options.updateHeight) {
+
+				// calculate height available to the popover contents for overflow because that is the only area capable of scrolling
+				const availableHeight = (this._location === 'block-start') ? spaceAround.above : spaceAround.below;
+
+				if (!this._noAutoFit && availableHeight && availableHeight > 0) {
+					// only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
+					this._contentHeight = this._maxHeight !== null && availableHeight > this._maxHeight
+						? this._maxHeight - 2 : availableHeight;
+
+					// ensure the content height has updated when the __toggleScrollStyles event handler runs
+					await this.updateComplete;
+				}
+
+				// todo: handle inline-start and inline-end locations
+
+			}
+
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-popover-position', { bubbles: true, composed: true }));
+
+		};
+
+		const scrollWidth = content.scrollWidth;
+		const availableWidth = window.innerWidth - 40;
+
+		this._width = (availableWidth > scrollWidth ? scrollWidth : availableWidth);
+
+		await this.updateComplete;
+
+		await adjustPosition();
+
+	}
+
 	renderPopover(content) {
 
 		const mobileTrayLocation = this._mobile ? this._mobileTrayLocation : null;
@@ -392,12 +498,12 @@ export const PopoverMixin = superclass => class extends superclass {
 	async resize() {
 		if (!this._opened) return;
 		this._showBackdrop = this._mobile && this._mobileTrayLocation;
-		await this.#position();
+		await this.position();
 	}
 
-	toggleOpen(applyFocus = true) {
+	toggleOpen(opener, applyFocus = true) {
 		if (this._opened) return this.close();
-		else return this.open(!this._noAutoFocus && applyFocus);
+		else return this.open(opener, (!this._noAutoFocus && applyFocus));
 	}
 
 	#ifrauContextInfo;
@@ -864,7 +970,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	#handleFocusTrapEnter() {
 		this.#focusContent(this.#getContentContainer());
 
-		/** Dispatched when user focus enters the popover (trap-focus option only) */
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-popover-focus-enter', { detail: { applyFocus: this._applyFocus } }));
 	}
 
@@ -872,7 +978,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._mobile = this.#mediaQueryList.matches;
 		if (this._opened) {
 			this._showBackdrop = this._mobile && this._mobileTrayLocation;
-			await this.#position();
+			await this.position();
 		}
 	}
 
@@ -880,94 +986,6 @@ export const PopoverMixin = superclass => class extends superclass {
 		this.resize();
 	}
 
-	async #position(contentRect, options) {
-		if (!this._opener) return;
-
-		options = Object.assign({ updateLocation: true, updateHeight: true }, options);
-
-		const content = this.#getContentContainer();
-
-		if (!this._noAutoFit && options.updateHeight) {
-			this._contentHeight = null;
-		}
-
-		// don't let popover content horizontally overflow viewport
-		this._width = null;
-
-		await this.updateComplete;
-
-		const adjustPosition = async() => {
-
-			const scrollHeight = document.documentElement.scrollHeight;
-			const openerRect = this._opener.getBoundingClientRect();
-			contentRect = contentRect ?? content.getBoundingClientRect();
-
-			const height = this._minHeight ?? Math.min(this._maxHeight ?? Number.MAX_VALUE, contentRect.height);
-
-			const spaceRequired = {
-				height: height + 10,
-				width: contentRect.width
-			};
-
-			// space in viewport
-			const spaceAround = this.#constrainSpaceAround({
-				// allow for opener offset + outer margin
-				above: openerRect.top - this._offset - this._margin,
-				// allow for opener offset + outer margin
-				below: window.innerHeight - openerRect.bottom - this._offset - this._margin,
-				// allow for outer margin
-				left: openerRect.left - 20,
-				// allow for outer margin
-				right: document.documentElement.clientWidth - openerRect.right - 15
-			}, spaceRequired, openerRect);
-
-			// space in document
-			const spaceAroundScroll = this.#constrainSpaceAround({
-				above: openerRect.top + document.documentElement.scrollTop,
-				below: scrollHeight - openerRect.bottom - document.documentElement.scrollTop
-			}, spaceRequired, openerRect);
-
-			if (options.updateLocation) {
-				this._location = this.#getLocation(spaceAround, spaceAroundScroll, spaceRequired);
-			}
-
-			this._position = this.#getPosition(spaceAround, openerRect, contentRect);
-			if (!this._noPointer) this._pointerPosition = this.#getPointerPosition(openerRect);
-
-			if (options.updateHeight) {
-
-				// calculate height available to the popover contents for overflow because that is the only area capable of scrolling
-				const availableHeight = (this._location === 'block-start') ? spaceAround.above : spaceAround.below;
-
-				if (!this._noAutoFit && availableHeight && availableHeight > 0) {
-					// only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
-					this._contentHeight = this._maxHeight !== null && availableHeight > this._maxHeight
-						? this._maxHeight - 2 : availableHeight;
-
-					// ensure the content height has updated when the __toggleScrollStyles event handler runs
-					await this.updateComplete;
-				}
-
-				// todo: handle inline-start and inline-end locations
-
-			}
-
-			/** Dispatched when the popover position finishes adjusting */
-			this.dispatchEvent(new CustomEvent('d2l-popover-position', { bubbles: true, composed: true }));
-
-		};
-
-		const scrollWidth = content.scrollWidth;
-		const availableWidth = window.innerWidth - 40;
-
-		this._width = (availableWidth > scrollWidth ? scrollWidth : availableWidth);
-
-		await this.updateComplete;
-
-		await adjustPosition();
-
-	}
-
 	#removeAutoCloseHandlers() {
 		this.removeEventListener('blur', this.#handleAutoCloseFocusBound, { capture: true });
 		document.body?.removeEventListener('focus', this.#handleAutoCloseFocusBound, { capture: true }); // DE41322: document.body can be null in some scenarios
@@ -979,7 +997,9 @@ export const PopoverMixin = superclass => class extends superclass {
 	}
 
 	#removeRepositionHandlers() {
-		this._openerIntersectionObserver?.unobserve(this._opener);
+		if (this._opener) {
+			this._openerIntersectionObserver?.unobserve(this._opener);
+		}
 		this._scrollablesObserved?.forEach(node => {
 			node.removeEventListener('scroll', this.#repositionBound);
 		});
@@ -992,7 +1012,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		// throttle repositioning (https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#scroll_event_throttling)
 		if (!this._repositioning) {
 			requestAnimationFrame(() => {
-				this.#position(undefined, { updateLocation: false, updateHeight: false });
+				this.position(undefined, { updateLocation: false, updateHeight: false });
 				this._repositioning = false;
 			});
 		}

package/components/tabs/tab-internal.js

@@ -2,7 +2,6 @@ import '../colors/colors.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const keyCodes = {
@@ -10,7 +9,7 @@ const keyCodes = {
 	SPACE: 32
 };
 
-class Tab extends SkeletonMixin(RtlMixin(LitElement)) {
+class Tab extends SkeletonMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -44,11 +43,7 @@ class Tab extends SkeletonMixin(RtlMixin(LitElement)) {
 				top: 0.15rem;
 			}
 			:host(:first-child) .d2l-tab-text {
-				margin-left: 0;
-			}
-			:host([dir="rtl"]:first-child) .d2l-tab-text {
-				margin-left: 0.6rem;
-				margin-right: 0;
+				margin-inline-start: 0;
 			}
 			.d2l-tab-selected-indicator {
 				border-top: 4px solid var(--d2l-color-celestine);
@@ -69,13 +64,9 @@ class Tab extends SkeletonMixin(RtlMixin(LitElement)) {
 				min-width: 50px;
 			}
 			:host(:first-child) .d2l-tab-selected-indicator {
-				margin-left: 0;
+				margin-inline-start: 0;
 				width: calc(100% - 0.6rem);
 			}
-			:host([dir="rtl"]:first-child) .d2l-tab-selected-indicator {
-				margin-left: 0.6rem;
-				margin-right: 0;
-			}
 			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
 				border-radius: 0.3rem;
 				box-shadow: 0 0 0 2px var(--d2l-color-celestine);

package/components/tabs/tab-mixin.js

@@ -37,7 +37,6 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 				width: calc(100% - 1.2rem);
 			}
 			:host(:first-child) .d2l-tab-selected-indicator {
-				margin-inline-end: 0.6rem;
 				margin-inline-start: 0;
 				width: calc(100% - 0.6rem);
 			}

package/components/tabs/tab.js

@@ -15,7 +15,6 @@ class Tab extends TabMixin(LitElement) {
 				white-space: nowrap;
 			}
 			:host(:first-child) .d2l-tab-text {
-				margin-inline-end: 0.6rem;
 				margin-inline-start: 0;
 			}
 			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {

package/components/tabs/tabs.js

@@ -11,7 +11,6 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -19,41 +18,13 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
 const scrollButtonWidth = 56;
 
-// remove once IE11 is no longer supported
-if (!Array.prototype.findIndex) {
-	Object.defineProperty(Array.prototype, 'findIndex', {
-		value: function(predicate) {
-
-			if (this === null) throw new TypeError('"this" is null or not defined');
-
-			const o = Object(this);
-			const len = o.length >>> 0;
-
-			if (typeof predicate !== 'function') throw new TypeError('predicate must be a function');
-
-			const thisArg = arguments[1];
-			let k = 0;
-
-			while (k < len) {
-				const kValue = o[k];
-				if (predicate.call(thisArg, kValue, k, o)) return k;
-				k++;
-			}
-
-			return -1;
-		},
-		configurable: true,
-		writable: true
-	});
-}
-
 /**
  * A component for tabbed content. It supports the "d2l-tab-panel" component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.
  * @slot - Contains the tab panels (e.g., "d2l-tab-panel" components)
  * @slot ext - Additional content (e.g., a button) positioned at right
  * @fires d2l-tabs-initialized - Dispatched when the component is initialized
  */
-class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(LitElement)))) {
+class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -113,11 +84,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 			}
 			.d2l-tabs-container-ext {
 				flex: none;
-				padding-left: 4px;
-			}
-			:host([dir="rtl"]) .d2l-tabs-container-ext {
-				padding-left: 0;
-				padding-right: 4px;
+				padding-inline: 4px 0;
 			}
 			.d2l-tabs-container-list {
 				display: block;
@@ -136,27 +103,15 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 				z-index: 1;
 			}
 			.d2l-tabs-scroll-previous-container {
-				left: 0;
-				margin-left: 4px;
-			}
-			:host([dir="rtl"]) .d2l-tabs-scroll-previous-container {
-				left: auto;
-				margin-left: 0;
-				margin-right: 4px;
-				right: 0;
+				inset-inline-start: 0;
+				margin-inline: 4px 0;
 			}
 			.d2l-tabs-container[data-allow-scroll-previous] > .d2l-tabs-scroll-previous-container {
 				display: inline-block;
 			}
 			.d2l-tabs-scroll-next-container {
-				margin-right: 4px;
-				right: 0;
-			}
-			:host([dir="rtl"]) .d2l-tabs-scroll-next-container {
-				left: 0;
-				margin-left: 4px;
-				margin-right: 0;
-				right: auto;
+				inset-inline-end: 0;
+				margin-inline: 0 4px;
 			}
 			.d2l-tabs-container[data-allow-scroll-next] > .d2l-tabs-scroll-next-container {
 				display: inline-block;
@@ -290,7 +245,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 				const measures = this._getMeasures();
 				const newTranslationValue = this._calculateScrollPosition(tabInfo, measures);
 
-				if (this.dir !== 'rtl') {
+				if (!this.#isRTL()) {
 					if (newTranslationValue >= 0) return;
 				} else {
 					if (newTranslationValue <= 0) return;
@@ -434,8 +389,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 		const isOverflowingLeft = (selectedTabMeasures.offsetLeft + this._translationValue < 0);
 		const isOverflowingRight = (selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + this._translationValue > measures.tabsContainerRect.width);
 
+		const isRTL = this.#isRTL();
+
 		let getNewTranslationValue;
-		if (this.dir !== 'rtl') {
+		if (!isRTL) {
 			getNewTranslationValue = () => {
 				if (selectedTabIndex === 0) {
 					// position selected tab at beginning
@@ -471,7 +428,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 		let expectedPosition;
 
 		// make sure the new position will not place selected tab behind left scroll button
-		if (this.dir !== 'rtl') {
+		if (!isRTL) {
 			expectedPosition = selectedTabMeasures.offsetLeft + newTranslationValue;
 			if (newTranslationValue < 0 && this._isPositionInLeftScrollArea(expectedPosition)) {
 				newTranslationValue = getNewTranslationValue();
@@ -483,7 +440,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 			}
 		}
 
-		if (this.dir !== 'rtl') {
+		if (!isRTL) {
 			// make sure there will not be any empty space between left side of container and first tab
 			if (newTranslationValue > 0) newTranslationValue = 0;
 		} else {
@@ -492,7 +449,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 		}
 
 		// make sure the new position will not place selected tab behind the right scroll button
-		if (this.dir !== 'rtl') {
+		if (!isRTL) {
 			expectedPosition = selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + newTranslationValue;
 			if ((selectedTabIndex < this._tabInfos.length - 1) && this._isPositionInRightScrollArea(expectedPosition, measures)) {
 				newTranslationValue = getNewTranslationValue();
@@ -556,13 +513,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 	}
 
 	_getTabInfo(id) {
-		if (this._tabInfos.find) {
-			return this._tabInfos.find((t) => t.id === id);
-		} else {
-			// IE11
-			const index = this._tabInfos.findIndex((t) => t.id === id);
-			return index !== -1 ? this._tabInfos[index] : null;
-		}
+		return this._tabInfos.find((t) => t.id === id);
 	}
 
 	_handleFocusOut(e) {
@@ -695,7 +646,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 		const lastTabMeasures = measures.tabRects[measures.tabRects.length - 1];
 		let isOverflowingNext;
 
-		if (this.dir !== 'rtl') {
+		if (!this.#isRTL()) {
 
 			newTranslationValue = (this._translationValue - measures.tabsContainerRect.width + scrollButtonWidth);
 			if (newTranslationValue < 0) newTranslationValue += scrollButtonWidth;
@@ -738,7 +689,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 		let newTranslationValue;
 		let isOverflowingPrevious;
 
-		if (this.dir !== 'rtl') {
+		if (!this.#isRTL()) {
 
 			newTranslationValue = (this._translationValue + measures.tabsContainerRect.width - scrollButtonWidth);
 			isOverflowingPrevious = (newTranslationValue < 0);
@@ -921,7 +872,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 			return Promise.resolve();
 		}
 
-		if (this.dir !== 'rtl') {
+		if (!this.#isRTL()) {
 			// show/hide scroll buttons
 			this._allowScrollPrevious = (this._translationValue < 0);
 			this._allowScrollNext = (lastTabMeasures.offsetLeft + lastTabMeasures.rect.width + this._translationValue > measures.tabsContainerRect.width);
@@ -986,6 +937,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 		return this.updateComplete;
 	}
 
+	#isRTL() {
+		return document.documentElement.getAttribute('dir') === 'rtl';
+	}
+
 }
 
 customElements.define('d2l-tabs', Tabs);