From bd858b2c2bc7b5b5dfa8ba931d51b7c591b8a065 Mon Sep 17 00:00:00 2001
From: Farzin Vatani <farzinvatani@outlook.com>
Date: Sun, 19 Feb 2023 10:43:59 +0330
Subject: [PATCH] Add rtl support to components

---
 packages/kit-docs/package.json                |  1 +
 .../src/lib/components/base/Button.svelte     |  6 +++---
 .../src/lib/components/base/Menu.svelte       |  4 ++--
 .../src/lib/components/base/MenuItem.svelte   |  2 +-
 .../src/lib/components/base/Overlay.svelte    |  2 +-
 .../src/lib/components/base/Popover.svelte    |  6 +++---
 .../src/lib/components/base/Select.svelte     |  4 ++--
 .../components/layout/KitDocsLayout.svelte    | 20 +++++++++----------
 .../src/lib/components/layout/Navbar.svelte   | 12 +++++------
 .../lib/components/layout/OnThisPage.svelte   |  9 +++++----
 .../src/lib/components/layout/Sidebar.svelte  | 12 +++++------
 .../lib/components/social/SocialLink.svelte   |  2 +-
 packages/kit-docs/src/lib/styles/theme.css    |  9 ++++++++-
 packages/kit-docs/tailwind.config.cjs         |  3 ++-
 pnpm-lock.yaml                                | 16 +++++++++++----
 15 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/packages/kit-docs/package.json b/packages/kit-docs/package.json
index 4209c95..6c802db 100644
--- a/packages/kit-docs/package.json
+++ b/packages/kit-docs/package.json
@@ -100,6 +100,7 @@
     "svelte-preprocess": "^4.10.7",
     "svelte2tsx": "^0.5.20",
     "tailwindcss": "^3.1.8",
+    "tailwindcss-rtl": "^0.9.0",
     "toml": "^3.0.0",
     "tslib": "^2.4.0",
     "typescript": "^4.8.4",
diff --git a/packages/kit-docs/src/lib/components/base/Button.svelte b/packages/kit-docs/src/lib/components/base/Button.svelte
index 9582a49..c824f5d 100644
--- a/packages/kit-docs/src/lib/components/base/Button.svelte
+++ b/packages/kit-docs/src/lib/components/base/Button.svelte
@@ -28,9 +28,9 @@
   );
 
   $: contentClass = clsx(
-    'inline-block transform transition-transform duration-100 group-hover:translate-x-0',
-    arrow === 'left' && '-translate-x-3 ',
-    arrow === 'right' && 'translate-x-2',
+    'inline-block transform transition-transform duration-100 rtl:group-hover:-translate-x-0 ltr:group-hover:translate-x-0',
+    arrow === 'left' && 'rtl:translate-x-2 ltr:-translate-x-2 ',
+    arrow === 'right' && 'rtl:-translate-x-2 ltr:translate-x-2',
   );
 
   $: arrowClass = clsx(
diff --git a/packages/kit-docs/src/lib/components/base/Menu.svelte b/packages/kit-docs/src/lib/components/base/Menu.svelte
index 72bbc9e..04cef76 100644
--- a/packages/kit-docs/src/lib/components/base/Menu.svelte
+++ b/packages/kit-docs/src/lib/components/base/Menu.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="not-prose relative inline-block text-left">
+<div class="not-prose relative inline-block text-start">
   <button
     id={menuButtonId}
     type="button"
@@ -54,7 +54,7 @@
   >
     <ul
       id={menuId}
-      class="bg-elevate border-border absolute right-0 z-50 mt-2 w-40 origin-top-right rounded-md border-[1.5px]"
+      class="bg-elevate border-border absolute end-0 z-50 mt-2 w-40 origin-top-end rounded-md border-[1.5px]"
       role="menu"
       aria-orientation="vertical"
       aria-labelledby={menuButtonId}
diff --git a/packages/kit-docs/src/lib/components/base/MenuItem.svelte b/packages/kit-docs/src/lib/components/base/MenuItem.svelte
index 4dc46f7..f1dbe40 100644
--- a/packages/kit-docs/src/lib/components/base/MenuItem.svelte
+++ b/packages/kit-docs/src/lib/components/base/MenuItem.svelte
@@ -27,7 +27,7 @@
   on:pointerup={() => dispatch('select')}
 >
   {#if $$slots.icon}
-    <div class="mr-3 h-5 w-5">
+    <div class="me-3 h-5 w-5">
       <slot name="icon" />
     </div>
   {/if}
diff --git a/packages/kit-docs/src/lib/components/base/Overlay.svelte b/packages/kit-docs/src/lib/components/base/Overlay.svelte
index 5b42c54..a1f94ff 100644
--- a/packages/kit-docs/src/lib/components/base/Overlay.svelte
+++ b/packages/kit-docs/src/lib/components/base/Overlay.svelte
@@ -6,7 +6,7 @@
 
 <div
   class={clsx(
-    'pointer-events-auto fixed top-0 left-0 z-40 backdrop-blur-sm backdrop-filter transition-opacity duration-75',
+    'pointer-events-auto fixed top-0 start-0 z-40 backdrop-blur-sm backdrop-filter transition-opacity duration-75',
     'bg-body/20 dark:bg-body/60',
     'h-screen w-screen',
     open ? 'visible opacity-100' : 'invisible opacity-0',
diff --git a/packages/kit-docs/src/lib/components/base/Popover.svelte b/packages/kit-docs/src/lib/components/base/Popover.svelte
index 3656647..51e193d 100644
--- a/packages/kit-docs/src/lib/components/base/Popover.svelte
+++ b/packages/kit-docs/src/lib/components/base/Popover.svelte
@@ -44,7 +44,7 @@
   }
 </script>
 
-<div class="not-prose relative inline-block text-left">
+<div class="not-prose relative inline-block text-start">
   <button
     id={popoverButtonId}
     type="button"
@@ -82,7 +82,7 @@
     <div
       id={popoverId}
       class={clsx(
-        'absolute -top-4 -right-0 z-50 min-w-[340px] origin-top-right p-5 pt-4',
+        'absolute -top-4 -end-0 z-50 min-w-[340px] origin-top-end p-5 pt-4',
         !open && 'invisible',
       )}
       tabindex="-1"
@@ -95,7 +95,7 @@
           <div class="flex-1" />
           <button
             class={clsx(
-              'text-soft hover:text-inverse mt-[0.125rem] mr-[0.125rem] p-4',
+              'text-soft hover:text-inverse mt-[0.125rem] me-[0.125rem] p-4',
               !open && 'pointer-events-none',
             )}
             on:pointerup={() => closeDialog()}
diff --git a/packages/kit-docs/src/lib/components/base/Select.svelte b/packages/kit-docs/src/lib/components/base/Select.svelte
index 44858f6..fd4c21d 100644
--- a/packages/kit-docs/src/lib/components/base/Select.svelte
+++ b/packages/kit-docs/src/lib/components/base/Select.svelte
@@ -16,7 +16,7 @@
 <div class="inline-block">
   <label
     class={clsx(
-      'relative flex min-w-[85px] items-center border-[1.5px] pl-2.5 pr-1',
+      'relative flex min-w-[85px] items-center border-[1.5px] ps-2.5 pe-1',
       'bg-elevate transform-gpu transition-transform hover:scale-[1.025]',
       rounded && 'rounded-md',
       raised ? 'py-1' : 'py-0.5',
@@ -41,7 +41,7 @@
       <ArrowDropDownIcon
         width={arrowWidth}
         height={arrowHeight}
-        class="ml-[var(--kd-arrow-margin-left,0.1rem)]"
+        class="me-[var(--kd-arrow-margin-left,0.1rem)]"
       />
     </div>
 
diff --git a/packages/kit-docs/src/lib/components/layout/KitDocsLayout.svelte b/packages/kit-docs/src/lib/components/layout/KitDocsLayout.svelte
index a897759..84a5082 100644
--- a/packages/kit-docs/src/lib/components/layout/KitDocsLayout.svelte
+++ b/packages/kit-docs/src/lib/components/layout/KitDocsLayout.svelte
@@ -119,7 +119,7 @@
                 <button
                   id="main-sidebar-button"
                   type="button"
-                  class="text-soft hover:text-inverse inline-flex justify-center rounded-md p-2 text-sm font-medium"
+                  class="rtl:scale-x-[-1] text-soft hover:text-inverse inline-flex justify-center rounded-md p-2 text-sm font-medium"
                   aria-controls="main-sidebar"
                   aria-expanded={ariaBool(isSidebarOpen)}
                   aria-haspopup="true"
@@ -147,7 +147,7 @@
                 <ol
                   class={clsx(
                     'text-md text-soft flex items-center whitespace-nowrap leading-6',
-                    showSidebar ? 'mt-px ml-2.5' : 'mt-2',
+                    showSidebar ? 'mt-px ms-2.5' : 'mt-2',
                   )}
                 >
                   {#if $activeCategory && $activeCategory !== '.'}
@@ -194,11 +194,11 @@
         {search}
         class={({ open }) =>
           clsx(
-            'self-start fixed top-0 left-0 transform bg-body z-50 border-border border-r scrollbar',
-            '-translate-x-full transform transition-transform duration-200 ease-out will-change-transform',
+            'self-start fixed top-0 start-0 transform bg-body z-50 border-border border-e scrollbar',
+            'rtl:translate-x-full ltr:-translate-x-full transform transition-transform duration-200 ease-out will-change-transform',
             'max-h-screen min-h-screen min-w-[var(--kd-sidebar-min-width)] max-w-[var(--kd-sidebar-max-width)]',
-            '992:translate-x-0 922:block 992:sticky 992:z-0 overflow-y-auto p-[var(--kd-sidebar-padding)]',
-            open && 'translate-x-0',
+            'rtl:992:-translate-x-0 ltr:992:translate-x-0 922:block 992:sticky 992:z-0 overflow-y-auto p-[var(--kd-sidebar-padding)]',
+            open && 'rtl:-translate-x-0 ltr:translate-x-0',
             navbar
               ? '992:top-[var(--kd--navbar-height)] 992:min-h-[calc(100vh-var(--kd--navbar-height))] 992:max-h-[calc(100vh-var(--kd--navbar-height))]'
               : '992:top-0 min-h-screen max-h-screen',
@@ -256,7 +256,7 @@
         <div class="992:text-xl flex items-center pt-12 pb-20 text-lg font-semibold text-gray-300">
           {#if $previousLink}
             <div class="mb-4 flex flex-col items-start">
-              <span class="text-inverse ml-3 mb-4 inline-block">{$i18nContext.nav.previous}</span>
+              <span class="text-inverse ms-3 mb-4 inline-block">{$i18nContext.nav.previous}</span>
               <Button
                 arrow="left"
                 href={$previousLink.slug}
@@ -269,8 +269,8 @@
           {/if}
 
           {#if $nextLink}
-            <div class="ml-auto mb-4 flex flex-col items-end">
-              <span class="text-inverse mr-3 mb-4 inline-block">{$i18nContext.nav.next}</span>
+            <div class="ms-auto mb-4 flex flex-col items-end">
+              <span class="text-inverse me-3 mb-4 inline-block">{$i18nContext.nav.next}</span>
               <Button
                 arrow="right"
                 href={$nextLink.slug}
@@ -291,7 +291,7 @@
 
     <OnThisPage
       class={clsx(
-        'pt-8 pb-8 hidden overflow-auto min-w-[160px] sticky right-4 pr-4 1440:right-6 1440:pr-2 1280:block pl-0.5',
+        'pt-8 pb-8 hidden overflow-auto min-w-[160px] sticky end-4 pe-4 1440:end-6 1440:pe-2 1280:block ps-0.5',
         navbar
           ? 'top-[var(--kd--navbar-height)] max-h-[calc(100vh-var(--kd--navbar-height))]'
           : 'top-0 max-h-screen',
diff --git a/packages/kit-docs/src/lib/components/layout/Navbar.svelte b/packages/kit-docs/src/lib/components/layout/Navbar.svelte
index 72bf0d4..640a81c 100644
--- a/packages/kit-docs/src/lib/components/layout/Navbar.svelte
+++ b/packages/kit-docs/src/lib/components/layout/Navbar.svelte
@@ -39,7 +39,7 @@
 
     <div class="flex-1" />
 
-    <div class="992:hidden -mr-2 flex items-center">
+    <div class="992:hidden -me-2 flex items-center">
       {#if search}
         <slot name="search" />
       {/if}
@@ -72,15 +72,15 @@
           <div class="flex flex-col space-y-6">
             <slot name="popover-options" />
             <div class="flex items-center">
-              Theme
+              {$i18n.colorScheme.theme}
 
               <label
-                class="relative ml-4 flex items-center border border-border px-4 py-1 rounded-md focus-within:ring-2"
+                class="relative ms-4 flex items-center border border-border px-4 py-1 rounded-md focus-within:ring-2"
                 style="--tw-ring-color: var(--kd-color-focus);"
               >
                 <span class="sr-only">{$i18n.colorScheme.theme}</span>
-                {uppercaseFirstLetter($colorScheme)}
-                <ArrowDropDownIcon width="20" height="20" class="ml-1" />
+                <span>{$i18n.colorScheme[$colorScheme]}</span>
+                <ArrowDropDownIcon viewBox="0 0 24 20" width="20" height="20" class="ms-1" />
                 <select
                   class="absolute inset-0 appearance-none opacity-0"
                   bind:value={$colorScheme}
@@ -109,7 +109,7 @@
 
       <slot name="right" />
 
-      <div class="hidden 992:flex items-center ml-6">
+      <div class="hidden 992:flex items-center ms-6">
         <slot name="right-alt" />
         <ColorSchemeToggle />
       </div>
diff --git a/packages/kit-docs/src/lib/components/layout/OnThisPage.svelte b/packages/kit-docs/src/lib/components/layout/OnThisPage.svelte
index ccd27e7..b213db8 100644
--- a/packages/kit-docs/src/lib/components/layout/OnThisPage.svelte
+++ b/packages/kit-docs/src/lib/components/layout/OnThisPage.svelte
@@ -44,7 +44,7 @@
 
 <div class={clsx('on-this-page scrollbar', __class)} {style}>
   {#if headings.length > 1 || headings[0]?.children.length}
-    <h5 class="text-inverse w-full text-left text-lg font-semibold">{$i18n.toc.title}</h5>
+    <h5 class="text-inverse w-full text-start text-lg font-semibold">{$i18n.toc.title}</h5>
     <ul class="mt-4 space-y-4 px-2">
       {#each headings as heading (heading)}
         {@const i = calcIndex(heading)}
@@ -60,16 +60,17 @@
             {#each heading.children as childHeader, j (childHeader)}
               <li
                 class={clsx(
-                  'group group flex',
+                  'group group flex items-center',
                   i + j + 1 === $index ? 'text-brand' : 'text-soft hover:text-inverse',
                 )}
               >
                 <RightArrowIcon
+                  viewBox="0 0 24 20"
                   width="20"
                   height="20"
-                  class="group-hover:text-inverse mt-px mr-px text-soft"
+                  class="group-hover:text-inverse inline-block mt-px me-px text-soft rtl:scale-x-[-1]"
                 />
-                <a href={`#${childHeader.slug}`}>{childHeader.title}</a>
+                <a class="inline-block" href={`#${childHeader.slug}`}>{childHeader.title}</a>
               </li>
             {/each}
           </ul>
diff --git a/packages/kit-docs/src/lib/components/layout/Sidebar.svelte b/packages/kit-docs/src/lib/components/layout/Sidebar.svelte
index 2a33579..6869d2a 100644
--- a/packages/kit-docs/src/lib/components/layout/Sidebar.svelte
+++ b/packages/kit-docs/src/lib/components/layout/Sidebar.svelte
@@ -50,7 +50,7 @@
   bind:this={sidebar}
   {style}
 >
-  <div class="992:hidden sticky top-0 left-0 flex items-center">
+  <div class="992:hidden sticky top-0 start-0 flex items-center">
     <div class="flex-1" />
     <button
       class={clsx('text-soft hover:text-inverse p-4 -mx-6', !open && 'pointer-events-none')}
@@ -64,7 +64,7 @@
 
   <nav class="992:px-1 scrollbar">
     {#if search}
-      <div class="pointer-events-none sticky top-0 z-0 -ml-0.5 min-h-[80px]">
+      <div class="pointer-events-none sticky top-0 z-0 -ms-0.5 min-h-[80px]">
         <div class="992:h-6 bg-body" />
         <div class="bg-body pointer-events-auto relative">
           <div class="992:block hidden">
@@ -88,12 +88,12 @@
           {:else}
             <div class="mt-10" />
           {/if}
-          <ul class="border-border space-y-3 border-l">
+          <ul class="border-border space-y-3 border-s">
             {#each links as link (link.title + link.slug)}
               <li class="first:mt-6">
                 <a
                   class={clsx(
-                    '992:py-1 -ml-px flex items-center border-l py-2 pl-4',
+                    '992:py-1 -ms-px flex items-center border-s py-2 ps-4',
                     isActiveSidebarLink(link, $page.url.pathname)
                       ? 'text-brand font-semibold'
                       : 'hover:border-inverse focus-visible:border-inverse text-soft hover:text-inverse focus-visible:text-inverse border-transparent font-normal',
@@ -105,11 +105,11 @@
                     : ''}
                 >
                   {#if link.icon?.before}
-                    <svelte:component this={link.icon.before} class="mr-1" width="24" height="24" />
+                    <svelte:component this={link.icon.before} class="me-1" width="24" height="24" />
                   {/if}
                   {link.title}
                   {#if link.icon?.after}
-                    <svelte:component this={link.icon.after} class="ml-1" width="24" height="24" />
+                    <svelte:component this={link.icon.after} class="ms-1" width="24" height="24" />
                   {/if}
                 </a>
               </li>
diff --git a/packages/kit-docs/src/lib/components/social/SocialLink.svelte b/packages/kit-docs/src/lib/components/social/SocialLink.svelte
index b3a2490..7036647 100644
--- a/packages/kit-docs/src/lib/components/social/SocialLink.svelte
+++ b/packages/kit-docs/src/lib/components/social/SocialLink.svelte
@@ -34,7 +34,7 @@
 >
   <svelte:component
     this={icons[type]}
-    class={clsx($$slots.default && 'mr-2.5')}
+    class={clsx($$slots.default && 'me-2.5')}
     width={iconWidth}
     height={iconHeight}
   />
diff --git a/packages/kit-docs/src/lib/styles/theme.css b/packages/kit-docs/src/lib/styles/theme.css
index a50af74..b656dd2 100644
--- a/packages/kit-docs/src/lib/styles/theme.css
+++ b/packages/kit-docs/src/lib/styles/theme.css
@@ -157,7 +157,6 @@ body {
 }
 
 .kit-docs .header-anchor {
-  margin-left: -1.25em;
   padding: 0 0.23em;
   font-size: 0.9em;
   opacity: 0;
@@ -165,6 +164,14 @@ body {
   background-color: none;
 }
 
+[dir=ltr] .kit-docs .header-anchor {
+  margin-left: -1.25em;
+}
+
+[dir=rtl] .kit-docs .header-anchor {
+  margin-right: -1.25em;
+}
+
 .kit-docs h1:focus,
 .kit-docs h2:focus,
 .kit-docs h3:focus,
diff --git a/packages/kit-docs/tailwind.config.cjs b/packages/kit-docs/tailwind.config.cjs
index b9c9f37..6c4f9a6 100644
--- a/packages/kit-docs/tailwind.config.cjs
+++ b/packages/kit-docs/tailwind.config.cjs
@@ -40,7 +40,8 @@ module.exports = {
       typography: kitDocsTypography,
     },
   },
-  plugins: [require('@tailwindcss/typography'), kitDocsVariants],
+  plugins: [require('@tailwindcss/typography'), kitDocsVariants, require('tailwindcss-rtl'),
+  ],
 };
 
 function kitDocsVariants({ addVariant }) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73eb5e8..8612f19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,6 +148,7 @@ importers:
       svelte-preprocess: ^4.10.7
       svelte2tsx: ^0.5.20
       tailwindcss: ^3.1.8
+      tailwindcss-rtl: ^0.9.0
       toml: ^3.0.0
       tslib: ^2.4.0
       typescript: ^4.8.4
@@ -194,7 +195,8 @@ importers:
       svelte: 3.55.0
       svelte-preprocess: 4.10.7_uldce6htlskfyklq5y55tk7pdy
       svelte2tsx: 0.5.23_niwyv7xychq2ag6arq5eqxbomm
-      tailwindcss: 3.2.4
+      tailwindcss: 3.2.4_postcss@8.4.20
+      tailwindcss-rtl: 0.9.0
       toml: 3.0.0
       tslib: 2.4.1
       typescript: 4.9.4
@@ -941,7 +943,7 @@ packages:
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.2.4
+      tailwindcss: 3.2.4_postcss@8.4.20
     dev: true
 
   /@types/argparse/1.0.38:
@@ -1721,8 +1723,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      is-text-path: 1.0.1
       JSONStream: 1.3.5
+      is-text-path: 1.0.1
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -4794,10 +4796,16 @@ packages:
       tslib: 2.4.1
     dev: true
 
-  /tailwindcss/3.2.4:
+  /tailwindcss-rtl/0.9.0:
+    resolution: {integrity: sha512-y7yC8QXjluDBEFMSX33tV6xMYrf0B3sa+tOB5JSQb6/G6laBU313a+Z+qxu55M1Qyn8tDMttjomsA8IsJD+k+w==}
+    dev: true
+
+  /tailwindcss/3.2.4_postcss@8.4.20:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3