From a39cf99024c68a824cd52c403cc14fdc7588f745 Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Mon, 26 Feb 2024 16:14:32 +0200
Subject: [PATCH] RTL updates (#19848)

* RTL updates

* Additional fixes

* TODO fix
---
 src/components/ha-climate-state.ts                        | 1 +
 src/components/ha-metric.ts                               | 8 +++++++-
 src/components/ha-qr-scanner.ts                           | 2 ++
 src/components/ha-textfield.ts                            | 3 +--
 src/components/media-player/dialog-media-player-browse.ts | 1 -
 src/components/media-player/ha-media-player-browse.ts     | 1 +
 .../lights/ha-more-info-light-favorite-colors.ts          | 2 ++
 .../more-info/components/lights/light-color-rgb-picker.ts | 2 ++
 .../voice-command-dialog/ha-voice-command-dialog.ts       | 2 ++
 src/layouts/hass-tabs-subpage-data-table.ts               | 2 ++
 src/onboarding/onboarding-location.ts                     | 4 ++++
 src/panels/config/areas/ha-config-area-page.ts            | 7 +++++++
 src/panels/config/cloud/account/cloud-remote-pref.ts      | 2 ++
 src/panels/config/hardware/dialog-hardware-available.ts   | 2 ++
 .../integrations/ha-config-integrations-dashboard.ts      | 7 ++++++-
 .../config/integrations/ha-integration-action-card.ts     | 2 ++
 .../integration-panels/zha/zha-add-devices-page.ts        | 2 ++
 .../integration-panels/zha/zha-cluster-commands.ts        | 2 ++
 src/panels/config/storage/ha-config-section-storage.ts    | 2 ++
 .../voice-assistants/expose/expose-assistant-icon.ts      | 2 ++
 .../developer-tools/template/developer-tools-template.ts  | 2 ++
 src/panels/lovelace/cards/hui-media-control-card.ts       | 2 ++
 src/panels/lovelace/cards/hui-todo-list-card.ts           | 2 ++
 src/panels/lovelace/entity-rows/hui-number-entity-row.ts  | 1 +
 src/panels/media-browser/ha-panel-media-browser.ts        | 1 -
 25 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts
index ca5d3a00e9..c2f35979e8 100644
--- a/src/components/ha-climate-state.ts
+++ b/src/components/ha-climate-state.ts
@@ -156,6 +156,7 @@ class HaClimateState extends LitElement {
 
       .current {
         color: var(--secondary-text-color);
+        direction: var(--direction);
       }
 
       .state-label {
diff --git a/src/components/ha-metric.ts b/src/components/ha-metric.ts
index 4a33812929..9d0fd3431e 100644
--- a/src/components/ha-metric.ts
+++ b/src/components/ha-metric.ts
@@ -19,7 +19,9 @@ class HaMetric extends LitElement {
       <ha-settings-row>
         <span slot="heading"> ${this.heading} </span>
         <div slot="description" .title=${this.tooltip ?? ""}>
-          <span class="value"> ${roundedValue} % </span>
+          <span class="value">
+            <div>${roundedValue} %</div>
+          </span>
           <ha-bar
             class=${classMap({
               "target-warning": roundedValue > 50,
@@ -70,6 +72,10 @@ class HaMetric extends LitElement {
         padding-inline-start: initial;
         flex-shrink: 0;
       }
+      .value > div {
+        direction: ltr;
+        text-align: var(--float-start);
+      }
     `;
   }
 }
diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts
index 9d437164cc..b65f9ba07a 100644
--- a/src/components/ha-qr-scanner.ts
+++ b/src/components/ha-qr-scanner.ts
@@ -186,6 +186,8 @@ class HaQrScanner extends LitElement {
       position: absolute;
       bottom: 8px;
       right: 8px;
+      inset-inline-end: 8px;
+      inset-inline-start: initial;
       background: #727272b2;
       color: white;
       border-radius: 50%;
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index 170c0c179d..175b8ae290 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -90,7 +90,7 @@ export class HaTextField extends TextFieldBase {
         padding-right: var(--text-field-suffix-padding-right, 0px);
         padding-inline-start: var(--text-field-suffix-padding-left, 12px);
         padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-        direction: var(--direction);
+        direction: ltr;
       }
       .mdc-text-field--with-leading-icon {
         padding-inline-start: var(--text-field-suffix-padding-left, 0px);
@@ -199,7 +199,6 @@ export class HaTextField extends TextFieldBase {
     // safari workaround - must be explicit
     mainWindow.document.dir === "rtl"
       ? css`
-          .mdc-text-field__affix--suffix,
           .mdc-text-field--with-leading-icon,
           .mdc-text-field__icon--leading,
           .mdc-floating-label,
diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts
index fd8bdba673..e0a66ae79c 100644
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -223,7 +223,6 @@ class DialogMediaPlayerBrowse extends LitElement {
 
         ha-media-player-browse {
           --media-browser-max-height: calc(100vh - 65px);
-          direction: ltr;
         }
 
         :host(.opened) ha-media-player-browse {
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index e46c9e908c..6f205de5fd 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -879,6 +879,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           display: flex;
           flex-direction: column;
           position: relative;
+          direction: ltr;
         }
 
         ha-circular-progress {
diff --git a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
index 93a6b1528f..aa9893d000 100644
--- a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
@@ -322,6 +322,8 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
         position: absolute;
         top: -6px;
         right: -6px;
+        inset-inline-end: -6px;
+        inset-inline-start: initial;
         width: 20px;
         height: 20px;
         outline: none;
diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
index de42e5b054..a38cbe2b2e 100644
--- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
@@ -446,6 +446,8 @@ class LightRgbColorPicker extends LitElement {
           position: absolute;
           top: 0;
           right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
           z-index: 1;
         }
 
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index 700c6e8ea9..086e8b448d 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -647,6 +647,8 @@ export class HaVoiceCommandDialog extends LitElement {
           position: absolute;
           --mdc-icon-size: 16px;
           right: 5px;
+          inset-inline-end: 5px;
+          inset-inline-start: initial;
           top: 0px;
         }
 
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 7af35ded29..096ec15e30 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -377,6 +377,8 @@ export class HaTabsSubpageDataTable extends LitElement {
         color: var(--text-primary-color);
         position: absolute;
         right: 0;
+        inset-inline-end: 0;
+        inset-inline-start: initial;
         top: 4px;
         font-size: 0.65em;
       }
diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts
index 1d031b81f3..3027a93f9e 100644
--- a/src/onboarding/onboarding-location.ts
+++ b/src/onboarding/onboarding-location.ts
@@ -499,6 +499,8 @@ class OnboardingLocation extends LitElement {
           position: absolute;
           top: 10px;
           right: 10px;
+          inset-inline-end: 10px;
+          inset-inline-start: initial;
           --mdc-icon-button-size: 36px;
           --mdc-icon-size: 20px;
           color: var(--secondary-text-color);
@@ -509,6 +511,8 @@ class OnboardingLocation extends LitElement {
         ha-textfield > ha-circular-progress {
           position: relative;
           left: 12px;
+          inset-inline-start: 12px;
+          inset-inline-end: initial;
         }
         ha-locations-editor {
           display: block;
diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts
index 62abd48d4e..18ce4dd5b9 100644
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -710,6 +710,8 @@ class HaConfigAreaPage extends LitElement {
           position: absolute;
           top: 4px;
           right: 4px;
+          inset-inline-end: 4px;
+          inset-inline-start: initial;
           display: none;
         }
         .img-container:hover .img-edit-btn {
@@ -736,6 +738,11 @@ class HaConfigAreaPage extends LitElement {
           padding: 16px;
           color: var(--secondary-text-color);
         }
+
+        mwc-button > ha-svg-icon {
+          margin-inline-start: 0;
+          margin-inline-end: 8px;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index b74e94dce3..e94e50b56b 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -226,6 +226,8 @@ export class CloudRemotePref extends LitElement {
         position: absolute;
         right: 24px;
         top: 24px;
+        inset-inline-end: 24px;
+        inset-inline-start: initial;
       }
       .card-actions {
         display: flex;
diff --git a/src/panels/config/hardware/dialog-hardware-available.ts b/src/panels/config/hardware/dialog-hardware-available.ts
index b11d34410b..5cc858b1c8 100644
--- a/src/panels/config/hardware/dialog-hardware-available.ts
+++ b/src/panels/config/hardware/dialog-hardware-available.ts
@@ -172,6 +172,8 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
           position: absolute;
           right: 16px;
           top: 10px;
+          inset-inline-end: 16px;
+          inset-inline-start: initial;
           text-decoration: none;
           color: var(--primary-text-color);
         }
diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
index 8e0ed86b45..7a960576e8 100644
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@@ -877,6 +877,8 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
           color: var(--text-primary-color);
           position: absolute;
           right: 0px;
+          inset-inline-end: 0px;
+          inset-inline-start: initial;
           top: 4px;
           font-size: 0.65em;
         }
@@ -884,7 +886,10 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
           position: relative;
         }
         h1 {
-          margin: 8px 0 0 16px;
+          margin-top: 8px;
+          margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
         ha-button-menu {
           color: var(--primary-text-color);
diff --git a/src/panels/config/integrations/ha-integration-action-card.ts b/src/panels/config/integrations/ha-integration-action-card.ts
index 189b5d4b46..ada2e3b76b 100644
--- a/src/panels/config/integrations/ha-integration-action-card.ts
+++ b/src/panels/config/integrations/ha-integration-action-card.ts
@@ -90,6 +90,8 @@ export class HaIntegrationActionCard extends LitElement {
         position: absolute;
         top: 8px;
         right: 8px;
+        inset-inline-end: 8px;
+        inset-inline-start: initial;
       }
       .filler {
         flex: 1;
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
index 11d37b1988..a7570e0a46 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -269,6 +269,8 @@ class ZHAAddDevicesPage extends LitElement {
           margin-inline-start: initial;
           top: -6px;
           right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
           color: var(--primary-color);
         }
         .search-button {
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
index 4872fde8e1..d6932b10ff 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
@@ -241,6 +241,8 @@ export class ZHAClusterCommands extends LitElement {
           float: right;
           top: -6px;
           right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
           padding-right: 0px;
           padding-inline-end: 0px;
           padding-inline-start: initial;
diff --git a/src/panels/config/storage/ha-config-section-storage.ts b/src/panels/config/storage/ha-config-section-storage.ts
index 708f79e861..89b5fc7cf0 100644
--- a/src/panels/config/storage/ha-config-section-storage.ts
+++ b/src/panels/config/storage/ha-config-section-storage.ts
@@ -334,6 +334,8 @@ class HaConfigSectionStorage extends LitElement {
       position: relative;
       top: -10px;
       right: 10px;
+      inset-inline-end: 10px;
+      inset-inline-start: initial;
     }
 
     .no-mounts {
diff --git a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts b/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts
index 46d2291aa6..69d0bcf821 100644
--- a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts
+++ b/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts
@@ -93,6 +93,8 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
         --mdc-icon-size: 16px;
         right: 10px;
         top: -7px;
+        inset-inline-end: 10px;
+        inset-inline-start: initial;
       }
     `;
   }
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 7732ad7760..e4162d3077 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -290,6 +290,8 @@ class HaPanelDevTemplate extends LitElement {
           position: absolute;
           top: 8px;
           right: 8px;
+          inset-inline-end: 8px;
+          inset-inline-start: initial;
         }
 
         ha-alert {
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index 7d5a1d8cc3..d28d0f612f 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -726,6 +726,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         position: absolute;
         right: 4px;
         --mdc-icon-size: 24px;
+        inset-inline-end: 4px;
+        inset-inline-start: initial;
       }
 
       .top-info {
diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index 5094ea3d73..bed42344a7 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -732,6 +732,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
       .deleteItemButton {
         position: relative;
         left: 8px;
+        inset-inline-start: 8px;
+        inset-inline-end: initial;
       }
 
       ha-textfield {
diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
index 13afe9d3c5..1b57c6ee41 100644
--- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
@@ -139,6 +139,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
       }
       ha-textfield {
         text-align: end;
+        direction: ltr !important;
       }
       ha-slider {
         width: 100%;
diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts
index 8713bed2a4..c5bc566f07 100644
--- a/src/panels/media-browser/ha-panel-media-browser.ts
+++ b/src/panels/media-browser/ha-panel-media-browser.ts
@@ -343,7 +343,6 @@ class PanelMediaBrowser extends LitElement {
 
         ha-media-player-browse {
           height: calc(100vh - (100px + var(--header-height)));
-          direction: ltr;
         }
 
         :host([narrow]) ha-media-player-browse {