Fix RTL in selection in date time picker (#53020)

src/components/date-picker/date-range-picker.ts

@@ -176,7 +176,7 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
               tabindex="-1"
               slot="next"
             ></ha-icon-button-next>
-            <calendar-month></calendar-month>
+            <calendar-month dir=${this.dir}></calendar-month>
           </calendar-range>
           ${
             this.timePicker

src/components/date-picker/ha-date-range-picker.ts

@@ -26,6 +26,8 @@ import "../ha-icon-button-prev";
 import "../ha-textarea";
 import type { HaTextArea } from "../ha-textarea";
 import "./date-range-picker";
+import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
+import { translationMetadata } from "../../resources/translations-metadata";
 
 export type DateRangePickerRanges = Record<string, [Date, Date]>;
 
@@ -239,8 +241,13 @@ export class HaDateRangePicker extends LitElement {
     if (!this._opened) {
       return nothing;
     }
+    const dir = emitRTLDirection(
+      computeRTL(this._i18n.locale.language, translationMetadata.translations)
+    );
+
     return html`
       <date-range-picker
+        dir=${dir}
         .ranges=${this.ranges === false ? false : this.ranges || this._ranges}
         .startDate=${this.startDate}
         .endDate=${this.endDate}

src/components/date-picker/styles.ts

@@ -103,13 +103,15 @@ export const dateRangePickerStyles = css`
   }
   calendar-month::part(range-start),
   calendar-month::part(range-start):hover {
-    border-top-left-radius: var(--ha-border-radius-circle);
-    border-bottom-left-radius: var(--ha-border-radius-circle);
+    /* logical: rounds the inline-start corners (works in LTR and RTL) */
+    border-start-start-radius: var(--ha-border-radius-circle);
+    border-end-start-radius: var(--ha-border-radius-circle);
   }
   calendar-month::part(range-end),
   calendar-month::part(range-end):hover {
-    border-top-right-radius: var(--ha-border-radius-circle);
-    border-bottom-right-radius: var(--ha-border-radius-circle);
+    /* logical: rounds the inline-end corners (works in LTR and RTL) */
+    border-start-end-radius: var(--ha-border-radius-circle);
+    border-end-end-radius: var(--ha-border-radius-circle);
   }
   calendar-month::part(range-start):hover,
   calendar-month::part(range-end):hover,