Rtl changes (#12693)

src/components/ha-clickable-list-item.ts

@@ -60,15 +60,18 @@ export class HaClickableListItem extends ListItemBase {
           padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
-        :host-context([style*="direction: rtl;"])
+        span.material-icons:first-of-type {
-          span.material-icons:first-of-type {
+          margin-inline-start: 0px !important;
-          margin-left: var(--mdc-list-item-graphic-margin, 16px) !important;
+          margin-inline-end: var(
-          margin-right: 0px !important;
+            --mdc-list-item-graphic-margin,
+            16px
+          ) !important;
+          direction: var(--direction);
         }
-        :host-context([style*="direction: rtl;"])
+        span.material-icons:last-of-type {
-          span.material-icons:last-of-type {
+          margin-inline-start: auto !important;
-          margin-left: 0px !important;
+          margin-inline-end: 0px !important;
-          margin-right: auto !important;
+          direction: var(--direction);
         }
       `,
     ];

src/components/ha-combo-box.ts

@@ -241,6 +241,9 @@ export class HaComboBox extends LitElement {
       .toggle-button {
         right: 12px;
         top: -10px;
+        inset-inline-start: initial;
+        inset-inline-end: 12px;
+        direction: var(--direction);
       }
       :host([opened]) .toggle-button {
         color: var(--primary-color);
@@ -249,18 +252,9 @@ export class HaComboBox extends LitElement {
         --mdc-icon-size: 20px;
         top: -7px;
         right: 36px;
-      }
+        inset-inline-start: initial;
-
+        inset-inline-end: 36px;
-      :host-context([style*="direction: rtl;"]) .toggle-button {
+        direction: var(--direction);
-        left: 12px;
-        right: auto;
-        top: -10px;
-      }
-      :host-context([style*="direction: rtl;"]) .clear-button {
-        --mdc-icon-size: 20px;
-        top: -7px;
-        left: 36px;
-        right: auto;
       }
     `;
   }

src/components/ha-dialog.ts

@@ -3,7 +3,6 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
 import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
@@ -17,7 +16,6 @@ export const createCloseHeading = (
     .path=${mdiClose}
     dialogAction="close"
     class="header_button"
-    dir=${computeRTLDirection(hass)}
   ></ha-icon-button>
 `;
 
@@ -89,18 +87,18 @@ export class HaDialog extends DialogBase {
       }
       .header_title {
         margin-right: 40px;
+        margin-inline-end: 40px;
+        direction: var(--direction);
       }
-      [dir="rtl"].header_button {
+      .header_button {
-        right: auto;
+        inset-inline-start: initial;
-        left: 16px;
+        inset-inline-end: 16px;
+        direction: var(--direction);
       }
-      [dir="rtl"].header_title {
+      .dialog-actions {
-        margin-left: 40px;
+        inset-inline-start: initial !important;
-        margin-right: 0px;
+        inset-inline-end: 0px !important;
-      }
+        direction: var(--direction);
-      :host-context([style*="direction: rtl;"]) .dialog-actions {
-        left: 0px !important;
-        right: auto !important;
       }
     `,
   ];

src/components/ha-file-upload.ts

@@ -175,24 +175,23 @@ export class HaFileUpload extends LitElement {
         }
         .mdc-text-field__icon--leading {
           margin-bottom: 12px;
-        }
+          inset-inline-start: initial;
-        :host-context([style*="direction: rtl;"])
+          inset-inline-end: 0px;
-          .mdc-text-field__icon--leading {
+          direction: var(--direction);
-          margin-right: 0px;
         }
         .mdc-text-field--filled .mdc-floating-label--float-above {
           transform: scale(0.75);
           top: 8px;
         }
-        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        .mdc-floating-label {
-          left: initial;
+          inset-inline-start: 16px !important;
-          right: 16px;
+          inset-inline-end: initial !important;
+          direction: var(--direction);
         }
-        :host-context([style*="direction: rtl;"])
+        .mdc-text-field--filled .mdc-floating-label {
-          .mdc-text-field--filled
+          inset-inline-start: 48px !important;
-          .mdc-floating-label {
+          inset-inline-end: initial !important;
-          left: initial;
+          direction: var(--direction);
-          right: 48px;
         }
         .dragged:before {
           position: var(--layout-fit_-_position);

src/components/ha-form/ha-form-string.ts

@@ -133,9 +133,10 @@ export class HaFormString extends LitElement implements HaFormElement {
         color: var(--secondary-text-color);
       }
 
-      :host-context([style*="direction: rtl;"]) ha-icon-button {
+      ha-icon-button {
-        right: auto;
+        inset-inline-start: initial;
-        left: 12px;
+        inset-inline-end: 12px;
+        direction: var(--direction);
       }
     `;
   }

src/components/ha-select.ts

@@ -47,9 +47,10 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+      .mdc-floating-label {
-        right: 16px !important;
+        inset-inline-start: 16px !important;
-        left: initial !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
       }
     `,
   ];

src/components/ha-target-picker.ts

@@ -616,9 +616,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         opacity: var(--light-disabled-opacity);
         pointer-events: none;
       }
-      :host-context([style*="direction: rtl;"]) .mdc-chip__icon {
+      .mdc-chip__icon {
-        margin-right: -14px !important;
+        margin-inline-start: -14px !important;
-        margin-left: 4px !important;
+        margin-inline-end: 4px !important;
+        direction: var(--direction);
       }
     `;
   }

src/components/ha-textfield.ts

@@ -92,17 +92,18 @@ export class HaTextField extends TextFieldBase {
         overflow: var(--text-field-overflow);
       }
 
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+      .mdc-floating-label {
-        right: 10px !important;
+        inset-inline-start: 16px !important;
-        left: initial !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
       }
 
-      :host-context([style*="direction: rtl;"])
+      .mdc-text-field--with-leading-icon.mdc-text-field--filled
-        .mdc-text-field--with-leading-icon.mdc-text-field--filled
         .mdc-floating-label {
         max-width: calc(100% - 48px);
-        right: 48px !important;
+        inset-inline-start: 48px !important;
-        left: initial !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
       }
     `,
   ];

src/components/media-player/dialog-media-manage.ts

@@ -314,9 +314,10 @@ class DialogMediaManage extends LitElement {
           vertical-align: middle;
         }
 
-        :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+        ha-svg-icon[slot="icon"] {
-          margin-left: 8px !important;
+          margin-inline-start: 0px !important;
-          margin-right: 0px !important;
+          margin-inline-end: 8px !important;
+          direction: var(--direction);
         }
 
         .refresh {

src/components/media-player/ha-media-manage-button.ts

@@ -60,9 +60,10 @@ class MediaManageButton extends LitElement {
       vertical-align: middle;
     }
 
-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+    ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
+      margin-inline-start: 0px;
-      margin-right: 0px;
+      margin-inline-end: 8px;
+      direction: var(--direction);
     }
   `;
 }

src/components/media-player/ha-media-upload-button.ts

@@ -120,9 +120,10 @@ class MediaUploadButton extends LitElement {
       vertical-align: middle;
     }
 
-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+    ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
+      margin-inline-start: 0px;
-      margin-right: 0px;
+      margin-inline-end: 8px;
+      direction: var(--direction);
     }
   `;
 }

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -518,10 +518,9 @@ class DataEntryFlowDialog extends LitElement {
           position: absolute;
           top: 0;
           right: 0;
-        }
+          inset-inline-start: initial;
-        :host-context([style*="direction: rtl;"]) .dialog-actions {
+          inset-inline-end: 0px;
-          right: auto;
+          direction: var(--direction);
-          left: 0;
         }
         .dialog-actions > * {
           color: var(--secondary-text-color);

src/dialogs/config-flow/step-flow-form.ts

@@ -192,11 +192,8 @@ class StepFlowForm extends LitElement {
         }
         h2 {
           word-break: break-word;
-          padding-right: 72px;
+          padding-inline-end: 72px;
-        }
+          direction: var(--direction);
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 72px !important;
         }
       `,
     ];

src/dialogs/config-flow/step-flow-pick-flow.ts

@@ -104,11 +104,8 @@ class StepFlowPickFlow extends LitElement {
           margin: 16px 0;
         }
         h2 {
-          padding-right: 66px;
+          padding-inline-end: 66px;
-        }
+          direction: var(--direction);
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 66px !important;
         }
         @media all and (max-height: 900px) {
           div {

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -311,11 +311,8 @@ class StepFlowPickHandler extends LitElement {
           border-bottom-color: var(--divider-color);
         }
         h2 {
-          padding-right: 66px;
+          padding-inline-end: 66px;
-        }
+          direction: var(--direction);
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 66px !important;
         }
         @media all and (max-height: 900px) {
           mwc-list {

src/dialogs/config-flow/styles.ts

@@ -3,7 +3,11 @@ import { css } from "lit";
 export const configFlowContentStyles = css`
   h2 {
     margin: 24px 38px 0 0;
+    margin-inline-start: 0px;
+    margin-inline-end: 38px;
     padding: 0 24px;
+    padding-inline-start: 24px;
+    padding-inline-end: 24px;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-family: var(

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -460,17 +460,13 @@ export default class HaAutomationActionRow extends LitElement {
           border-top-left-radius: var(--ha-card-border-radius);
         }
         .card-menu {
-          float: right;
+          float: var(--float-end, right);
           z-index: 3;
           margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: flex;
           align-items: center;
         }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          right: initial;
-          left: 16px;
-        }
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -288,16 +288,13 @@ export default class HaAutomationConditionRow extends LitElement {
           border-top-left-radius: var(--ha-card-border-radius);
         }
         .card-menu {
-          float: right;
+          float: var(--float-end, right);
           z-index: 3;
           margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: flex;
           align-items: center;
         }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          float: left;
-        }
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -487,16 +487,13 @@ export default class HaAutomationTriggerRow extends LitElement {
           border-top-left-radius: var(--ha-card-border-radius);
         }
         .card-menu {
-          float: right;
+          float: var(--float-end, right);
           z-index: 3;
           margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: flex;
           align-items: center;
         }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          float: left;
-        }
         .triggered {
           cursor: pointer;
           position: absolute;

src/panels/config/integrations/ha-integration-header.ts

@@ -135,17 +135,19 @@ export class HaIntegrationHeader extends LitElement {
     .header {
       display: flex;
       position: relative;
-      padding: 0 8px 8px 16px;
+      padding-top: 0px;
+      padding-bottom: 8px;
+      padding-inline-start: 16px;
+      padding-inline-end: 8px;
+      direction: var(--direction);
     }
     .header img {
-      margin-right: 16px;
       margin-top: 16px;
+      margin-inline-start: initial;
+      margin-inline-end: 16px;
       width: 40px;
       height: 40px;
-    }
+      direction: var(--direction);
-    :host-context([style*="direction: rtl;"]) .header img {
-      margin-right: auto !important;
-      margin-left: 16px;
     }
     .header .info {
       flex: 1;

src/panels/config/logs/error-log-card.ts

@@ -16,7 +16,6 @@ import "../../../components/ha-ansi-to-html";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-select";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { fetchErrorLog } from "../../../data/error_log";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import { fetchHassioLogs } from "../../../data/hassio/supervisor";
@@ -64,11 +63,7 @@ class ErrorLogCard extends LitElement {
           : ""}
         ${!this._logHTML
           ? html`
-              <mwc-button
+              <mwc-button raised @click=${this._refreshLogs}>
-                raised
-                @click=${this._refreshLogs}
-                dir=${computeRTLDirection(this.hass)}
-              >
                 ${this.hass.localize("ui.panel.config.logs.load_logs")}
               </mwc-button>
             `

src/panels/config/logs/system-log-card.ts

@@ -18,7 +18,6 @@ import {
 import { HomeAssistant } from "../../../types";
 import { showSystemLogDetailDialog } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 @customElement("system-log-card")
 export class SystemLogCard extends LitElement {
@@ -86,7 +85,7 @@ export class SystemLogCard extends LitElement {
             : html`
                 ${this._items.length === 0
                   ? html`
-                      <div class="card-content">
+                      <div class="card-content empty-content">
                         ${this.hass.localize("ui.panel.config.logs.no_issues")}
                       </div>
                     `
@@ -132,7 +131,7 @@ export class SystemLogCard extends LitElement {
                       `
                     )}
 
-                <div class="card-actions" dir=${computeRTLDirection(this.hass)}>
+                <div class="card-actions">
                   <ha-call-service-button
                     .hass=${this.hass}
                     domain="system_log"
@@ -206,8 +205,9 @@ export class SystemLogCard extends LitElement {
         color: var(--warning-color);
       }
 
-      :host-context([style*="direction: rtl;"]) .card-actions {
+      .card-actions,
-        direction: rtl;
+      .empty-content {
+        direction: var(--direction);
       }
     `;
   }

src/panels/media-browser/ha-bar-media-player.ts

@@ -687,14 +687,15 @@ export class BarMediaPlayer extends LitElement {
         font-weight: bold;
       }
 
-      :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+      ha-svg-icon[slot="icon"] {
-        margin-left: 8px !important;
+        margin-inline-start: 8px !important;
-        margin-right: 8px !important;
+        margin-inline-end: 8px !important;
+        direction: var(--direction);
       }
-      :host-context([style*="direction: rtl;"])
+      ha-svg-icon[slot="trailingIcon"] {
-        ha-svg-icon[slot="trailingIcon"] {
+        margin-inline-start: 8px !important;
-        margin-left: 0px !important;
+        margin-inline-end: 0px !important;
-        margin-right: 8px !important;
+        direction: var(--direction);
       }
     `;
   }

src/state/translations-mixin.ts

@@ -191,6 +191,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       this.style.direction = direction;
       document.dir = direction;
       this.style.setProperty("--direction", direction);
+      this.style.setProperty("--float-end", "left");
     }
 
     /**