fix(bl-calendar): Add RTL support for arrow icons to prevent visual s… (

#998)

Issue
When the user selects RTL mode, the calendar icons are swapped
incorrectly.

Fix
Explicitly set direction: ltr to ensure icons remain in the correct
order.
Resolved incorrect icon placement while maintaining RTL layout.

Issue: #997

---------

Co-authored-by: mehmet.tanas <[email protected]>
Co-authored-by: Erbil <[email protected]>

src/components/calendar/bl-calendar.css

@@ -26,6 +26,10 @@
   flex: 1;
 }
 
+:host([dir="rtl"]) .arrow {
+  transform: scale(-1);
+}
+
 .header-text {
   flex: 3;
 }
@@ -127,6 +131,7 @@
 
 .grid-item {
   width: 93.33px;
+
   --bl-size-3xs: 15px;
 }
 

src/components/calendar/bl-calendar.ts

@@ -1,7 +1,9 @@
 import { CSSResultGroup, html, PropertyValues } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { localized } from "@lit/localize";
 import DatepickerCalendarMixin from "../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin";
+import { setDirectionProperty } from "../../utilities/direction";
 import { event, EventDispatcher } from "../../utilities/event";
 import { formatToDateArray } from "../../utilities/format-to-date-array";
 import "../button/bl-button";
@@ -20,6 +22,7 @@ import { Calendar, CalendarDay, CalendarView } from "./bl-calendar.types";
  * @summary Baklava Calendar component
  **/
 @customElement("bl-calendar")
+@localized()
 export default class BlCalendar extends DatepickerCalendarMixin {
   @state()
   today = new Date();
@@ -44,6 +47,11 @@ export default class BlCalendar extends DatepickerCalendarMixin {
     return [style];
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    setDirectionProperty(this);
+  }
+
   get months() {
     return [...Array(12).keys()].map(month => ({
       name: new Date(0, month + 1, 0).toLocaleString(this.locale, { month: "long" }),