RTL updates (#12745)

src/components/ha-chip.ts

@@ -66,9 +66,13 @@ export class HaChip extends LitElement {
         line-height: 14px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
+      .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
       .mdc-chip.no-text
         .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
+        margin-inline-start: -4px;
+        margin-inline-end: 4px;
+        direction: var(--direction);
       }
 
       span[role="gridcell"] {

src/components/ha-textfield.ts

@@ -57,6 +57,9 @@ export class HaTextField extends TextFieldBase {
       .mdc-text-field__affix--suffix {
         padding-left: var(--text-field-suffix-padding-left, 12px);
         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);
       }
 
       .mdc-text-field:not(.mdc-text-field--disabled)

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -252,6 +252,8 @@ export class HaConfigApplicationCredentials extends LitElement {
       .selected-txt {
         font-weight: bold;
         padding-left: 16px;
+        padding-inline-start: 16px;
+        direction: var(--direction);
       }
       .table-header .selected-txt {
         margin-top: 20px;

src/panels/config/devices/ha-config-device-page.ts

@@ -1179,6 +1179,8 @@ export class HaConfigDevicePage extends LitElement {
           display: flex;
           align-items: center;
           padding-left: 8px;
+          padding-inline-start: 8px;
+          direction: var(--direction);
         }
 
         .column,

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -541,7 +541,9 @@ export class HaConfigDeviceDashboard extends LitElement {
         .clear {
           color: var(--primary-color);
           padding-left: 8px;
+          padding-inline-start: 8px;
           text-transform: uppercase;
+          direction: var(--direction);
         }
       `,
       haStyle,

src/panels/config/entities/ha-config-entities.ts

@@ -976,6 +976,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .selected-txt {
           font-weight: bold;
           padding-left: 16px;
+          padding-inline-start: 16px;
+          direction: var(--direction);
         }
         .table-header .selected-txt {
           margin-top: 20px;
@@ -985,6 +987,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         }
         .header-toolbar .header-btns {
           margin-right: -12px;
+          margin-inline-end: -12px;
+          direction: var(--direction);
         }
         .header-btns {
           display: flex;
@@ -999,7 +1003,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .clear {
           color: var(--primary-color);
           padding-left: 8px;
+          padding-inline-start: 8px;
           text-transform: uppercase;
+          direction: var(--direction);
         }
       `,
     ];

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -87,7 +87,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
               ${dashboard.default
                 ? html`
                     <ha-svg-icon
-                      style="padding-left: 10px;"
+                      style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
                       .path=${mdiCheckCircleOutline}
                     ></ha-svg-icon>
                     <paper-tooltip animation-delay="0">

src/panels/energy/ha-panel-energy.ts

@@ -126,7 +126,9 @@ class PanelEnergy extends LitElement {
         hui-energy-period-selector {
           width: 100%;
           padding-left: 16px;
+          padding-inline-start: 16px;
           --disabled-text-color: rgba(var(--rgb-text-primary-color), 0.5);
+          direction: var(--direction);
         }
       `,
     ];

src/panels/lovelace/cards/hui-calendar-card.ts

@@ -215,6 +215,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
         line-height: 1.2;
         padding-top: 16px;
         padding-left: 8px;
+        padding-inline-start: 8px;
+        direction: var(--direction);
       }
     `;
   }

src/panels/lovelace/cards/hui-shopping-list-card.ts

@@ -372,16 +372,22 @@ class HuiShoppingListCard
 
       .addButton {
         padding-right: 16px;
+        padding-inline-end: 16px;
         cursor: pointer;
+        direction: var(--direction);
       }
 
       .reorderButton {
         padding-left: 16px;
+        padding-inline-start: 16px;
         cursor: pointer;
+        direction: var(--direction);
       }
 
       ha-checkbox {
         margin-left: -12px;
+        margin-inline-start: -12px;
+        direction: var(--direction);
       }
 
       ha-textfield {

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -311,6 +311,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       }
       ha-button-toggle-group {
         padding-left: 8px;
+        padding-inline-start: 8px;
+        direction: var(--direction);
       }
       mwc-button {
         flex-shrink: 0;

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -161,6 +161,8 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
       css`
         .geo_location_sources {
           padding-left: 20px;
+          padding-inline-start: 20px;
+          direction: var(--direction);
         }
       `,
     ];

src/panels/lovelace/hui-root.ts

@@ -946,8 +946,10 @@ class HUIRoot extends LitElement {
         .edit-icon {
           color: var(--accent-color);
           padding-left: 8px;
+          padding-inline-start: 8px;
           vertical-align: middle;
           --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
+          direction: var(--direction);
         }
         .edit-icon.view {
           display: none;