feat(datepicker): merge next

CONTRIBUTING.md

@@ -37,6 +37,16 @@ The Baklava library has an automated release flow, and our release versions and
 
 In every push to a PR, we are running automated visual regression tests to be sure we are not breaking any components visual output accidentally. When you are done with your changes and created a PR, if you have some changes that effects visual output of any components, then our automated flow will notice this and block PR for a design review. Design reviews are done by designers involved in project. If the changes are intentional, they will be approved, and once the PR is merged, the new designs will serve as references for upcoming PRs. If there are no visual changes, this step will pass automatically, and there will be no need for a review from a designer.
 
+### Should be RTL-Aware
+
+Baklava components support Right-to-Left (RTL) text direction, which is crucial for languages written from right to left. When developing or modifying components, ensure proper RTL support by following these guidelines:
+
+1. Use the `--bl-text-x-direction` CSS custom property for transformations and directional styling.
+2. Utilize CSS logical properties (e.g., `inline-start`, `inline-end`, `margin-inline-start`) instead of directional properties.
+3. Use `inset` with logical values for positioning.
+
+For a comprehensive guide on RTL support and detailed examples, please refer to our [Right-to-Left (RTL) documentation](/docs/documentation-right-to-left-rtl--documentation).
+
 ### Enough approvals to merge
 
 Every PR should be reviewed and approved by at least one of the core contributors. Please add needed information to PR description to help making review process quicker and easier.

README.md

@@ -29,8 +29,8 @@ Web implementation of the design system is created as native web components so i
 Preferred way of using Baklava is using it via CDN. Just import library JS and CSS files to your main document like below:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/themes/default.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/baklava.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/themes/default.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/baklava.js"></script>
 ```
 
 This way library will be served from a very high performant CDN and all of the Baklava web components will be ready to use inside your web project.

docs/customizing-baklava-theme.stories.mdx

@@ -19,7 +19,7 @@ instead of `themes/default.css` file. Like:
 
 ```html
 <link rel="stylesheet" href="/styles/my-baklava-theme.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/baklava.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/baklava.js"></script>
 ```
 
 With this opportunity you can use all of the Baklava components with your own branding colors, own selection of Font or different sizing values.
@@ -29,9 +29,9 @@ With this opportunity you can use all of the Baklava components with your own br
 If you want to change a small set of the design tokens, you may consider to extend default theme.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/themes/default.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/themes/default.css" />
 <link rel="stylesheet" href="/styles/my-baklava-theme.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/baklava.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/baklava.js"></script>
 ```
 
 With this, you can -for example- only override color palette for your app and continue to use typography or spacing rules from the default theme.

docs/localization.stories.mdx

@@ -10,7 +10,7 @@ To initialize localization, insert the following script at the head of your HTML
 ```html
 <html lang="tr">
   <head>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/localization.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/localization.js"></script>
   </head>
 
   <body>

docs/rtl-support.stories.mdx

@@ -0,0 +1,86 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Right-to-Left (RTL)" />
+
+# Right-to-Left (RTL)
+
+Baklava components support Right-to-Left (RTL) text direction, which is essential for languages that are written from right to left, such as Arabic, Hebrew, and Persian. To enable RTL support in your application using Baklava components, you need to set the `dir` attribute on the `<html>` tag in your project.
+
+## Enabling Right-to-Left (RTL)
+
+To enable Right-to-Left (RTL), add the `dir="rtl"` attribute to your HTML tag. Here's how you can do it:
+
+1. In your HTML file, locate the opening `<html>` tag.
+2. Add the `dir="rtl"` attribute to the tag.
+
+```html
+    <!DOCTYPE html>
+    <html lang="ar" dir="rtl">
+        <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>RTL Example</title>
+        </head>
+
+        <body>
+        <!-- Your content here -->
+        </body>
+    </html>
+```
+
+
+## Guidelines for Contributors
+
+When developing or modifying Baklava components, it's crucial to ensure proper RTL support. This includes being aware of RTL text and its implications on layout and styling. For a comprehensive guide on building RTL-aware web applications and websites, refer to [this article](https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/). Here are some guidelines to follow:
+
+1. Use the `--bl-text-x-direction` CSS custom property:
+   This property helps determine whether the element is in RTL or LTR. You can use it in your CSS like this:
+
+
+   ```css
+   .my-component {
+        transform: scaleX(var(--bl-text-x-direction));
+        box-shadow: calc(8px * var(--bl-text-x-direction)) 0 16px 0 rgb(39 49 66 / 10%);
+   }
+   ```
+###
+
+2. Utilize CSS logical properties:
+   Instead of using directional properties like `left`, `right`, `margin-left`, etc., use their logical counterparts. This ensures that your components adapt correctly to both LTR and RTL layouts. Here are some examples:
+
+   - Use `inline-start` and `inline-end` instead of `left` and `right`
+   - Use `block-start` and `block-end` instead of `top` and `bottom`
+   - Use `margin-inline-start` and `margin-inline-end` instead of `margin-left` and `margin-right`
+   - Use `padding-inline-start` and `padding-inline-end` instead of `padding-left` and `padding-right`
+   - Use `border-inline-start` and `border-inline-end` instead of `border-left` and `border-right`
+
+   ###
+
+   ```css
+   .my-component {
+        margin-inline-start: 1rem;
+        padding-inline-end: 0.5rem;
+        border-inline-start: 1px solid #ccc;
+   }
+   ```
+
+   ###
+
+    For more information on CSS logical properties and values, please refer to the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
+
+###
+
+3. Use `inset` for positioning:
+   When using absolute or relative positioning, use the `inset` property with logical values:
+
+   ```css
+   .positioned-element {
+        position: absolute;
+        inset-inline-start: 0;
+        inset-block-start: 0;
+   }
+   ```
+
+By following these guidelines, you'll ensure that Baklava components work seamlessly in both LTR and RTL layouts, providing a consistent user experience across different language settings.
+
+

docs/using-baklava-in-next.stories.mdx

@@ -19,12 +19,12 @@ Include Baklava library from CDN to your project's `<head>` section (in `layout.
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/themes/default.css"
+  href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/themes/default.css"
 />
 
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/baklava.js"
+  src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/baklava.js"
 />
 ```
 

docs/using-baklava-in-react.stories.mdx

@@ -17,8 +17,8 @@ npm install @trendyol/baklava
 Include Baklava library from CDN to your project's `index.html` file's `<head>` section.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/themes/default.css"/>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/baklava.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/themes/default.css"/>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/baklava.js"></script>
 ```
 
 Then you can use Baklava React components in your project by importing them from `@trendyol/baklava/dist/baklava-react` in your code.

docs/using-baklava-in-vue.stories.mdx

@@ -17,8 +17,8 @@ To make the rule more generic, easiest way is ignoring the elements start with `
 To be able to use Baklava via CDN, you should add our default.css and baklava.js at head tag in your index.html file.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/themes/default.css"/>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/baklava.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/themes/default.css"/>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.2.0/dist/baklava.js"></script>
 ```
 
 ### Via NPM

examples/input-mask-react/package.json

@@ -14,7 +14,7 @@
     "@maskito/core": "^2.2.0",
     "@maskito/kit": "^2.2.0",
     "@maskito/react": "^2.2.0",
-    "@trendyol/baklava": "^3.1.0",
+    "@trendyol/baklava": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-imask": "^7.6.0",

examples/input-mask-vue/package.json

@@ -12,7 +12,7 @@
     "@maskito/core": "^2.3.1",
     "@maskito/kit": "^2.3.1",
     "@maskito/vue": "^2.3.1",
-    "@trendyol/baklava": "^3.1.0",
+    "@trendyol/baklava": "^3.2.0",
     "vue": "^3.4.21",
     "vue-imask": "^7.6.0",
     "vue-router": "^4.3.2"

examples/input-mask/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@maskito/core": "^2.3.1",
     "@maskito/kit": "^2.3.1",
-    "@trendyol/baklava": "^3.1.0",
+    "@trendyol/baklava": "^3.2.0",
     "imask": "^7.6.0"
   }
 }

examples/next-app-router-ssr/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@trendyol/baklava": "^3.0.0",
-    "next": "14.1.3",
+    "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18"
   },

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,5 +1,4 @@
-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 { event, EventDispatcher } from "../../utilities/event";
 import { styleToPixelConverter } from "../../utilities/style-to-px.converter";

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)
   );
@@ -148,7 +148,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 {
@@ -190,7 +190,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),
@@ -264,8 +264,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(:has([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));