use ownerDocument and convert remaining doc.dir checks

Author: OS-jacobbell

core/src/components/col/col.tsx

@@ -16,7 +16,7 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   shadow: true,
 })
 export class Col implements ComponentInterface {
-  @Element() el: HTMLElement;
+  @Element() el!: HTMLElement;
 
   /**
    * The amount to offset the column, in terms of how many columns it should shift to the end

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

@@ -261,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'), this.el) ? 'end' : 'start';
+      const side = isEndSide(option.side ?? option.getAttribute('side'), option) ? 'end' : 'start';
 
       if (side === 'start') {
         this.leftOptions = option;

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 {
@@ -30,7 +31,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 bodyWidth = doc.defaultView.innerWidth;
   const bodyHeight = doc.defaultView.innerHeight;
 
@@ -45,12 +46,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,

core/src/components/popover/animations/md.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 { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition, getSafeAreaInsets } from '../utils';
@@ -13,7 +14,7 @@ const POPOVER_MD_BODY_PADDING = 12;
 export const mdEnterAnimation = (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 bodyWidth = doc.defaultView.innerWidth;
   const bodyHeight = doc.defaultView.innerHeight;
@@ -27,12 +28,12 @@ export const mdEnterAnimation = (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,
     0,

core/src/components/progress-bar/progress-bar.tsx

@@ -25,7 +25,7 @@ import type { Color } from '../../interface';
   shadow: true,
 })
 export class ProgressBar implements ComponentInterface {
-  @Element() el: HTMLElement;
+  @Element() el!: HTMLElement;
 
   /**
    * The state of the progress bar, based on if the time the process takes is known or not.

core/src/utils/helpers.ts

@@ -374,8 +374,7 @@ export const pointerCoord = (ev: any): { x: number; y: number } => {
  *
  * @param side The current side before being redefined based on the direction.
  * @param hostEl The component's host element. The direction is resolved from
- * it or its nearest ancestor that declares one. When omitted, the direction
- * is resolved from the document.
+ * it or its nearest ancestor that declares one.
  */
 export const isEndSide = (side: Side, hostEl: HTMLElement): boolean => {
   const rtl = isRTL(hostEl);

core/src/utils/input-shims/hacks/common.ts

@@ -1,3 +1,5 @@
+import { isRTL } from '@utils/rtl';
+
 const cloneMap = new WeakMap<HTMLElement, HTMLElement>();
 
 export const relocateInput = (
@@ -73,10 +75,9 @@ const addClone = (
    * Position the clone at the same horizontal offset as the native input
    * to prevent the placeholder from overlapping start slot content (e.g., icons).
    */
-  const doc = componentEl.ownerDocument!;
-  const isRTL = doc.dir === 'rtl';
+  const rtl = isRTL(componentEl);
 
-  if (isRTL) {
+  if (rtl) {
     const parentWidth = (parentEl as HTMLElement).offsetWidth;
     const startOffset = parentWidth - inputEl.offsetLeft - inputEl.offsetWidth;
     clonedEl.style.insetInlineStart = `${startOffset}px`;
@@ -87,7 +88,7 @@ const addClone = (
   parentEl.appendChild(clonedEl);
   cloneMap.set(componentEl, clonedEl);
 
-  const tx = isRTL ? 9999 : -9999;
+  const tx = rtl ? 9999 : -9999;
   componentEl.style.pointerEvents = 'none';
   inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
 };

core/src/utils/rtl/dir.ts

@@ -20,5 +20,5 @@ export const isRTL = (hostEl: Element): boolean => {
       return false;
     }
   }
-  return document?.dir?.toLowerCase() === 'rtl';
+  return hostEl.ownerDocument?.dir?.toLowerCase() === 'rtl';
 };