RTL updates (#19848)

* RTL updates

* Additional fixes

* TODO fix

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 {

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);
+      }
     `;
   }
 }

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%;

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,

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 {

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 {

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;

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;
         }
 

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;
         }
 

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;
       }

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;

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;
+        }
       `,
     ];
   }

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;

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);
         }

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);

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;

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 {

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;

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 {

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;
       }
     `;
   }

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 {

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 {

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 {

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%;

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 {