diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
index 04055aeefa..915eb18556 100644
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -100,7 +100,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
                           ) || this._params.entry.domain
                         )}
                       </p>`}
-                    .dir="${computeRTLDirection(this.hass)}"
+                    .dir=${computeRTLDirection(this.hass)}
                   >
                     <ha-switch
                       .checked=${!this._disableNewEntities}
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index 69332699a7..5a3ae1ebd2 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -133,7 +133,7 @@ class CloudAlexa extends LitElement {
               .label=${this.hass!.localize(
                 "ui.panel.config.cloud.alexa.expose"
               )}
-              .dir="${computeRTLDirection(this.hass!)}"
+              .dir=${computeRTLDirection(this.hass!)}
             >
               <ha-switch
                 .entityId=${entity.entity_id}
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index e96500a6a7..84e3c77d1c 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -84,6 +84,7 @@ class CloudGoogleAssistant extends LitElement {
     const filterFunc = this._getEntityFilterFunc(
       this.cloudStatus.google_entities
     );
+    const dir = computeRTLDirection(this.hass!);
 
     // We will only generate `isInitialExposed` during first render.
     // On each subsequent render we will use the same set so that cards
@@ -134,7 +135,7 @@ class CloudGoogleAssistant extends LitElement {
                 .label=${this.hass!.localize(
                   "ui.panel.config.cloud.google.expose"
                 )}
-                .dir="${computeRTLDirection(this.hass!)}"
+                .dir=${dir}
               >
                 <ha-switch
                   .entityId=${entity.entity_id}
@@ -152,7 +153,7 @@ class CloudGoogleAssistant extends LitElement {
                       .label=${this.hass!.localize(
                         "ui.panel.config.cloud.google.disable_2FA"
                       )}
-                      .dir="${computeRTLDirection(this.hass!)}"
+                      .dir=${dir}
                     >
                       <ha-switch
                         .entityId=${entity.entity_id}
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
index f1c5f3aff6..e60a237606 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
@@ -51,6 +51,8 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
       return html``;
     }
 
+    const dir = computeRTLDirection(this.hass!);
+
     return html`
       <ha-dialog
         open
@@ -71,7 +73,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.mqtt_device_debug_info.deserialize"
             )}
-            .dir="${computeRTLDirection(this.hass)}"
+            .dir=${dir}
           >
             <ha-switch
               .checked=${this._showDeserialized}
@@ -85,7 +87,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.mqtt_device_debug_info.show_as_yaml"
             )}
-            .dir="${computeRTLDirection(this.hass)}"
+            .dir=${dir}
           >
             <ha-switch
               .checked=${this._showAsYaml}
diff --git a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
index 9159c085e6..c7245e99fc 100644
--- a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
+++ b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
@@ -75,6 +75,8 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       this._params.urlPath !== "lovelace" &&
       !/^[a-zA-Z0-9_-]+-[a-zA-Z0-9_-]+$/.test(this._urlPath);
     const titleInvalid = !this._title.trim();
+    const dir = computeRTLDirection(this.hass);
+
     return html`
       <ha-dialog
         open
@@ -149,7 +151,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                       .label=${this.hass.localize(
                         "ui.panel.config.lovelace.dashboards.detail.show_sidebar"
                       )}
-                      .dir="${computeRTLDirection(this.hass)}"
+                      .dir=${dir}
                     >
                       <ha-switch
                         .checked=${this._showInSidebar}
@@ -163,7 +165,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                       .label=${this.hass.localize(
                         "ui.panel.config.lovelace.dashboards.detail.require_admin"
                       )}
-                      .dir="${computeRTLDirection(this.hass)}"
+                      .dir=${dir}
                     >
                       <ha-switch
                         .checked=${this._requireAdmin}
diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts
index 250767e40f..b9ba84bd87 100644
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -116,7 +116,7 @@ export class DialogAddUser extends LitElement {
           ></paper-input>
           <ha-formfield
             .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-            .dir="${computeRTLDirection(this.hass)}"
+            .dir=${computeRTLDirection(this.hass)}
           >
             <ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
             </ha-switch>
diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts
index 7d770d1550..59015bb07f 100644
--- a/src/panels/config/users/dialog-user-detail.ts
+++ b/src/panels/config/users/dialog-user-detail.ts
@@ -103,7 +103,7 @@ class DialogUserDetail extends LitElement {
             ></paper-input>
             <ha-formfield
               .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${computeRTLDirection(this.hass)}
             >
               <ha-switch
                 .disabled=${user.system_generated}
diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts
index 8bfc9a15fe..6899d1ed29 100644
--- a/src/panels/config/zone/dialog-zone-detail.ts
+++ b/src/panels/config/zone/dialog-zone-detail.ts
@@ -187,7 +187,7 @@ class DialogZoneDetail extends LitElement {
               .label=${this.hass!.localize(
                 "ui.panel.config.zone.detail.passive"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${computeRTLDirection(this.hass)}
             >
               <ha-switch
                 .checked=${this._passive}
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index f812b2cb73..0ff82af4c6 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -103,6 +103,7 @@ export class HuiButtonCardEditor extends LitElement
       "call-service",
       "none",
     ];
+    const dir = computeRTLDirection(this.hass!);
 
     return html`
       ${configElementStyle}
@@ -149,7 +150,7 @@ export class HuiButtonCardEditor extends LitElement
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_name"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${dir}
             >
               <ha-switch
                 .checked="${this._config!.show_name !== false}"
@@ -163,7 +164,7 @@ export class HuiButtonCardEditor extends LitElement
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_icon"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${dir}
             >
               <ha-switch
                 .checked="${this._config!.show_icon !== false}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 1c73d134a7..0c4dc796c0 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -94,7 +94,7 @@ export class HuiEntitiesCardEditor extends LitElement
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.entities.show_header_toggle"
           )}
-          .dir="${computeRTLDirection(this.hass)}"
+          .dir=${computeRTLDirection(this.hass)}
         >
           <ha-switch
             .checked="${this._config!.show_header_toggle !== false}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
index 078884a0b5..bdaa4e0699 100644
--- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -147,7 +147,7 @@ export class HuiGaugeCardEditor extends LitElement
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.gauge.severity.define"
           )}
-          .dir="${computeRTLDirection(this.hass)}"
+          .dir=${computeRTLDirection(this.hass)}
         >
           <ha-switch
             .checked="${this._config!.severity !== undefined}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index 93e5bc3137..8baa9e8cc4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -84,6 +84,8 @@ export class HuiGlanceCardEditor extends LitElement
       return html``;
     }
 
+    const dir = computeRTLDirection(this.hass!);
+
     return html`
       ${configElementStyle}
       <div class="card-config">
@@ -122,7 +124,7 @@ export class HuiGlanceCardEditor extends LitElement
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_name"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${dir}
             >
               <ha-switch
                 .checked=${this._config!.show_name !== false}
@@ -136,7 +138,7 @@ export class HuiGlanceCardEditor extends LitElement
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_icon"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${dir}
             >
               <ha-switch
                 .checked=${this._config!.show_icon !== false}
@@ -151,7 +153,7 @@ export class HuiGlanceCardEditor extends LitElement
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_state"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${dir}
             >
               <ha-switch
                 .checked=${this._config!.show_state !== false}
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index 8931d799f1..323c6c8d3b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -125,7 +125,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
             .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.map.dark_mode"
             )}
-            .dir="${computeRTLDirection(this.hass)}"
+            .dir=${computeRTLDirection(this.hass)}
           >
             <ha-switch
               .checked="${this._dark_mode}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index c186751326..fc592e5863 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -108,6 +108,7 @@ export class HuiPictureEntityCardEditor extends LitElement
 
     const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
     const views = ["auto", "live"];
+    const dir = computeRTLDirection(this.hass!);
 
     return html`
       ${configElementStyle}
@@ -194,7 +195,7 @@ export class HuiPictureEntityCardEditor extends LitElement
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_name"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${dir}
             >
               <ha-switch
                 .checked="${this._config!.show_name !== false}"
@@ -208,7 +209,7 @@ export class HuiPictureEntityCardEditor extends LitElement
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_state"
               )}
-              .dir="${computeRTLDirection(this.hass)}"
+              .dir=${dir}
             >
               <ha-switch
                 .checked="${this._config!.show_state !== false}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
index b048068fcf..cb589aad3d 100644
--- a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
@@ -115,7 +115,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
             .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.weather-forecast.show_forecast"
             )}
-            .dir="${computeRTLDirection(this.hass)}"
+            .dir=${computeRTLDirection(this.hass)}
           >
             <ha-switch
               .checked=${this._config!.show_forecast !== false}
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index e84256f09e..10a52e52fb 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -78,7 +78,7 @@ export class HuiSaveConfig extends LitElement {
                   .label=${this.hass!.localize(
                     "ui.panel.lovelace.editor.save_config.empty_config"
                   )}
-                  .dir="${computeRTLDirection(this.hass!)}"
+                  .dir=${computeRTLDirection(this.hass!)}
                 >
                   <ha-switch
                     .checked=${this._emptyConfig}
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index 290837d6c9..4bcceddb4a 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -127,7 +127,7 @@ export class HuiViewEditor extends LitElement {
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.view.panel_mode.title"
           )}
-          .dir="${computeRTLDirection(this.hass!)}"
+          .dir=${computeRTLDirection(this.hass)}
         >
           <ha-switch
             .checked=${this._panel !== false}
diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
index 4ea8cb338b..5bc440d065 100644
--- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
@@ -76,7 +76,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
               <div class="flex">
                 <ha-slider
                   .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                  .dir="${computeRTLDirection(this.hass!)}"
+                  .dir=${computeRTLDirection(this.hass)}
                   .step="${Number(stateObj.attributes.step)}"
                   .min="${Number(stateObj.attributes.min)}"
                   .max="${Number(stateObj.attributes.max)}"