flowbite-svelte 0.44.20 → 0.44.22

package/dist/navbar/NavUl.svelte

@@ -10,7 +10,7 @@ import Frame from '../utils/Frame.svelte';
 const activeUrlStore = writable('');
 export let activeUrl = '';
 export let divClass = 'w-full md:block md:w-auto';
-export let ulClass = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+export let ulClass = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
 export let hidden = undefined;
 export let slideParams = { delay: 250, duration: 500, easing: quintOut };
 export let activeClass = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
@@ -51,7 +51,7 @@ $$props.classUl);
 ## Props
 @prop export let activeUrl: string = '';
 @prop export let divClass: string = 'w-full md:block md:w-auto';
-@prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+@prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
 @prop export let hidden: boolean | undefined = undefined;
 @prop export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
 @prop export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';

package/dist/navbar/NavUl.svelte.d.ts

@@ -32,7 +32,7 @@ export type NavUlSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let activeUrl: string = '';
  * @prop export let divClass: string = 'w-full md:block md:w-auto';
- * @prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+ * @prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
  * @prop export let hidden: boolean | undefined = undefined;
  * @prop export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
  * @prop export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';

package/dist/pagination/Pagination.svelte

@@ -4,7 +4,7 @@ import PaginationItem from './PaginationItem.svelte';
 export let pages = [];
 export let activeClass = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
 export let normalClass = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-export let ulClass = 'inline-flex -space-x-px items-center';
+export let ulClass = 'inline-flex -space-x-px rtl:space-x-reverse items-center';
 export let table = false;
 export let large = false;
 export let ariaLabel = 'Page navigation';
@@ -20,9 +20,9 @@ const next = () => {
 </script>
 
 <nav aria-label={ariaLabel}>
-  <ul class={twMerge(ulClass, table && 'divide-x dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
+  <ul class={twMerge(ulClass, table && 'divide-x rtl:divide-x-reverse dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
     <li>
-      <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>
+      <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-s-lg'}>
         <slot name="prev">Previous</slot>
       </PaginationItem>
     </li>
@@ -34,7 +34,7 @@ const next = () => {
       </li>
     {/each}
     <li>
-      <PaginationItem {large} on:click={next} {normalClass} class={table ? 'rounded-r' : 'rounded-r-lg'}>
+      <PaginationItem {large} on:click={next} {normalClass} class={table ? 'rounded-r' : 'rounded-e-lg'}>
         <slot name="next">Next</slot>
       </PaginationItem>
     </li>
@@ -48,7 +48,7 @@ const next = () => {
 @prop export let pages: LinkType[] = [];
 @prop export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
 @prop export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-@prop export let ulClass: string = 'inline-flex -space-x-px items-center';
+@prop export let ulClass: string = 'inline-flex -space-x-px rtl:space-x-reverse items-center';
 @prop export let table: boolean = false;
 @prop export let large: boolean = false;
 @prop export let ariaLabel: string = 'Page navigation';

package/dist/pagination/Pagination.svelte.d.ts

@@ -41,7 +41,7 @@ export type PaginationSlots = typeof __propDef.slots;
  * @prop export let pages: LinkType[] = [];
  * @prop export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
  * @prop export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
- * @prop export let ulClass: string = 'inline-flex -space-x-px items-center';
+ * @prop export let ulClass: string = 'inline-flex -space-x-px rtl:space-x-reverse items-center';
  * @prop export let table: boolean = false;
  * @prop export let large: boolean = false;
  * @prop export let ariaLabel: string = 'Page navigation';

package/dist/rating/Rating.svelte

@@ -21,7 +21,7 @@ let grayStars = total - (fullStars + Math.ceil(rateDiffence));
 <div class={twMerge(divClass, $$props.class)}>
   {#if count}
     <svelte:component this={icon} fillPercent={100} {size} />
-    <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
+    <p class="ms-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
     <slot />
   {:else}
     {#each Array(fullStars) as star}

package/dist/rating/RatingComment.svelte

@@ -10,7 +10,7 @@ let grayStars = comment.total - roundedRating;
 </script>
 
 <article>
-  <div class="flex items-center mb-4 space-x-4">
+  <div class="flex items-center mb-4 space-x-4 rtl:space-x-reverse">
     <img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
     <div class="space-y-1 font-medium dark:text-white">
       <p>
@@ -23,12 +23,12 @@ let grayStars = comment.total - roundedRating;
   </div>
   <div class="flex items-center mb-1">
     <Rating total={comment.total} rating={comment.rating}>
-      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+      <p slot="text" class="ms-2 text-sm font-medium text-gray-500 dark:text-gray-400">
         {comment.rating} out of {comment.total}
       </p>
     </Rating>
     {#if comment.heading}
-      <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
+      <h3 class="ms-2 text-sm font-semibold text-gray-900 dark:text-white">
         {comment.heading}
       </h3>
     {/if}
@@ -44,12 +44,12 @@ let grayStars = comment.total - roundedRating;
       <slot name="evaluation" />
     </p>
     {#if helpfullink || abuselink}
-      <div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
+      <div class="flex items-center mt-3 space-x-3 rtl:space-x-reverse divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600">
         {#if helpfullink}
           <Button size="xs" href="/" color="dark">Helpful</Button>
         {/if}
         {#if abuselink}
-          <a href={abuselink} class="pl-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> Report abuse </a>
+          <a href={abuselink} class="ps-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> Report abuse </a>
         {/if}
       </div>
     {/if}

package/dist/rating/Review.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let review;
 export let articleClass = 'md:gap-8 md:grid md:grid-cols-3';
-export let divClass = 'flex items-center mb-6 space-x-4';
+export let divClass = 'flex items-center mb-6 space-x-4 rtl:space-x-reverse';
 export let imgClass = 'w-10 h-10 rounded-full';
 export let ulClass = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
 export let liClass = 'flex items-center';
@@ -42,7 +42,7 @@ export let liClass = 'flex items-center';
   </div>
   <div class="col-span-2 mt-6 md:mt-0">
     <div class="flex items-start mb-5">
-      <div class="pr-4">
+      <div class="pe-4">
         {#if review.reviewDate}
           <footer>
             <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
@@ -68,7 +68,7 @@ export let liClass = 'flex items-center';
 ## 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/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> {
 }