diff --git a/gallery/src/pages/components/ha-alert.markdown b/gallery/src/pages/components/ha-alert.markdown
index e5f5e5c059..89f2aa39d8 100644
--- a/gallery/src/pages/components/ha-alert.markdown
+++ b/gallery/src/pages/components/ha-alert.markdown
@@ -156,18 +156,6 @@ The `title ` option should not be used without a description.
*Documentation coming soon*
-**Right to left**
-
-
- This is an info alert — check it out!
-
-
-```html
-
- This is an info alert — check it out!
-
-```
-
### API
**Properties/Attributes**
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index d49c9959ac..772d2db0d6 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -37,13 +37,10 @@ class HaAlert extends LitElement {
@property({ type: Boolean }) public dismissable = false;
- @property({ type: Boolean }) public rtl = false;
-
public render() {
return html`
.content {
- flex-direction: row-reverse;
- text-align: right;
- }
.content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
+ text-align: var(--float-start);
}
.action {
z-index: 1;
@@ -124,10 +115,9 @@ class HaAlert extends LitElement {
word-break: break-word;
margin-left: 8px;
margin-right: 0;
- }
- .issue-type.rtl > .content > .main-content {
- margin-left: 0;
- margin-right: 8px;
+ margin-inline-start: 8px;
+ margin-inline-end: 0;
+ direction: var(--direction);
}
.title {
margin-top: 2px;
diff --git a/src/components/ha-textarea.ts b/src/components/ha-textarea.ts
index ce7c1539eb..c50d4a4ce6 100644
--- a/src/components/ha-textarea.ts
+++ b/src/components/ha-textarea.ts
@@ -8,6 +8,12 @@ import { customElement, property } from "lit/decorators";
export class HaTextArea extends TextAreaBase {
@property({ type: Boolean, reflect: true }) autogrow = false;
+ firstUpdated() {
+ super.firstUpdated();
+
+ this.setAttribute("dir", document.dir);
+ }
+
updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (this.autogrow && changedProperties.has("value")) {
@@ -47,6 +53,10 @@ export class HaTextArea extends TextAreaBase {
margin-top: 16px;
margin-bottom: 16px;
}
+ :host([dir="rtl"]) .mdc-floating-label {
+ right: 16px;
+ left: initial;
+ }
`,
];
}
diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts
index cf087b5ca1..94c2442e84 100644
--- a/src/panels/config/automation/ha-automation-trace.ts
+++ b/src/panels/config/automation/ha-automation-trace.ts
@@ -39,6 +39,7 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-subpage";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
+import { computeRTL } from "../../../common/util/compute_rtl";
@customElement("ha-automation-trace")
export class HaAutomationTrace extends LitElement {
@@ -176,7 +177,9 @@ export class HaAutomationTrace extends LitElement {
.label=${this.hass!.localize(
"ui.panel.config.automation.trace.older_trace"
)}
- .path=${mdiRayEndArrow}
+ .path=${computeRTL(this.hass!)
+ ? mdiRayStartArrow
+ : mdiRayEndArrow}
.disabled=${this._traces[this._traces.length - 1].run_id ===
this._runId}
@click=${this._pickOlderTrace}
@@ -198,7 +201,9 @@ export class HaAutomationTrace extends LitElement {
.label=${this.hass!.localize(
"ui.panel.config.automation.trace.newer_trace"
)}
- .path=${mdiRayStartArrow}
+ .path=${computeRTL(this.hass!)
+ ? mdiRayEndArrow
+ : mdiRayStartArrow}
.disabled=${this._traces[0].run_id === this._runId}
@click=${this._pickNewerTrace}
>