fix(rtl): respect dir of ancestor elements throughout components

core/src/components/col/col.tsx

@@ -1,6 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
+import { Component, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
 import { matchBreakpoint } from '@utils/media';
+import { isRTL } from '@utils/rtl';
 
 import { getIonMode } from '../../global/ionic-global';
 
@@ -15,6 +16,8 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   shadow: true,
 })
 export class Col implements ComponentInterface {
+  @Element() el!: HTMLElement;
+
   /**
    * The amount to offset the column, in terms of how many columns it should shift to the end
    * of the total available.
@@ -235,30 +238,30 @@ export class Col implements ComponentInterface {
     };
   }
 
-  private calculateOffset(isRTL: boolean) {
-    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+  private calculateOffset(rtl: boolean) {
+    return this.calculatePosition('offset', rtl ? 'margin-right' : 'margin-left');
   }
 
-  private calculatePull(isRTL: boolean) {
-    return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+  private calculatePull(rtl: boolean) {
+    return this.calculatePosition('pull', rtl ? 'left' : 'right');
   }
 
-  private calculatePush(isRTL: boolean) {
-    return this.calculatePosition('push', isRTL ? 'right' : 'left');
+  private calculatePush(rtl: boolean) {
+    return this.calculatePosition('push', rtl ? 'right' : 'left');
   }
 
   render() {
-    const isRTL = document.dir === 'rtl';
+    const rtl = isRTL(this.el);
     const mode = getIonMode(this);
     return (
       <Host
         class={{
           [mode]: true,
         }}
         style={{
-          ...this.calculateOffset(isRTL),
-          ...this.calculatePull(isRTL),
-          ...this.calculatePush(isRTL),
+          ...this.calculateOffset(rtl),
+          ...this.calculatePull(rtl),
+          ...this.calculatePush(rtl),
           ...this.calculateSize(),
         }}
       >

core/src/components/col/test/col.spec.ts

@@ -0,0 +1,36 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Col } from '../col';
+
+describe('ion-col: rtl', () => {
+  const newCol = async (html: string) => {
+    const page = await newSpecPage({ components: [Col], html });
+    return page.body.querySelector('ion-col')!;
+  };
+
+  it('should offset, push and pull from the start when no dir is declared', async () => {
+    const col = await newCol(`<ion-col offset="3" push="2" pull="1"></ion-col>`);
+    expect(col.style.marginLeft).not.toBe('');
+    expect(col.style.marginRight).toBe('');
+    expect(col.style.left).not.toBe('');
+    expect(col.style.right).not.toBe('');
+  });
+
+  it('should mirror offset, push and pull when an ancestor declares rtl', async () => {
+    const col = await newCol(`<div dir="rtl"><div><ion-col offset="3" push="2" pull="1"></ion-col></div></div>`);
+    expect(col.style.marginRight).not.toBe('');
+    expect(col.style.marginLeft).toBe('');
+  });
+
+  it('should not mirror when an ancestor declares ltr', async () => {
+    const col = await newCol(`<div dir="ltr"><ion-col offset="3"></ion-col></div>`);
+    expect(col.style.marginLeft).not.toBe('');
+    expect(col.style.marginRight).toBe('');
+  });
+
+  it('should use the nearest ancestor that declares a dir', async () => {
+    const col = await newCol(`<div dir="rtl"><div dir="ltr"><ion-col offset="3"></ion-col></div></div>`);
+    expect(col.style.marginLeft).not.toBe('');
+    expect(col.style.marginRight).toBe('');
+  });
+});

core/src/components/item-options/item-options.tsx

@@ -36,7 +36,7 @@ export class ItemOptions implements ComponentInterface {
 
   render() {
     const mode = getIonMode(this);
-    const isEnd = isEndSide(this.side);
+    const isEnd = isEndSide(this.side, this.el);
     return (
       <Host
         class={{

core/src/components/item-options/test/item-options.spec.ts

@@ -0,0 +1,33 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ItemOptions } from '../item-options';
+
+describe('ion-item-options: rtl', () => {
+  const newItemOptions = async (html: string) => {
+    const page = await newSpecPage({ components: [ItemOptions], html });
+    return page.body.querySelector('ion-item-options')!;
+  };
+
+  it('should change sides when an ancestor declares rtl', async () => {
+    const itemOptions = await newItemOptions(
+      `<div dir="rtl"><div><ion-item-options side="start"></ion-item-options></div></div>`
+    );
+    expect(itemOptions).toHaveClass('item-options-end');
+    expect(itemOptions).not.toHaveClass('item-options-start');
+  });
+
+  it('should not change sides when an ancestor declares ltr', async () => {
+    const itemOptions = await newItemOptions(
+      `<div dir="ltr"><div><ion-item-options side="start"></ion-item-options></div></div>`
+    );
+    expect(itemOptions).toHaveClass('item-options-start');
+    expect(itemOptions).not.toHaveClass('item-options-end');
+  });
+
+  it('should use the nearest ancestor that declares a dir', async () => {
+    const itemOptions = await newItemOptions(
+      `<div dir="rtl"><div dir="ltr"><ion-item-options side="start"></ion-item-options></div></div>`
+    );
+    expect(itemOptions).toHaveClass('item-options-start');
+  });
+});

core/src/components/item-sliding/item-sliding.tsx

@@ -3,6 +3,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import { componentOnReady, isEndSide } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
+import { isRTL } from '@utils/rtl';
 import { watchForOptions } from '@utils/watch-options';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -176,7 +177,7 @@ export class ItemSliding implements ComponentInterface {
     }
 
     // In RTL we want to switch the sides
-    side = isEndSide(side) ? 'end' : 'start';
+    side = isEndSide(side, this.el) ? 'end' : 'start';
 
     const isStartOpen = this.openAmount < 0;
     const isEndOpen = this.openAmount > 0;
@@ -260,7 +261,7 @@ export class ItemSliding implements ComponentInterface {
     this.leftOptions = this.rightOptions = undefined;
 
     for (const option of options) {
-      const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
+      const side = isEndSide(option.side ?? option.getAttribute('side'), option) ? 'end' : 'start';
 
       if (side === 'start') {
         this.leftOptions = option;
@@ -280,7 +281,7 @@ export class ItemSliding implements ComponentInterface {
      * do not open left side so swipe to go
      * back will still work.
      */
-    const rtl = document.dir === 'rtl';
+    const rtl = isRTL(this.el);
     const atEdge = rtl ? window.innerWidth - gesture.startX < 15 : gesture.startX < 15;
     if (atEdge) {
       return false;

core/src/components/item-sliding/test/item-sliding.spec.ts

@@ -0,0 +1,82 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ItemOptions } from '../../item-options/item-options';
+import { ItemSliding } from '../item-sliding';
+
+describe('ion-item-sliding: rtl', () => {
+  const newItemSliding = async (optionsAttrs: string) => {
+    const page = await newSpecPage({
+      components: [ItemSliding, ItemOptions],
+      html: `<ion-item-sliding>
+               <ion-item>Item</ion-item>
+               <ion-item-options ${optionsAttrs}></ion-item-options>
+             </ion-item-sliding>`,
+    });
+
+    await page.waitForChanges();
+
+    return page;
+  };
+
+  /**
+   * Opening only moves the item when the requested side matches the side the
+   * options were filed under, so it is what reveals the direction that was
+   * resolved for them.
+   */
+  const opensFrom = async (optionsAttrs: string, side: 'start' | 'end') => {
+    const page = await newItemSliding(optionsAttrs);
+    const itemSliding = page.body.querySelector('ion-item-sliding')!;
+
+    await itemSliding.open(side);
+    await page.waitForChanges();
+
+    return itemSliding.classList.contains('item-sliding-active-slide');
+  };
+
+  it('should file a start-side option under the start when no dir is declared', async () => {
+    expect(await opensFrom(`side="start"`, 'start')).toBe(true);
+    expect(await opensFrom(`side="start"`, 'end')).toBe(false);
+  });
+
+  it('should file a start-side option under the end when the options element declares rtl', async () => {
+    expect(await opensFrom(`side="start" dir="rtl"`, 'end')).toBe(true);
+    expect(await opensFrom(`side="start" dir="rtl"`, 'start')).toBe(false);
+  });
+
+  it('should file a start-side option under the end when an ancestor declares rtl', async () => {
+    const page = await newSpecPage({
+      components: [ItemSliding, ItemOptions],
+      html: `<div dir="rtl">
+               <ion-item-sliding>
+                 <ion-item>Item</ion-item>
+                 <ion-item-options side="start"></ion-item-options>
+               </ion-item-sliding>
+             </div>`,
+    });
+    await page.waitForChanges();
+
+    const itemSliding = page.body.querySelector('ion-item-sliding')!;
+    await itemSliding.open('end');
+    await page.waitForChanges();
+
+    expect(itemSliding).toHaveClass('item-sliding-active-slide');
+  });
+
+  /**
+   * ion-item-options resolves its own side, so a dir declared on it has to
+   * resolve the same way here or the options would render on one side while
+   * opening from the other.
+   */
+  it('should resolve the same side that the options element renders', async () => {
+    const page = await newItemSliding(`side="start" dir="rtl"`);
+    const itemSliding = page.body.querySelector('ion-item-sliding')!;
+    const itemOptions = page.body.querySelector('ion-item-options')!;
+
+    expect(itemOptions).toHaveClass('item-options-end');
+
+    await itemSliding.open('end');
+    await page.waitForChanges();
+
+    expect(itemSliding).toHaveClass('item-sliding-active-slide');
+  });
+});

core/src/components/item/item.tsx

@@ -4,6 +4,7 @@ import type { AttributeController } from '@utils/attribute-controller';
 import { createAttributeController } from '@utils/attribute-controller';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import { raf } from '@utils/helpers';
+import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';
 
@@ -473,7 +474,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'item-focus-indicator-room': slottedIndicatorNeedsRoom,
             'ion-activatable': canActivate,
             'ion-focusable': this.focusable,
-            'item-rtl': document.dir === 'rtl',
+            'item-rtl': isRTL(this.el),
           }),
         }}
         role={inList ? 'listitem' : null}

core/src/components/item/test/item.spec.tsx

@@ -74,4 +74,26 @@ describe('item', () => {
       expect(item).not.toHaveClass('item-focus-indicator-room');
     });
   });
+
+  describe('rtl', () => {
+    const newItemPage = async (html: string) => {
+      const page = await newSpecPage({ components: [Item], html });
+      return page.body.querySelector('ion-item')!;
+    };
+
+    it('should set item-rtl when an ancestor declares rtl', async () => {
+      const item = await newItemPage(`<div dir="rtl"><div><ion-item>Item</ion-item></div></div>`);
+      expect(item).toHaveClass('item-rtl');
+    });
+
+    it('should not set item-rtl when an ancestor declares ltr', async () => {
+      const item = await newItemPage(`<div dir="ltr"><ion-item>Item</ion-item></div>`);
+      expect(item).not.toHaveClass('item-rtl');
+    });
+
+    it('should use the nearest ancestor that declares a dir', async () => {
+      const item = await newItemPage(`<div dir="rtl"><div dir="ltr"><ion-item>Item</ion-item></div></div>`);
+      expect(item).not.toHaveClass('item-rtl');
+    });
+  });
 });

core/src/components/label/label.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -112,7 +113,7 @@ export class Label implements ComponentInterface {
           'in-item-color': hostContext('ion-item.ion-color', this.el),
           [`label-${position}`]: position !== undefined,
           [`label-no-animate`]: this.noAnimate,
-          'label-rtl': document.dir === 'rtl',
+          'label-rtl': isRTL(this.el),
         })}
       >
         <slot></slot>

core/src/components/label/test/label.spec.ts

@@ -0,0 +1,25 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Label } from '../label';
+
+describe('ion-label: rtl', () => {
+  const newLabel = async (html: string) => {
+    const page = await newSpecPage({ components: [Label], html });
+    return page.body.querySelector('ion-label')!;
+  };
+
+  it('should set label-rtl when an ancestor declares rtl', async () => {
+    const label = await newLabel(`<div dir="rtl"><div><ion-label>Label</ion-label></div></div>`);
+    expect(label).toHaveClass('label-rtl');
+  });
+
+  it('should not set label-rtl when an ancestor declares ltr', async () => {
+    const label = await newLabel(`<div dir="ltr"><ion-label>Label</ion-label></div>`);
+    expect(label).not.toHaveClass('label-rtl');
+  });
+
+  it('should use the nearest ancestor that declares a dir', async () => {
+    const label = await newLabel(`<div dir="rtl"><div dir="ltr"><ion-label>Label</ion-label></div></div>`);
+    expect(label).not.toHaveClass('label-rtl');
+  });
+});

core/src/components/popover/animations/ios.enter.ts

@@ -1,5 +1,6 @@
 import { createAnimation } from '@utils/animation/animation';
 import { getElementRoot } from '@utils/helpers';
+import { isRTL } from '@utils/rtl';
 
 import type { Animation } from '../../../interface';
 import {
@@ -31,7 +32,7 @@ const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
 export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => {
   const { event: ev, size, trigger, reference, side, align } = opts;
   const doc = baseEl.ownerDocument as any;
-  const isRTL = doc.dir === 'rtl';
+  const rtl = isRTL(baseEl);
   const root = getElementRoot(baseEl);
   const contentEl = root.querySelector('.popover-content') as HTMLElement;
   const arrowEl = root.querySelector('.popover-arrow') as HTMLElement | null;
@@ -61,12 +62,12 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   const defaultPosition = {
     top: bodyHeight / 2 - contentHeight / 2,
     left: bodyWidth / 2 - contentWidth / 2,
-    originX: isRTL ? 'right' : 'left',
+    originX: rtl ? 'right' : 'left',
     originY: 'top',
   };
 
   const results = getPopoverPosition(
-    isRTL,
+    rtl,
     contentWidth,
     contentHeight,
     arrowWidth,