Various RTL fixes (#12857)

src/components/ha-chip.ts

@@ -67,8 +67,7 @@ export class HaChip extends LitElement {
         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 .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
-        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
         margin-inline-start: -4px;
         margin-inline-end: 4px;

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

@@ -1,17 +1,13 @@
-import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { css, CSSResultGroup, html } from "lit";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, CSSResult, html } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import { HaListItem } from "./ha-list-item";
 
 @customElement("ha-clickable-list-item")
-export class HaClickableListItem extends ListItemBase {
+export class HaClickableListItem extends HaListItem {
   @property() public href?: string;
 
   @property({ type: Boolean }) public disableHref = false;
 
-  // property used only in css
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
   @property({ type: Boolean, reflect: true }) public openNewTab = false;
 
   @query("a") private _anchor!: HTMLAnchorElement;
@@ -39,18 +35,10 @@ export class HaClickableListItem extends ListItemBase {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
-      styles,
+      super.styles,
       css`
-        :host {
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-        :host([graphic="avatar"]:not([twoLine])),
-        :host([graphic="icon"]:not([twoLine])) {
-          height: 48px;
-        }
         a {
           width: 100%;
           height: 100%;
@@ -60,19 +48,6 @@ export class HaClickableListItem extends ListItemBase {
           padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
-        span.material-icons:first-of-type {
-          margin-inline-start: 0px !important;
-          margin-inline-end: var(
-            --mdc-list-item-graphic-margin,
-            16px
-          ) !important;
-          direction: var(--direction);
-        }
-        span.material-icons:last-of-type {
-          margin-inline-start: auto !important;
-          margin-inline-end: 0px !important;
-          direction: var(--direction);
-        }
       `,
     ];
   }

src/components/ha-gauge.ts

@@ -50,7 +50,10 @@ export class Gauge extends LitElement {
 
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-    if (!this._updated || !changedProperties.has("value")) {
+    if (
+      !this._updated ||
+      (!changedProperties.has("value") && !changedProperties.has("label"))
+    ) {
       return;
     }
     this._angle = getAngle(this.value, this.min, this.max);

src/components/ha-list-item.ts

@@ -0,0 +1,42 @@
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
+import { css, CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-list-item")
+export class HaListItem extends ListItemBase {
+  static get styles(): CSSResultGroup {
+    return [
+      styles,
+      css`
+        :host {
+          padding-left: var(--mdc-list-side-padding, 20px);
+          padding-right: var(--mdc-list-side-padding, 20px);
+        }
+        :host([graphic="avatar"]:not([twoLine])),
+        :host([graphic="icon"]:not([twoLine])) {
+          height: 48px;
+        }
+        span.material-icons:first-of-type {
+          margin-inline-start: 0px !important;
+          margin-inline-end: var(
+            --mdc-list-item-graphic-margin,
+            16px
+          ) !important;
+          direction: var(--direction);
+        }
+        span.material-icons:last-of-type {
+          margin-inline-start: auto !important;
+          margin-inline-end: 0px !important;
+          direction: var(--direction);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-item": HaListItem;
+  }
+}

src/components/ha-textfield.ts

@@ -61,6 +61,11 @@ export class HaTextField extends TextFieldBase {
         padding-inline-end: var(--text-field-suffix-padding-right, 0px);
         direction: var(--direction);
       }
+      .mdc-text-field--with-leading-icon {
+        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
+        padding-inline-end: var(--text-field-suffix-padding-right, 16px);
+        direction: var(--direction);
+      }
 
       .mdc-text-field:not(.mdc-text-field--disabled)
         .mdc-text-field__affix--suffix {
@@ -71,6 +76,12 @@ export class HaTextField extends TextFieldBase {
         color: var(--secondary-text-color);
       }
 
+      .mdc-text-field__icon--leading {
+        margin-inline-start: 16px;
+        margin-inline-end: 8px;
+        direction: var(--direction);
+      }
+
       input {
         text-align: var(--text-field-text-align);
       }
@@ -110,6 +121,10 @@ export class HaTextField extends TextFieldBase {
         inset-inline-end: initial !important;
         direction: var(--direction);
       }
+
+      .mdc-text-field__input[type="number"] {
+        direction: var(--direction);
+      }
     `,
   ];
 }

src/components/user/ha-user-picker.ts

@@ -8,6 +8,7 @@ import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
 import "./ha-user-badge";
+import "../ha-list-item";
 
 class HaUserPicker extends LitElement {
   public hass?: HomeAssistant;
@@ -48,14 +49,14 @@ class HaUserPicker extends LitElement {
           : ""}
         ${this._sortedUsers(this.users).map(
           (user) => html`
-            <mwc-list-item graphic="avatar" .value=${user.id}>
+            <ha-list-item graphic="avatar" .value=${user.id}>
               <ha-user-badge
                 .hass=${this.hass}
                 .user=${user}
                 slot="graphic"
               ></ha-user-badge>
               ${user.name}
-            </mwc-list-item>
+            </ha-list-item>
           `
         )}
       </ha-select>

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -803,6 +803,9 @@ export class QuickBar extends LitElement {
 
         span.command-text {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
 
         mwc-list-item {

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -181,6 +181,9 @@ class DialogDeviceRegistryDetail extends LitElement {
         }
         ha-switch {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
         .row {
           margin-top: 8px;

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

@@ -1265,8 +1265,11 @@ export class HaConfigDevicePage extends LitElement {
 
         .card-header ha-icon-button {
           margin-right: -8px;
+          margin-inline-end: -8px;
+          margin-inline-start: initial;
           color: var(--primary-color);
           height: auto;
+          direction: var(--direction);
         }
 
         .device-info {
@@ -1332,6 +1335,9 @@ export class HaConfigDevicePage extends LitElement {
 
         .header-right > *:not(:first-child) {
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
 
         .battery {

src/panels/logbook/ha-logbook-renderer.ts

@@ -16,7 +16,6 @@ import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/entity/state-badge";
 import "../../components/ha-circular-progress";
 import "../../components/ha-relative-time";
@@ -56,9 +55,6 @@ class HaLogbookRenderer extends LitElement {
   @property({ type: Boolean, attribute: "narrow" })
   public narrow = false;
 
-  @property({ attribute: "rtl", type: Boolean })
-  private _rtl = false;
-
   @property({ type: Boolean, attribute: "virtualize", reflect: true })
   public virtualize = false;
 
@@ -86,18 +82,10 @@ class HaLogbookRenderer extends LitElement {
     );
   }
 
-  protected updated(_changedProps: PropertyValues) {
-    const oldHass = _changedProps.get("hass") as HomeAssistant | undefined;
-
-    if (oldHass === undefined || oldHass.language !== this.hass.language) {
-      this._rtl = computeRTL(this.hass);
-    }
-  }
-
   protected render(): TemplateResult {
     if (!this.entries?.length) {
       return html`
-        <div class="container no-entries" .dir=${emitRTLDirection(this._rtl)}>
+        <div class="container no-entries">
           ${this.hass.localize("ui.components.logbook.entries_not_found")}
         </div>
       `;
@@ -107,7 +95,6 @@ class HaLogbookRenderer extends LitElement {
       <div
         class="container ha-scrollbar ${classMap({
           narrow: this.narrow,
-          rtl: this._rtl,
           "no-name": this.noName,
           "no-icon": this.noIcon,
         })}"
@@ -507,10 +494,6 @@ class HaLogbookRenderer extends LitElement {
           height: 100%;
         }
 
-        .rtl {
-          direction: ltr;
-        }
-
         .entry-container {
           width: 100%;
         }
@@ -535,6 +518,9 @@ class HaLogbookRenderer extends LitElement {
 
         .narrow:not(.no-icon) .time {
           margin-left: 32px;
+          margin-inline-start: 32px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
 
         .message-relative_time {
@@ -556,10 +542,6 @@ class HaLogbookRenderer extends LitElement {
           padding: 0 16px;
         }
 
-        .rtl .date {
-          direction: rtl;
-        }
-
         .icon-message {
           display: flex;
           align-items: center;
@@ -572,8 +554,11 @@ class HaLogbookRenderer extends LitElement {
 
         state-badge {
           margin-right: 16px;
+          margin-inline-start: initial;
           flex-shrink: 0;
           color: var(--state-icon-color);
+          margin-inline-end: 16px;
+          direction: var(--direction);
         }
 
         .message {
@@ -613,6 +598,9 @@ class HaLogbookRenderer extends LitElement {
 
         .narrow .icon-message state-badge {
           margin-left: 0;
+          margin-inline-start: 0;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
       `,
     ];

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

@@ -17,7 +17,6 @@ import {
   createSearchParam,
   extractSearchParamsObject,
 } from "../../common/url/search-params";
-import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
@@ -39,8 +38,6 @@ export class HaPanelLogbook extends LitElement {
 
   @state() _entityIds?: string[];
 
-  @property({ reflect: true, type: Boolean }) rtl = false;
-
   @state() private _ranges?: DateRangePickerRanges;
 
   public constructor() {
@@ -149,15 +146,6 @@ export class HaPanelLogbook extends LitElement {
     this._applyURLParams();
   };
 
-  protected updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.language !== this.hass.language) {
-        this.rtl = computeRTL(this.hass);
-      }
-    }
-  }
-
   private _applyURLParams() {
     const searchParams = new URLSearchParams(location.search);
 

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -346,6 +346,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         margin: auto;
         width: 100%;
         max-width: 300px;
+        direction: ltr;
       }
 
       #keypad mwc-button {

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

@@ -276,9 +276,12 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         cursor: pointer;
         top: 0;
         right: 0;
+        inset-inline-start: initial;
+        inset-inline-end: 0;
         border-radius: 100%;
         color: var(--secondary-text-color);
         z-index: 1;
+        direction: var(--direction);
       }
 
       .content {

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -600,6 +600,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         );
         height: 100%;
         right: 0;
+
         opacity: 1;
         transition: width 0.8s, opacity 0.8s linear 0.8s;
       }
@@ -668,6 +669,11 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         transition: padding, color;
         transition-duration: 0.4s;
         margin-left: -12px;
+        margin-inline-start: -12px;
+        margin-inline-end: initial;
+        padding-inline-start: 0;
+        padding-inline-end: 8px;
+        direction: var(--direction);
       }
 
       .controls > div {
@@ -693,6 +699,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       ha-icon-button.browse-media {
         position: absolute;
         right: 4px;
+        inset-inline-start: initial;
+        inset-inline-end: 4px;
+        direction: var(--direction);
         --mdc-icon-size: 24px;
       }
 
@@ -709,12 +718,18 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       .icon-name ha-state-icon {
         padding-right: 8px;
+        padding-inline-start: initial;
+        padding-inline-end: 8px;
+        direction: var(--direction);
       }
 
       .more-info {
         position: absolute;
         top: 4px;
         right: 4px;
+        inset-inline-start: initial;
+        inset-inline-end: 4px;
+        direction: var(--direction);
       }
 
       .media-info {

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

@@ -332,6 +332,9 @@ export class HuiConditionalCardEditor
         }
         .condition .state ha-select {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
         .condition .state ha-textfield {
           flex-grow: 1;