flowbite-svelte 0.44.20 → 0.44.21

package/dist/rating/Review.svelte.d.ts

@@ -29,7 +29,7 @@ export type ReviewSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let review: ReviewType;
  * @prop export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
- * @prop export let divClass: string = 'flex items-center mb-6 space-x-4';
+ * @prop export let divClass: string = 'flex items-center mb-6 space-x-4 rtl:space-x-reverse';
  * @prop export let imgClass: string = 'w-10 h-10 rounded-full';
  * @prop export let ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
  * @prop export let liClass: string = 'flex items-center';

package/dist/rating/ScoreRating.svelte

@@ -2,10 +2,10 @@
 export let ratings2 = [];
 export let headerLabel;
 export let desc1Class = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
-export let desc2Class = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
+export let desc2Class = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
 export let desc3spanClass = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
 export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
-export let linkClass = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+export let linkClass = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
 export let barColor = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
 </script>
 
@@ -30,7 +30,7 @@ export let barColor = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
       <dl>
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
-          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
+          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
             <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
@@ -43,7 +43,7 @@ export let barColor = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
       <dl>
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
-          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
+          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
             <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
@@ -62,9 +62,9 @@ export let barColor = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
 @prop export let headerLabel: {
     desc1: string;
 @prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
-@prop export let desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
+@prop export let desc2Class: string = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
 @prop export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
 @prop export let desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
-@prop export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+@prop export let linkClass: string = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
 @prop export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
 -->

package/dist/rating/ScoreRating.svelte.d.ts

@@ -41,10 +41,10 @@ export type ScoreRatingSlots = typeof __propDef.slots;
  * @prop export let headerLabel: {
  * desc1: string;
  * @prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
- * @prop export let desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
+ * @prop export let desc2Class: string = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
  * @prop export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
  * @prop export let desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
- * @prop export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+ * @prop export let linkClass: string = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
  * @prop export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
  */
 export default class ScoreRating extends SvelteComponent<ScoreRatingProps, ScoreRatingEvents, ScoreRatingSlots> {

package/dist/sidebar/SidebarBrand.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let site;
-export let aClass = 'flex items-center pl-2.5 mb-5';
-export let imgClass = 'h-6 mr-3 sm:h-7';
+export let aClass = 'flex items-center ps-2.5 mb-5';
+export let imgClass = 'h-6 me-3 sm:h-7';
 export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
 </script>
 
@@ -15,7 +15,7 @@ export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let site: SiteType;
-@prop export let aClass: string = 'flex items-center pl-2.5 mb-5';
-@prop export let imgClass: string = 'h-6 mr-3 sm:h-7';
+@prop export let aClass: string = 'flex items-center ps-2.5 mb-5';
+@prop export let imgClass: string = 'h-6 me-3 sm:h-7';
 @prop export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
 -->

package/dist/sidebar/SidebarBrand.svelte.d.ts

@@ -20,8 +20,8 @@ export type SidebarBrandSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let site: SiteType;
- * @prop export let aClass: string = 'flex items-center pl-2.5 mb-5';
- * @prop export let imgClass: string = 'h-6 mr-3 sm:h-7';
+ * @prop export let aClass: string = 'flex items-center ps-2.5 mb-5';
+ * @prop export let imgClass: string = 'h-6 me-3 sm:h-7';
  * @prop export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
  */
 export default class SidebarBrand extends SvelteComponent<SidebarBrandProps, SidebarBrandEvents, SidebarBrandSlots> {

package/dist/sidebar/SidebarCta.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let divWrapperClass = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
 export let divClass = 'flex items-center mb-3';
-export let spanClass = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+export let spanClass = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
 export let label = '';
 </script>
 
@@ -21,6 +21,6 @@ export let label = '';
 ## Props
 @prop export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
 @prop export let divClass: string = 'flex items-center mb-3';
-@prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+@prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
 @prop export let label: string = '';
 -->

package/dist/sidebar/SidebarCta.svelte.d.ts

@@ -23,7 +23,7 @@ export type SidebarCtaSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
  * @prop export let divClass: string = 'flex items-center mb-3';
- * @prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+ * @prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
  * @prop export let label: string = '';
  */
 export default class SidebarCta extends SvelteComponent<SidebarCtaProps, SidebarCtaEvents, SidebarCtaSlots> {

package/dist/sidebar/SidebarDropdownItem.svelte

@@ -1,8 +1,8 @@
 <script>import { twMerge } from 'tailwind-merge';
-export let aClass = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+export let aClass = 'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 export let href = '';
 export let label = '';
-export let activeClass = 'flex items-center p-2 pl-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+export let activeClass = 'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
 export let active = false;
 </script>
 
@@ -16,9 +16,9 @@ export let active = false;
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+@prop export let aClass: string = 'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 @prop export let href: string = '';
 @prop export let label: string = '';
-@prop export let activeClass: string = 'flex items-center p-2 pl-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+@prop export let activeClass: string = 'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
 @prop export let active: boolean = false;
 -->

package/dist/sidebar/SidebarDropdownItem.svelte.d.ts

@@ -29,10 +29,10 @@ export type SidebarDropdownItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+ * @prop export let aClass: string = 'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
  * @prop export let href: string = '';
  * @prop export let label: string = '';
- * @prop export let activeClass: string = 'flex items-center p-2 pl-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+ * @prop export let activeClass: string = 'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
  * @prop export let active: boolean = false;
  */
 export default class SidebarDropdownItem extends SvelteComponent<SidebarDropdownItemProps, SidebarDropdownItemEvents, SidebarDropdownItemSlots> {

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -2,7 +2,7 @@
 import { fade, blur, fly, slide } from 'svelte/transition';
 export let btnClass = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 export let label = '';
-export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
+export let spanClass = 'flex-1 ms-3 text-left whitespace-nowrap';
 export let ulClass = 'py-2 space-y-2';
 export let transitionType = 'slide';
 export let transitionParams = {};
@@ -58,7 +58,7 @@ const handleDropdown = () => {
 ## Props
 @prop export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 @prop export let label: string = '';
-@prop export let spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+@prop export let spanClass: string = 'flex-1 ms-3 text-left whitespace-nowrap';
 @prop export let ulClass: string = 'py-2 space-y-2';
 @prop export let transitionType: TransitionTypes = 'slide';
 @prop export let transitionParams: TransitionParamTypes = {};

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

@@ -29,7 +29,7 @@ export type SidebarDropdownWrapperSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
  * @prop export let label: string = '';
- * @prop export let spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+ * @prop export let spanClass: string = 'flex-1 ms-3 text-left whitespace-nowrap';
  * @prop export let ulClass: string = 'py-2 space-y-2';
  * @prop export let transitionType: TransitionTypes = 'slide';
  * @prop export let transitionParams: TransitionParamTypes = {};

package/dist/sidebar/SidebarItem.svelte

@@ -2,7 +2,7 @@
 import { twMerge } from 'tailwind-merge';
 export let href = '';
 export let label = '';
-export let spanClass = 'ml-3';
+export let spanClass = 'ms-3';
 export let activeClass = undefined;
 export let nonActiveClass = undefined;
 // export let active: boolean = false;
@@ -36,7 +36,7 @@ $: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass
 ## Props
 @prop export let href: string = '';
 @prop export let label: string = '';
-@prop export let spanClass: string = 'ml-3';
+@prop export let spanClass: string = 'ms-3';
 @prop export let activeClass: string | undefined = undefined;
 @prop export let nonActiveClass: string | undefined = undefined;
 @prop export let active: boolean = false;

package/dist/sidebar/SidebarItem.svelte.d.ts

@@ -34,7 +34,7 @@ export type SidebarItemSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let href: string = '';
  * @prop export let label: string = '';
- * @prop export let spanClass: string = 'ml-3';
+ * @prop export let spanClass: string = 'ms-3';
  * @prop export let activeClass: string | undefined = undefined;
  * @prop export let nonActiveClass: string | undefined = undefined;
  * @prop export let active: boolean = false;

package/dist/skeleton/CardPlaceholder.svelte

@@ -21,7 +21,7 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
   <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
   <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
   <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-  <div class="flex items-center mt-4 space-x-3">
+  <div class="flex items-center mt-4 space-x-3 rtl:space-x-reverse">
     <svg class="w-14 h-14 text-gray-200 dark:text-gray-700" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
     </svg>

package/dist/skeleton/ImagePlaceholder.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from 'tailwind-merge';
-export let divClass = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center';
+export let divClass = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center';
 export let imgHeight = '48';
 </script>
 
@@ -25,6 +25,6 @@ export let imgHeight = '48';
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center';
+@prop export let divClass: string = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center';
 @prop export let imgHeight: string = '48';
 -->

package/dist/skeleton/ImagePlaceholder.svelte.d.ts

@@ -16,7 +16,7 @@ export type ImagePlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center';
+ * @prop export let divClass: string = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center';
  * @prop export let imgHeight: string = '48';
  */
 export default class ImagePlaceholder extends SvelteComponent<ImagePlaceholderProps, ImagePlaceholderEvents, ImagePlaceholderSlots> {

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -6,10 +6,10 @@ export let divClass = 'animate-pulse';
   <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto" />
   <div class="h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]" />
   <div class="flex justify-center items-center mt-4">
-    <svg class="mr-2 w-10 h-10 text-gray-200 dark:text-gray-700" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <svg class="me-2 w-10 h-10 text-gray-200 dark:text-gray-700" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
     </svg>
-    <div class="w-20 h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 mr-3" />
+    <div class="w-20 h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 me-3" />
     <div class="w-24 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
   </div>
   <span class="sr-only">Loading...</span>

package/dist/skeleton/TextPlaceholder.svelte

@@ -12,32 +12,32 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>
-  <div class="flex items-center space-x-2 w-full">
+  <div class="flex items-center space-x-2 rtl:space-x-reverse w-full">
     <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
   </div>
-  <div class="flex items-center space-x-2 w-11/12">
+  <div class="flex items-center space-x-2 rtl:space-x-reverse w-11/12">
     <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
   </div>
-  <div class="flex items-center space-x-2 w-9/12">
+  <div class="flex items-center space-x-2 rtl:space-x-reverse w-9/12">
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
     <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
   </div>
-  <div class="flex items-center space-x-2 w-11/12">
+  <div class="flex items-center space-x-2 rtl:space-x-reverse w-11/12">
     <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
   </div>
-  <div class="flex items-center space-x-2 w-10/12">
+  <div class="flex items-center space-x-2 rtl:space-x-reverse w-10/12">
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-32" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
     <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
   </div>
-  <div class="flex items-center space-x-2 w-8/12">
+  <div class="flex items-center space-x-2 rtl:space-x-reverse w-8/12">
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
     <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80" />
     <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -5,7 +5,7 @@ export let divClass = 'p-4 max-w-sm rounded border border-gray-200 shadow animat
 <div role="status" class={twMerge(divClass, $$props.class)}>
   <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2.5" />
   <div class="mb-10 w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-  <div class="flex items-baseline mt-4 space-x-6">
+  <div class="flex items-baseline mt-4 space-x-6 rtl:space-x-reverse">
     <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
     <div class="w-full h-56 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
     <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700" />

package/dist/speed-dial/SpeedDial.svelte

@@ -7,7 +7,7 @@ import Popper from '../utils/Popper.svelte';
 import { setContext } from 'svelte';
 import generateId from '../utils/generateId';
 import GradientButton from '../buttons/GradientButton.svelte';
-export let defaultClass = 'fixed right-6 bottom-6';
+export let defaultClass = 'fixed end-6 bottom-6';
 export let popperDefaultClass = 'flex items-center mb-4 gap-2';
 export let placement = 'top';
 export let pill = true;
@@ -54,7 +54,7 @@ $: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let defaultClass: string = 'fixed right-6 bottom-6';
+@prop export let defaultClass: string = 'fixed end-6 bottom-6';
 @prop export let popperDefaultClass: string = 'flex items-center mb-4 gap-2';
 @prop export let placement: Placement = 'top';
 @prop export let pill: boolean = true;

package/dist/speed-dial/SpeedDial.svelte.d.ts

@@ -34,7 +34,7 @@ export type SpeedDialSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let defaultClass: string = 'fixed right-6 bottom-6';
+ * @prop export let defaultClass: string = 'fixed end-6 bottom-6';
  * @prop export let popperDefaultClass: string = 'flex items-center mb-4 gap-2';
  * @prop export let placement: Placement = 'top';
  * @prop export let pill: boolean = true;

package/dist/speed-dial/SpeedDialButton.svelte

@@ -8,7 +8,7 @@ export let name = '';
 export let tooltip = context.tooltip;
 export let pill = context.pill;
 export let textOutside = context.textOutside;
-export let textOutsideClass = 'block absolute -left-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
+export let textOutsideClass = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
 export let textDefaultClass = 'block mb-px text-xs font-medium';
 let btnClass;
 $: btnClass = twMerge(btnDefaultClass, tooltip === 'none' && 'flex-col', textOutside && 'relative', $$props.class);
@@ -38,6 +38,6 @@ $: btnClass = twMerge(btnDefaultClass, tooltip === 'none' && 'flex-col', textOut
 @prop export let tooltip: Placement | 'none' = context.tooltip;
 @prop export let pill: boolean = context.pill;
 @prop export let textOutside: boolean = context.textOutside;
-@prop export let textOutsideClass: string = 'block absolute -left-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
+@prop export let textOutsideClass: string = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
 @prop export let textDefaultClass: string = 'block mb-px text-xs font-medium';
 -->

package/dist/speed-dial/SpeedDialButton.svelte.d.ts

@@ -31,7 +31,7 @@ export type SpeedDialButtonSlots = typeof __propDef.slots;
  * @prop export let tooltip: Placement | 'none' = context.tooltip;
  * @prop export let pill: boolean = context.pill;
  * @prop export let textOutside: boolean = context.textOutside;
- * @prop export let textOutsideClass: string = 'block absolute -left-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
+ * @prop export let textOutsideClass: string = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
  * @prop export let textDefaultClass: string = 'block mb-px text-xs font-medium';
  */
 export default class SpeedDialButton extends SvelteComponent<SpeedDialButtonProps, SpeedDialButtonEvents, SpeedDialButtonSlots> {

package/dist/table/TableSearch.svelte

@@ -9,9 +9,9 @@ export let customColor = '';
 export let color = 'default';
 export let innerDivClass = 'p-4';
 export let searchClass = 'relative mt-1';
-export let svgDivClass = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+export let svgDivClass = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
 export let svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 let inputCls = twMerge(inputClass, $$props.classInput);
 let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
 const colors = {
@@ -62,7 +62,7 @@ $: setContext('color', color);
 @prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
 @prop export let innerDivClass: string = 'p-4';
 @prop export let searchClass: string = 'relative mt-1';
-@prop export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+@prop export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
 @prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 -->

package/dist/table/TableSearch.svelte.d.ts

@@ -40,9 +40,9 @@ export type TableSearchSlots = typeof __propDef.slots;
  * @prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
  * @prop export let innerDivClass: string = 'p-4';
  * @prop export let searchClass: string = 'relative mt-1';
- * @prop export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+ * @prop export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
  * @prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
- * @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ * @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
  */
 export default class TableSearch extends SvelteComponent<TableSearchProps, TableSearchEvents, TableSearchSlots> {
 }

package/dist/tabs/Tabs.svelte

@@ -4,20 +4,20 @@
 <script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let style = 'none';
-export let defaultClass = 'flex flex-wrap space-x-2';
+export let defaultClass = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
 export let contentClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
 export let divider = true;
 export let activeClasses = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
 export let inactiveClasses = 'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300';
 // styles
 const styledActiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-gray-700 dark:text-white',
+    full: 'p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-gray-700 dark:text-white',
     pill: 'py-3 px-4 text-white bg-primary-600 rounded-lg',
     underline: 'p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500',
     none: ''
 };
 const styledInactiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
+    full: 'p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
     pill: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
     underline: 'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400',
     none: ''
@@ -54,7 +54,7 @@ $: ulClass = twMerge(defaultClass, style === 'underline' && '-mb-px', $$props.cl
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
-@prop export let defaultClass: string = 'flex flex-wrap space-x-2';
+@prop export let defaultClass: string = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
 @prop export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
 @prop export let divider: boolean = true;
 @prop export let activeClasses: string = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';

package/dist/tabs/Tabs.svelte.d.ts

@@ -32,7 +32,7 @@ export type TabsSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
- * @prop export let defaultClass: string = 'flex flex-wrap space-x-2';
+ * @prop export let defaultClass: string = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
  * @prop export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
  * @prop export let divider: boolean = true;
  * @prop export let activeClasses: string = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';

package/dist/timeline/Activity.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from 'tailwind-merge';
-export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+export let olClass = 'relative border-s border-gray-200 dark:border-gray-700';
 let olCls = twMerge(olClass, $$props.class);
 </script>
 
@@ -11,5 +11,5 @@ let olCls = twMerge(olClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let olClass: string = 'relative border-l border-gray-200 dark:border-gray-700';
+@prop export let olClass: string = 'relative border-s border-gray-200 dark:border-gray-700';
 -->

package/dist/timeline/Activity.svelte.d.ts

@@ -17,7 +17,7 @@ export type ActivitySlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let olClass: string = 'relative border-l border-gray-200 dark:border-gray-700';
+ * @prop export let olClass: string = 'relative border-s border-gray-200 dark:border-gray-700';
  */
 export default class Activity extends SvelteComponent<ActivityProps, ActivityEvents, ActivitySlots> {
 }

package/dist/timeline/ActivityItem.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let activities;
-export let liClass = 'mb-10 ml-6';
-export let spanClass = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
+export let liClass = 'mb-10 ms-6';
+export let spanClass = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
 export let imgClass = 'rounded-full shadow-lg';
 export let outerDivClass = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
 export let innerDivClass = 'justify-between items-center mb-3 sm:flex';
@@ -44,8 +44,8 @@ let textCls = twMerge(textClass, $$props.classText);
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let activities: ActivityType[];
-@prop export let liClass: string = 'mb-10 ml-6';
-@prop export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
+@prop export let liClass: string = 'mb-10 ms-6';
+@prop export let spanClass: string = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
 @prop export let imgClass: string = 'rounded-full shadow-lg';
 @prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
 @prop export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';

package/dist/timeline/ActivityItem.svelte.d.ts

@@ -25,8 +25,8 @@ export type ActivityItemSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let activities: ActivityType[];
- * @prop export let liClass: string = 'mb-10 ml-6';
- * @prop export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
+ * @prop export let liClass: string = 'mb-10 ms-6';
+ * @prop export let spanClass: string = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
  * @prop export let imgClass: string = 'rounded-full shadow-lg';
  * @prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
  * @prop export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';

package/dist/timeline/GroupItem.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let timelines;
 export let aClass = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
-export let imgClass = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+export let imgClass = 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
 export let divClass = 'text-gray-600 dark:text-gray-400';
 export let titleClass = 'text-base font-normal';
 export let spanClass = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
@@ -25,13 +25,13 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
         {/if}
         <span class={spanCls}>
           {#if isPrivate}
-            <svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
               <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
             </svg>
             Private
           {:else}
-            <svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd" />
             </svg>
             Public
@@ -48,7 +48,7 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
 ## Props
 @prop export let timelines: GroupTimelineType[];
 @prop export let aClass: string = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
-@prop export let imgClass: string = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+@prop export let imgClass: string = 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
 @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
 @prop export let titleClass: string = 'text-base font-normal';
 @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';

package/dist/timeline/GroupItem.svelte.d.ts

@@ -23,7 +23,7 @@ export type GroupItemSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let timelines: GroupTimelineType[];
  * @prop export let aClass: string = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
- * @prop export let imgClass: string = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+ * @prop export let imgClass: string = 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
  * @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
  * @prop export let titleClass: string = 'text-base font-normal';
  * @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';

package/dist/timeline/Timeline.svelte

@@ -5,9 +5,9 @@ setContext('order', order);
 let olClasses = {
     group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
     horizontal: 'sm:flex',
-    activity: 'relative border-l border-gray-200 dark:border-gray-700',
-    vertical: 'relative border-l border-gray-200 dark:border-gray-700',
-    default: 'relative border-l border-gray-200 dark:border-gray-700'
+    activity: 'relative border-s border-gray-200 dark:border-gray-700',
+    vertical: 'relative border-s border-gray-200 dark:border-gray-700',
+    default: 'relative border-s border-gray-200 dark:border-gray-700'
 };
 </script>