RTL support (#1169)

* RTL support

* left- right- to start- end- space divide rtl:reverse

* examples wrapper with rtl button

* examples wrapper rtl enhancment

* translate-x- in indicators

* add ExampleRTL.svelte

* ml/mr to ms/me in docs

* left- right- to start- end- space divide rtl:reverse in docs

* left/right must be used explicitly on devices mockups

* border-l/-r rounded-l-/-r- origin-left/right

* fix for toggle

* fix: chevrons for breadcrumbs

* fix: better chevrons for breadcrumbs

src/lib/accordion/AccordionItem.svelte

@@ -16,8 +16,8 @@
   export let paddingDefault: string = 'p-5';
   export let textFlushOpen: string = 'text-gray-900 dark:text-white';
   export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
-  export let borderClass: string = 'border-l border-r group-first:border-t';
-  export let borderOpenClass: string = 'border-l border-r';
+  export let borderClass: string = 'border-s border-e group-first:border-t';
+  export let borderOpenClass: string = 'border-s border-e';
   export let borderBottomClass: string = 'border-b';
   export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
 
@@ -111,8 +111,8 @@
 @prop export let paddingDefault: string = 'p-5';
 @prop export let textFlushOpen: string = 'text-gray-900 dark:text-white';
 @prop export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
-@prop export let borderClass: string = 'border-l border-r group-first:border-t';
-@prop export let borderOpenClass: string = 'border-l border-r';
+@prop export let borderClass: string = 'border-s border-e group-first:border-t';
+@prop export let borderOpenClass: string = 'border-s border-e';
 @prop export let borderBottomClass: string = 'border-b';
 @prop export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
 @prop export let classActive: string | undefined = undefined;

src/lib/alert/Alert.svelte

@@ -28,7 +28,7 @@
 
   {#if dismissable}
     <slot name="close-button" {close}>
-      <CloseButton class="ml-auto -mr-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+      <CloseButton class="ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
     </slot>
   {/if}
 </TransitionFrame>

src/lib/avatar/Avatar.svelte

@@ -23,7 +23,7 @@
   };
 
   let avatarClass: string;
-  $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
+  $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ms-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
 </script>
 
 {#if !src || !!href || $$slots.default || dot}

src/lib/badge/Badge.svelte

@@ -77,7 +77,7 @@
   <slot />
   {#if dismissable}
     <slot name="close-button" {close}>
-      <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ml-1.5 -mr-1.5" />
+      <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ms-1.5 -me-1.5" />
     </slot>
   {/if}
 </TransitionFrame>

src/lib/banner/Banner.svelte

@@ -14,17 +14,17 @@
   $: dispatch(open ? 'open' : 'close');
 
   const divClasses = {
-    default: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
-    bottom: 'bottom-0 left-0 w-full border-t border-gray-200 bg-gray-50',
-    cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl left-1/2 top-6',
-    signup: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
-    info: 'top-0 left-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50'
+    default: 'top-0 start-0 w-full border-b border-gray-200 bg-gray-50',
+    bottom: 'bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50',
+    cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl start-1/2 top-6',
+    signup: 'top-0 start-0 w-full border-b border-gray-200 bg-gray-50',
+    info: 'top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50'
   };
 
   const insideDivClasses = {
     default: 'items-center mx-auto',
     bottom: 'items-center mx-auto',
-    cta: 'flex-col items-start mb-3 mr-4 md:items-center md:flex-row md:mb-0',
+    cta: 'flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0',
     signup: 'items-center flex-shrink-0 w-full mx-auto sm:w-auto',
     info: 'items-center flex-shrink-0'
   };

src/lib/bottom-navigation/BottomNav.svelte

@@ -30,14 +30,14 @@
   setContext('activeUrl', activeUrlStore);
 
   const outerDivClasses = {
-    default: 'bottom-0 left-0 h-16 bg-white border-t',
-    border: 'bottom-0 left-0 h-16 bg-white border-t',
-    application: 'h-16 max-w-lg -translate-x-1/2 bg-white border rounded-full bottom-4 left-1/2',
-    pagination: 'bottom-0 h-16 -translate-x-1/2 bg-white border-t left-1/2',
-    group: 'bottom-0 -translate-x-1/2 bg-white border-t left-1/2',
-    card: 'bottom-0 left-0 h-16 bg-white border-t',
-    meeting: 'bottom-0 left-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
-    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3'
+    default: 'bottom-0 start-0 h-16 bg-white border-t',
+    border: 'bottom-0 start-0 h-16 bg-white border-t',
+    application: 'h-16 max-w-lg -translate-x-1/2 rtl:translate-x-1/2 bg-white border rounded-full bottom-4 start-1/2',
+    pagination: 'bottom-0 h-16 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2',
+    group: 'bottom-0 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2',
+    card: 'bottom-0 start-0 h-16 bg-white border-t',
+    meeting: 'bottom-0 start-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
+    video: 'bottom-0 start-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3'
   };
 
   const innerDivClasses = {

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -44,9 +44,9 @@
   };
 
   const appBtnClasses = {
-    left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    left: 'inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
     middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
+    right: 'inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
   };
   let btnClass: string;
 

src/lib/breadcrumb/Breadcrumb.svelte

@@ -4,8 +4,8 @@
   export let solid: boolean = false;
   export let navClass: string = 'flex';
   export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
-  export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
-  export let ariaLabel: string = 'Breadcrumb'; 
+  export let olClass: string = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
+  export let ariaLabel: string = 'Breadcrumb';
   let classNav: string = solid ? solidClass : navClass;
 </script>
 
@@ -22,6 +22,6 @@
 @prop export let solid: boolean = false;
 @prop export let navClass: string = 'flex';
 @prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
-@prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+@prop export let olClass: string = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
 @prop export let ariaLabel: string = 'Breadcrumb';
 -->

src/lib/breadcrumb/BreadcrumbItem.svelte

@@ -2,8 +2,8 @@
   import { twMerge } from 'tailwind-merge';
   export let home: boolean = false;
   export let href: string | undefined = undefined;
-  export let linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-  export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+  export let linkClass: string = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
+  export let spanClass: string = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
   export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 </script>
 
@@ -13,7 +13,7 @@
       {#if $$slots.icon}
         <slot name="icon" />
       {:else}
-        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <svg class="w-4 h-4 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
         </svg>
       {/if}
@@ -23,7 +23,7 @@
     {#if $$slots.icon}
       <slot name="icon" />
     {:else}
-      <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class="w-6 h-6 text-gray-400 rtl:-scale-x-100" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
       </svg>
     {/if}
@@ -45,7 +45,7 @@
 ## Props
 @prop export let home: boolean = false;
 @prop export let href: string | undefined = undefined;
-@prop export let linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-@prop export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+@prop export let linkClass: string = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
+@prop export let spanClass: string = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
 @prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 -->

src/lib/buttons/Button.svelte

@@ -19,13 +19,11 @@
   export let checked: boolean | undefined = undefined;
 
   const colorClasses = {
-    alternative:
-      'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white',
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white',
     blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
     green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
-    light:
-      'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600',
+    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600',
     primary: 'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
     purple: 'text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700',
     red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700',
@@ -34,13 +32,11 @@
   };
 
   const colorCheckedClasses = {
-    alternative:
-      'text-primary-700 border dark:text-primary-500 bg-gray-100 dark:bg-gray-700 border-gray-300 shadow-gray-300 dark:shadow-gray-800 shadow-inner',
+    alternative: 'text-primary-700 border dark:text-primary-500 bg-gray-100 dark:bg-gray-700 border-gray-300 shadow-gray-300 dark:shadow-gray-800 shadow-inner',
     blue: 'text-blue-900 bg-blue-400 dark:bg-blue-500 shadow-blue-700 dark:shadow-blue-800 shadow-inner',
     dark: 'text-white bg-gray-500 dark:bg-gray-600 shadow-gray-800 dark:shadow-gray-900 shadow-inner',
     green: 'text-green-900 bg-green-400 dark:bg-green-500 shadow-green-700 dark:shadow-green-800 shadow-inner',
-    light:
-      'text-gray-900 bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:text-gray-900 dark:border-gray-700 shadow-gray-300 dark:shadow-gray-700 shadow-inner',
+    light: 'text-gray-900 bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:text-gray-900 dark:border-gray-700 shadow-gray-300 dark:shadow-gray-700 shadow-inner',
     primary: 'text-primary-900 bg-primary-400 dark:bg-primary-500 shadow-primary-700 dark:shadow-primary-800 shadow-inner',
     purple: 'text-purple-900 bg-purple-400 dark:bg-purple-500 shadow-purple-700 dark:shadow-purple-800 shadow-inner',
     red: 'text-red-900 bg-red-400 dark:bg-red-500 shadow-red-700 dark:shadow-red-800 shadow-inner',
@@ -75,21 +71,15 @@
   };
 
   const outlineClasses = {
-    alternative:
-      'text-gray-900 dark:text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white focus-within:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus-within:ring-gray-800',
+    alternative: 'text-gray-900 dark:text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white focus-within:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus-within:ring-gray-800',
     blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
     dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
-    green:
-      'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
-    light:
-      'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600',
-    primary:
-      'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
-    purple:
-      'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500',
+    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
+    light: 'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600',
+    primary: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
+    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500',
     red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600',
-    yellow:
-      'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400',
+    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400',
     none: ''
   };
 
@@ -115,22 +105,11 @@
     outline && !checked && outlineClasses[color],
     !outline && checked && colorCheckedClasses[color],
     !outline && !checked && colorClasses[color],
-    color === 'alternative' &&
-      (group && !checked
-        ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
-        : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'),
-    outline &&
-      color === 'dark' &&
-      (group
-        ? checked
-          ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600'
-          : 'dark:text-white border-gray-800 dark:border-white'
-        : 'dark:text-gray-400 dark:border-gray-700'),
+    color === 'alternative' && (group && !checked ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'),
+    outline && color === 'dark' && (group ? (checked ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600' : 'dark:text-white border-gray-800 dark:border-white') : 'dark:text-gray-400 dark:border-gray-700'),
     coloredFocusClasses[color],
-    hasBorder() && group && 'border-l-0 first:border-l',
-    group
-      ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg'
-      : (pill && 'rounded-full') || 'rounded-lg',
+    hasBorder() && group && 'border-s-0 first:border-s',
+    group ? (pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : (pill && 'rounded-full') || 'rounded-lg',
     shadow && 'shadow-lg',
     shadow && coloredShadowClasses[color],
     $$props.disabled && 'cursor-not-allowed opacity-50',
@@ -139,36 +118,11 @@
 </script>
 
 {#if href}
-  <a
-    {href}
-    {...$$restProps}
-    class={buttonClass}
-    role="button"
-    on:click
-    on:change
-    on:keydown
-    on:keyup
-    on:touchstart|passive
-    on:touchend
-    on:touchcancel
-    on:mouseenter
-    on:mouseleave>
+  <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </a>
 {:else if tag === 'button'}
-  <button
-    {type}
-    {...$$restProps}
-    class={buttonClass}
-    on:click
-    on:change
-    on:keydown
-    on:keyup
-    on:touchstart|passive
-    on:touchend
-    on:touchcancel
-    on:mouseenter
-    on:mouseleave>
+  <button {type} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </button>
 {:else}

src/lib/buttons/GradientButton.svelte

@@ -54,7 +54,7 @@
   );
 
   let divClass: string;
-  $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
+  $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
 </script>
 
 {#if $$props.outline}