Default to ltr for reading direction (#18767)

src/components/ha-button-menu.ts

@@ -3,6 +3,7 @@ import "@material/mwc-menu";
 import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import type { HaIconButton } from "./ha-icon-button";
 
@@ -68,7 +69,7 @@ export class HaButtonMenu extends LitElement {
   protected firstUpdated(changedProps): void {
     super.firstUpdated(changedProps);
 
-    if (document.dir === "rtl") {
+    if (mainWindow.document.dir === "rtl") {
       this.updateComplete.then(() => {
         this.querySelectorAll("mwc-list-item").forEach((item) => {
           const style = document.createElement("style");

src/components/ha-fab.ts

@@ -2,6 +2,7 @@ import { FabBase } from "@material/mwc-fab/mwc-fab-base";
 import { styles } from "@material/mwc-fab/mwc-fab.css";
 import { customElement } from "lit/decorators";
 import { css } from "lit";
+import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-fab")
 export class HaFab extends FabBase {
@@ -20,7 +21,7 @@ export class HaFab extends FabBase {
       }
     `,
     // safari workaround - must be explicit
-    document.dir === "rtl"
+    mainWindow.document.dir === "rtl"
       ? css`
           :host .mdc-fab--extended .mdc-fab__icon {
             direction: rtl;

src/components/ha-icon-button-arrow-next.ts

@@ -1,6 +1,7 @@
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
@@ -13,7 +14,7 @@ export class HaIconButtonArrowNext extends LitElement {
   @property() public label?: string;
 
   @state() private _icon =
-    document.dir === "ltr" ? mdiArrowRight : mdiArrowLeft;
+    mainWindow.document.dir === "rtl" ? mdiArrowLeft : mdiArrowRight;
 
   protected render(): TemplateResult {
     return html`

src/components/ha-icon-button-arrow-prev.ts

@@ -1,6 +1,7 @@
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
@@ -13,7 +14,7 @@ export class HaIconButtonArrowPrev extends LitElement {
   @property() public label?: string;
 
   @state() private _icon =
-    document.dir === "ltr" ? mdiArrowLeft : mdiArrowRight;
+    mainWindow.document.dir === "rtl" ? mdiArrowRight : mdiArrowLeft;
 
   protected render(): TemplateResult {
     return html`

src/components/ha-icon-button-next.ts

@@ -1,6 +1,7 @@
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
@@ -13,7 +14,7 @@ export class HaIconButtonNext extends LitElement {
   @property() public label?: string;
 
   @state() private _icon =
-    document.dir === "ltr" ? mdiChevronRight : mdiChevronLeft;
+    mainWindow.document.dir === "rtl" ? mdiChevronLeft : mdiChevronRight;
 
   protected render(): TemplateResult {
     return html`

src/components/ha-icon-button-prev.ts

@@ -1,6 +1,7 @@
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
@@ -13,7 +14,7 @@ export class HaIconButtonPrev extends LitElement {
   @property() public label?: string;
 
   @state() private _icon =
-    document.dir === "ltr" ? mdiChevronLeft : mdiChevronRight;
+    mainWindow.document.dir === "rtl" ? mdiChevronRight : mdiChevronLeft;
 
   protected render(): TemplateResult {
     return html`

src/components/ha-icon-next.ts

@@ -1,11 +1,12 @@
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import { customElement, property } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 import { HaSvgIcon } from "./ha-svg-icon";
 
 @customElement("ha-icon-next")
 export class HaIconNext extends HaSvgIcon {
   @property() public override path =
-    document.dir === "ltr" ? mdiChevronRight : mdiChevronLeft;
+    mainWindow.document.dir === "rtl" ? mdiChevronLeft : mdiChevronRight;
 }
 
 declare global {

src/components/ha-icon-prev.ts

@@ -1,11 +1,12 @@
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import { customElement, property } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 import { HaSvgIcon } from "./ha-svg-icon";
 
 @customElement("ha-icon-prev")
 export class HaIconPrev extends HaSvgIcon {
   @property() public override path =
-    document.dir === "ltr" ? mdiChevronLeft : mdiChevronRight;
+    mainWindow.document.dir === "rtl" ? mdiChevronRight : mdiChevronLeft;
 }
 
 declare global {

src/components/ha-textarea.ts

@@ -3,6 +3,7 @@ import { styles as textfieldStyles } from "@material/mwc-textfield/mwc-textfield
 import { styles as textareaStyles } from "@material/mwc-textarea/mwc-textarea.css";
 import { css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-textarea")
 export class HaTextArea extends TextAreaBase {
@@ -11,7 +12,7 @@ export class HaTextArea extends TextAreaBase {
   firstUpdated() {
     super.firstUpdated();
 
-    this.setAttribute("dir", document.dir);
+    this.setAttribute("dir", mainWindow.document.dir);
   }
 
   updated(changedProperties: PropertyValues) {

src/components/ha-textfield.ts

@@ -2,6 +2,7 @@ import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
 import { styles } from "@material/mwc-textfield/mwc-textfield.css";
 import { TemplateResult, html, PropertyValues, css } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-textfield")
 export class HaTextField extends TextFieldBase {
@@ -194,7 +195,7 @@ export class HaTextField extends TextFieldBase {
       }
     `,
     // safari workaround - must be explicit
-    document.dir === "rtl"
+    mainWindow.document.dir === "rtl"
       ? css`
           .mdc-text-field__affix--suffix,
           .mdc-text-field--with-leading-icon,