backport SL-2189

src/components/carousel/carousel.ts

@@ -176,7 +176,7 @@ export default class WaCarousel extends WebAwesomeElement {
   private handleKeyDown(event: KeyboardEvent) {
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
       const target = event.target as HTMLElement;
-      const isRtl = this.matches(':dir(rtl)');
+      const isRtl = this.localize.dir() === 'rtl';
       const isFocusInPagination = target.closest('[part~="pagination-item"]') !== null;
       const isNext =
         event.key === 'ArrowDown' || (!isRtl && event.key === 'ArrowRight') || (isRtl && event.key === 'ArrowLeft');
@@ -501,7 +501,7 @@ export default class WaCarousel extends WebAwesomeElement {
       : clamp(index, 0, slides.length - slidesPerPage);
     this.activeSlide = newActiveSlide;
 
-    const isRtl = this.matches(':dir(rtl)');
+    const isRtl = this.localize.dir() === 'rtl';
 
     // Get the index of the next slide. For looping carousel it adds `slidesPerPage`
     // to normalize the starting index in order to ignore the first nth clones.
@@ -552,7 +552,7 @@ export default class WaCarousel extends WebAwesomeElement {
     }
 
     // We can't rely on `this.matches()` on the server.
-    const isRTL = isServer ? this.dir === 'rtl' : this.matches(':dir(rtl)');
+    const isRTL = isServer ? this.dir === 'rtl' : this.localize.dir() === 'rtl';
 
     return html`
       <div part="base" class="carousel">

src/components/details/details.ts

@@ -3,6 +3,7 @@ import { animate, parseDuration } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
@@ -52,13 +53,14 @@ import type { CSSResultGroup } from 'lit';
 export default class WaDetails extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
+  private detailsObserver: MutationObserver;
+  private readonly localize = new LocalizeController(this);
+
   @query('.details') details: HTMLDetailsElement;
   @query('.details__header') header: HTMLElement;
   @query('.details__body') body: HTMLElement;
   @query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
 
-  detailsObserver: MutationObserver;
-
   /**
    * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
    * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
@@ -208,7 +210,7 @@ export default class WaDetails extends WebAwesomeElement {
   }
 
   render() {
-    const isRtl = !this.hasUpdated ? this.dir === 'rtl' : this.matches(':dir(rtl)');
+    const isRtl = !this.hasUpdated ? this.dir === 'rtl' : this.localize.dir() === 'rtl';
 
     return html`
       <details

src/components/image-comparer/image-comparer.ts

@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { drag } from '../../internal/drag.js';
 import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { watch } from '../../internal/watch.js';
@@ -41,6 +42,8 @@ import type { CSSResultGroup } from 'lit';
 export default class WaImageComparer extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
+  private readonly localize = new LocalizeController(this);
+
   @query('.image-comparer') base: HTMLElement;
   @query('.image-comparer__handle') handle: HTMLElement;
 
@@ -49,7 +52,7 @@ export default class WaImageComparer extends WebAwesomeElement {
 
   private handleDrag(event: PointerEvent) {
     const { width } = this.base.getBoundingClientRect();
-    const isRtl = this.matches(':dir(rtl)');
+    const isRtl = this.localize.dir() === 'rtl';
 
     event.preventDefault();
 
@@ -64,7 +67,7 @@ export default class WaImageComparer extends WebAwesomeElement {
 
   private handleKeyDown(event: KeyboardEvent) {
     const isLtr = this.matches(':dir(ltr)');
-    const isRtl = this.matches(':dir(rtl)');
+    const isRtl = this.localize.dir() === 'rtl';
 
     if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
       const incr = event.shiftKey ? 10 : 1;
@@ -96,7 +99,7 @@ export default class WaImageComparer extends WebAwesomeElement {
   }
 
   render() {
-    const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
 
     return html`
       <div

src/components/menu-item/menu-item.ts

@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { getTextContent } from '../../internal/slot.js';
 import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
 import { SubmenuController } from './submenu-controller.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
@@ -44,6 +45,7 @@ export default class WaMenuItem extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
   private cachedTextLabel: string;
+  private readonly localize = new LocalizeController(this);
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
   @query('.menu-item') menuItem: HTMLElement;
@@ -163,7 +165,7 @@ export default class WaMenuItem extends WebAwesomeElement {
   }
 
   render() {
-    const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
     const isSubmenuExpanded = this.submenuController.isExpanded();
 
     return html`

src/components/menu-item/submenu-controller.ts

@@ -195,7 +195,7 @@ export class SubmenuController implements ReactiveController {
   private handlePopupReposition = () => {
     const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
     const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'wa-menu')[0];
-    const isRtl = this.host.hasUpdated ? this.host.matches(':dir(rtl)') : this.host.dir === 'rtl';
+    const isRtl = getComputedStyle(this.host).direction === 'rtl';
 
     if (!menu) {
       return;
@@ -265,7 +265,7 @@ export class SubmenuController implements ReactiveController {
       return html` <slot name="submenu" hidden></slot> `;
     }
 
-    const isRtl = this.host.matches(':dir(rtl)');
+    const isRtl = getComputedStyle(this.host).direction === 'rtl';
 
     return html`
       <wa-popup

src/components/popup/popup.ts

@@ -2,6 +2,7 @@ import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
 import { offsetParent } from 'composed-offset-position';
 import { WaRepositionEvent } from '../../events/reposition.js';
 import componentStyles from '../../styles/component.styles.js';
@@ -60,6 +61,7 @@ export default class WaPopup extends WebAwesomeElement {
 
   private anchorEl: Element | VirtualElement | null;
   private cleanup: ReturnType<typeof autoUpdate> | undefined;
+  private readonly localize = new LocalizeController(this);
 
   /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
   @query('.popup') popup: HTMLElement;
@@ -418,7 +420,7 @@ export default class WaPopup extends WebAwesomeElement {
       //
       // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31
       //
-      const isRtl = this.matches(':dir(rtl)');
+      const isRtl = this.localize.dir() === 'rtl';
       const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;
 
       this.setAttribute('data-current-placement', placement);

src/components/range/range.ts

@@ -202,7 +202,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
       const inputWidth = this.input.offsetWidth;
       const tooltipWidth = this.output.offsetWidth;
       const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
-      const isRtl = this.matches(':dir(rtl)');
+      const isRtl = this.localize.dir() === 'rtl';
       const percentAsWidth = inputWidth * percent;
 
       // The calculations are used to "guess" where the thumb is located. Since we're using the native range control

src/components/rating/rating.ts

@@ -3,6 +3,7 @@ import { clamp } from '../../internal/math.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { WaChangeEvent } from '../../events/change.js';
@@ -37,6 +38,8 @@ import type { CSSResultGroup } from 'lit';
 export default class WaRating extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
+  private readonly localize = new LocalizeController(this);
+
   @query('.rating') rating: HTMLElement;
 
   @state() private hoverValue = 0;
@@ -80,7 +83,7 @@ export default class WaRating extends WebAwesomeElement {
   }
 
   private getValueFromXCoordinate(coordinate: number) {
-    const isRtl = this.matches(':dir(rtl)');
+    const isRtl = this.localize.dir() === 'rtl';
     const { left, right, width } = this.rating.getBoundingClientRect();
     const value = isRtl
       ? this.roundToPrecision(((right - coordinate) / width) * this.max, this.precision)
@@ -109,7 +112,7 @@ export default class WaRating extends WebAwesomeElement {
 
   private handleKeyDown(event: KeyboardEvent) {
     const isLtr = this.matches(':dir(ltr)');
-    const isRtl = this.matches(':dir(rtl)');
+    const isRtl = this.localize.dir() === 'rtl';
     const oldValue = this.value;
 
     if (this.disabled || this.readonly) {
@@ -214,7 +217,7 @@ export default class WaRating extends WebAwesomeElement {
   }
 
   render() {
-    const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir;
+    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir;
     const counter = Array.from(Array(this.max).keys());
     let displayValue = 0;
 

src/components/split-panel/split-panel.ts

@@ -107,7 +107,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
   }
 
   private handleDrag(event: PointerEvent) {
-    const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
 
     if (this.disabled) {
       return;
@@ -248,7 +248,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
   render() {
     const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
     const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
-    const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
     const primary = `
       clamp(
         0%,

src/components/tab-group/tab-group.ts

@@ -50,14 +50,13 @@ import type WaTabPanel from '../tab-panel/tab-panel.js';
 export default class WaTabGroup extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
-  private readonly localize = new LocalizeController(this);
-
   private activeTab?: WaTab;
   private mutationObserver: MutationObserver;
   private resizeObserver: ResizeObserver;
   private tabs: WaTab[] = [];
   private focusableTabs: WaTab[] = [];
   private panels: WaTabPanel[] = [];
+  private readonly localize = new LocalizeController(this);
 
   @query('.tab-group') tabGroup: HTMLElement;
   @query('.tab-group__body') body: HTMLSlotElement;
@@ -196,7 +195,7 @@ export default class WaTabGroup extends WebAwesomeElement {
     // Move focus left or right
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
       const activeEl = this.tabs.find(t => t.matches(':focus'));
-      const isRtl = this.matches(':dir(rtl)');
+      const isRtl = this.localize.dir() === 'rtl';
       let nextTab: null | WaTab = null;
 
       if (activeEl?.tagName.toLowerCase() === 'wa-tab') {
@@ -371,7 +370,7 @@ export default class WaTabGroup extends WebAwesomeElement {
   }
 
   render() {
-    const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
 
     return html`
       <div

src/components/tree-item/tree-item.ts

@@ -236,7 +236,7 @@ export default class WaTreeItem extends WebAwesomeElement {
   }
 
   render() {
-    const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
     const showExpandButton = !this.loading && (!this.isLeaf || this.lazy);
 
     return html`

src/components/tree/tree.ts

@@ -1,6 +1,7 @@
 import { clamp } from '../../internal/math.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html, isServer } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
 import { WaSelectionChangeEvent } from '../../events/selection-change.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
@@ -93,6 +94,7 @@ export default class WaTree extends WebAwesomeElement {
   private lastFocusedItem: WaTreeItem | null;
   private mutationObserver: MutationObserver;
   private clickTarget: WaTreeItem | null = null;
+  private readonly localize = new LocalizeController(this);
 
   constructor() {
     super();
@@ -231,7 +233,7 @@ export default class WaTree extends WebAwesomeElement {
 
     const items = this.getFocusableItems();
     const isLtr = this.matches(':dir(ltr)');
-    const isRtl = this.matches(':dir(rtl)');
+    const isRtl = this.localize.dir() === 'rtl';
 
     if (items.length > 0) {
       event.preventDefault();