feature(rtl-support): add rtl support for baklava components

src/components/alert/bl-alert.css

@@ -16,7 +16,7 @@
   box-shadow: inset 0 0 0 1px var(--main-color);
   border-radius: var(--bl-border-radius-l);
   padding: calc(var(--padding) / 2) var(--padding);
-  padding-right: calc(var(--padding) / 2);
+  padding-inline-end: calc(var(--padding) / 2);
 }
 
 .description {
@@ -33,14 +33,14 @@
 
 .content {
   display: flex;
-  margin-right: var(--bl-size-2xs);
+  margin-inline-end: var(--bl-size-2xs);
   flex: 20 1 70%;
   padding: calc(var(--padding) / 2) 0;
 }
 
 .icon {
   padding: calc(var(--padding) / 2) 0;
-  margin-right: var(--bl-size-2xs);
+  margin-inline-end: var(--bl-size-2xs);
   color: var(--main-color);
 }
 

src/components/checkbox-group/checkbox/bl-checkbox.css

@@ -64,7 +64,7 @@ input[type="checkbox"] {
 
 .required-suffix {
   color: var(--bl-color-danger);
-  margin-left: calc(var(--bl-size-2xs) * -1);
+  margin-inline-start: calc(var(--bl-size-2xs) * -1);
 }
 
 .dirty.invalid .check-mark {

src/components/dialog/bl-dialog.css

@@ -36,7 +36,7 @@
 .dialog-polyfill {
   display: none;
   position: fixed;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
@@ -59,7 +59,7 @@ header {
 }
 
 header bl-button {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 header h2 {

src/components/drawer/bl-drawer.css

@@ -3,23 +3,19 @@
   position: fixed;
   display: flex;
   top: 0;
-  right: -100%;
   bottom: 0;
+  inset-inline-end: 0;
   width: var(--bl-drawer-current-width, 424px);
   padding: var(--bl-size-xl);
   padding-top: max(env(safe-area-inset-top), var(--bl-size-xl));
-  padding-right: max(env(safe-area-inset-right), var(--bl-size-xl));
+  padding-inline-end: max(env(safe-area-inset-right), var(--bl-size-xl));
   padding-bottom: max(env(safe-area-inset-bottom), var(--bl-size-xl));
   background: var(--bl-color-neutral-full);
   box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);
   transition: right var(--bl-drawer-animation-duration, 0.25s);
   z-index: var(--bl-index-sticky);
 }
 
-:host([open]) .drawer {
-  right: 0;
-}
-
 iframe {
   height: 100%;
   width: 100%;
@@ -45,7 +41,7 @@ header {
 header .header-buttons {
   display: flex;
   gap: var(--bl-size-xl);
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 header h2 {

src/components/drawer/bl-drawer.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { PropertyValues } from "lit";
+import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
+import { setDirectionProperty } from "../../utilities/direction";
 import { event, EventDispatcher } from "../../utilities/event";
 import { styleToPixelConverter } from "../../utilities/style-to-px.converter";
 import "../button/bl-button";
@@ -71,6 +71,8 @@ export default class BlDrawer extends LitElement {
 
     window?.addEventListener("resize", () => this.resizeDrawerWidth());
     window?.addEventListener("load", () => this.resizeDrawerWidth());
+
+    setDirectionProperty(this);
   }
 
   disconnectedCallback(): void {

src/components/input/bl-input.css

@@ -104,14 +104,14 @@ label {
   transition: all ease-in 0.1s;
   font: var(--input-font);
   top: var(--padding-vertical);
-  left: var(--bl-input-padding-start, var(--padding-horizontal));
-  right: var(--bl-input-padding-end, var(--padding-horizontal));
+  inset-inline-start: var(--bl-input-padding-start, var(--padding-horizontal));
+  inset-inline-end: var(--bl-input-padding-end, var(--padding-horizontal));
   pointer-events: none;
   color: var(--bl-color-neutral-light);
 }
 
 .has-icon label {
-  right: calc(
+  inset-inline-end: calc(
     var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) +
       var(--padding-vertical)
   );
@@ -147,7 +147,7 @@ input::-webkit-credentials-auto-fill-button {
 }
 
 :where(.wrapper:focus-within, .wrapper.has-value) input {
-  padding-left: var(--label-padding);
+  padding-inline-start: var(--label-padding);
 }
 
 input:disabled {
@@ -189,7 +189,7 @@ input:-webkit-autofill {
   flex-basis: var(--icon-size);
   align-self: center;
   height: var(--icon-size);
-  margin-right: var(--label-padding);
+  margin-inline-end: var(--label-padding);
 }
 
 bl-icon:not(.reveal-icon),
@@ -263,8 +263,12 @@ bl-icon[name="eye_on"] {
 :host(:not([label-fixed])) :focus-within label,
 :host(:not([label-fixed])) .has-value label {
   top: 0;
-  left: calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));
-  right: calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));
+  inset-inline-start: calc(
+    var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding)
+  );
+  inset-inline-end: calc(
+    var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding)
+  );
   transform: translateY(-50%);
   font: var(--bl-font-caption);
   color: var(--bl-color-neutral-dark);

src/components/notification/bl-notification.css

@@ -11,7 +11,7 @@
   flex-direction: column-reverse;
   position: fixed;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   max-width: var(--bl-notification-width);
   margin: var(--margin);
   width: calc(100% - var(--margin) * 2);
@@ -32,6 +32,10 @@
   touch-action: none;
 }
 
+:host([dir="rtl"]) .notification {
+  animation: slide-in-left var(--bl-notification-animation-duration) ease;
+}
+
 .notification[data-slide="top"] {
   animation: slide-in-top var(--bl-notification-animation-duration) ease;
 }
@@ -75,6 +79,15 @@
   }
 }
 
+@keyframes slide-in-left {
+  from {
+    transform: translateX(var(--travel-distance, -10px));
+    height: 0;
+    opacity: 0;
+    margin: 0;
+  }
+}
+
 @keyframes slide-out-right {
   to {
     transform: translateX(var(--travel-distance, 10px));

src/components/notification/bl-notification.ts

@@ -2,6 +2,7 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
+import { setDirectionProperty } from "../../utilities/direction";
 import BlAlert from "../alert/bl-alert";
 import { BaklavaIcon } from "../icon/icon-list";
 import style from "./bl-notification.css";
@@ -58,6 +59,12 @@ export default class BlNotification extends LitElement {
   @state()
   private notifications: Notification[] = [];
 
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    setDirectionProperty(this);
+  }
+
   public get notificationList() {
     return this.notifications;
   }

src/components/notification/card/bl-notification-card.css

@@ -10,11 +10,12 @@
 
 .duration {
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   height: var(--bl-size-2xs);
   width: 100%;
+  transform: scaleX(var(--bl-text-x-direction));
 }
 
 .duration > .remaining {

src/components/pagination/bl-pagination.css

@@ -17,6 +17,10 @@
   align-items: center;
 }
 
+:host([dir="rtl"]) .page-container :is(bl-button.next, bl-button.previous) {
+  transform: rotate(180deg);
+}
+
 .page-list {
   display: flex;
   align-items: center;

src/components/pagination/bl-pagination.ts

@@ -1,7 +1,8 @@
-import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from "lit";
+import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { localized, msg } from "@lit/localize";
+import { setDirectionProperty } from "../../utilities/direction";
 import { event, EventDispatcher } from "../../utilities/event";
 import "../button/bl-button";
 import "../input/bl-input";
@@ -103,6 +104,8 @@ export default class BlPagination extends LitElement {
     setTimeout(() => {
       window?.addEventListener("resize", () => this._paginate());
     });
+
+    setDirectionProperty(this);
   }
 
   disconnectedCallback() {

src/components/popover/bl-popover.css

@@ -45,7 +45,7 @@
   transform: rotate(var(--arrow-rotation));
   border: var(--border-size) solid var(--border-color);
   border-bottom: none;
-  border-right: none;
+  border-inline-end: none;
 }
 
 .popover[data-placement*="bottom"] .arrow {
@@ -61,11 +61,11 @@
 .popover[data-placement*="left"] .arrow {
   --arrow-rotation: 135deg;
 
-  right: var(--arrow-position);
+  inset-inline-end: var(--arrow-position);
 }
 
 .popover[data-placement*="right"] .arrow {
   --arrow-rotation: 315deg;
 
-  left: var(--arrow-position);
+  inset-inline-start: var(--arrow-position);
 }

src/components/popover/bl-popover.ts

@@ -2,16 +2,16 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import {
+  arrow,
+  autoUpdate,
   computePosition,
   flip,
-  shift,
-  offset,
-  arrow,
   inline,
-  autoUpdate,
-  size,
   Middleware,
   MiddlewareState,
+  offset,
+  shift,
+  size,
 } from "@floating-ui/dom";
 import { getTarget } from "../../utilities/elements";
 import { event, EventDispatcher } from "../../utilities/event";
@@ -148,7 +148,7 @@ export default class BlPopover extends LitElement {
           middleware: this.getMiddleware(),
         }).then(({ x, y, placement, middlewareData }) => {
           Object.assign(this._popover.style, {
-            left: `${x}px`,
+            '"inset-inline-start"': `${x}px`,
             top: `${y}px`,
           });
 
@@ -158,7 +158,7 @@ export default class BlPopover extends LitElement {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
 
             Object.assign(this.arrow.style, {
-              left: arrowX != null ? `${arrowX}px` : "",
+              '"inset-inline-start"': arrowX != null ? `${arrowX}px` : "",
               top: arrowY != null ? `${arrowY}px` : "",
             });
           }

src/components/progress-indicator/bl-progress-indicator.css

@@ -10,6 +10,7 @@
   height: var(--height);
   border-radius: var(--radius);
   width: 100%;
+  transform: scaleX(var(--bl-text-x-direction));
 }
 
 .progress-indicator::before {

src/components/select/bl-select.css

@@ -81,7 +81,7 @@
 .label,
 .placeholder {
   color: var(--placeholder-color);
-  padding-left: var(--label-padding);
+  padding-inline-start: var(--label-padding);
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
@@ -153,7 +153,7 @@
 
 .select-input .selected-options {
   padding: 0;
-  padding-left: var(--label-padding);
+  padding-inline-start: var(--label-padding);
   margin: 0;
   list-style: none;
   flex: 1;
@@ -193,7 +193,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--bl-size-4xs);
-  margin-left: var(--bl-size-2xs);
+  margin-inline-start: var(--bl-size-2xs);
 }
 
 .popover {
@@ -253,7 +253,7 @@ label {
   display: block;
   top: var(--padding-vertical);
   left: var(--padding-horizontal);
-  right: calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));
+  inset-inline-end: calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));
   transition: all ease-in 0.1s;
   pointer-events: none;
   opacity: 0;

src/components/spinner/bl-spinner.css

@@ -11,7 +11,7 @@
 :host([overlay]) {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   display: flex;