flowbite-svelte 0.44.19 → 0.44.21

package/dist/list-group/Listgroup.svelte

@@ -1,7 +1,7 @@
-<script>import { setContext, createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher, setContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-import ListgroupItem from './ListgroupItem.svelte';
 import Frame from '../utils/Frame.svelte';
+import ListgroupItem from './ListgroupItem.svelte';
 const dispatch = createEventDispatcher();
 export let items = [];
 export let active = false;
@@ -13,13 +13,14 @@ $: groupClass = twMerge(defaultClass, $$props.class);
 
 <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
-    {#if typeof item === 'object'}
-      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
-    {:else}
+    {#if typeof item === 'string'}
       <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
+    {:else}
+      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
     {/if}
   {:else}
-    <slot item={items[0]} />
+    {@const item = items[0]}
+    <slot {item} index={0} />
   {/each}
 </Frame>
 

package/dist/list-group/Listgroup.svelte.d.ts

@@ -7,8 +7,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
@@ -25,7 +23,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            item: string | ListGroupItemType;
+            item: string;
+            index: number;
         };
     };
 };

package/dist/list-group/Listgroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA6ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}
+{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA8ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}

package/dist/list-group/ListgroupItem.svelte

@@ -10,6 +10,7 @@ export let disabledClass = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text
 export let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
 export let hoverClass = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
 export let itemDefaultClass = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+export let attrs = undefined;
 const states = {
     current: currentClass,
     normal: normalClass,
@@ -26,11 +27,11 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'dis
     <slot item={$$props} />
   </li>
 {:else if href}
-  <a {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+  <a {...attrs} {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
     <slot item={$$props} />
   </a>
 {:else}
-  <button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
+  <button type="button" {...attrs} class="flex items-center text-left {itemClass}" {disabled} aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
     <slot item={$$props} />
   </button>
 {/if}
@@ -49,4 +50,5 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'dis
 @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
 @prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
 @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+@prop export let attrs: any = undefined;
 -->

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         focusClass?: string | undefined;
         hoverClass?: string | undefined;
         itemDefaultClass?: string | undefined;
+        attrs?: any;
     };
     events: {
         blur: FocusEvent;
@@ -49,6 +50,7 @@ export type ListgroupItemSlots = typeof __propDef.slots;
  * @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
  * @prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
  * @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+ * @prop export let attrs: any = undefined;
  */
 export default class ListgroupItem extends SvelteComponent<ListgroupItemProps, ListgroupItemEvents, ListgroupItemSlots> {
 }

package/dist/list-group/ListgroupItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAkDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,eAAe,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CACtH"}
+{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;gBADke,GAAG;;;;;;;;;;;;;;;;;;;;;CACta,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,eAAe,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CACtH"}

package/dist/marquee/Marquee.svelte

@@ -8,10 +8,10 @@ let isHovering = false;
 let marquee;
 let intervalId;
 let shadowClass = `after:content-[''] after:absolute after:block after:z-10 after:h-full before:content-[''] before:absolute 
-    before:block before:z-10 before:h-full before:right-0 after:shadow-[10px_0_50px_65px_rgba(256,256,256,1)] 
+    before:block before:z-10 before:h-full before:end-0 after:shadow-[10px_0_50px_65px_rgba(256,256,256,1)] 
     before:shadow-[-10px_0_50px_65px_rgba(256,256,256,1)] dark:after:shadow-[10px_0_50px_65px_rgba(16,24,39,1)]
     dark:before:shadow-[-10px_0_50px_65px_rgba(16,24,39,1)]`;
-let divCls = twMerge("relative flex overflow-hidden w-[100%]", shadow ? shadowClass : '', $$props.class);
+let divCls = twMerge('relative flex overflow-hidden w-[100%]', shadow ? shadowClass : '', $$props.class);
 onMount(() => {
     intervalId = setInterval(() => {
         if (marquee && Math.abs(offset) >= marquee.offsetWidth) {
@@ -29,15 +29,8 @@ onDestroy(() => intervalId);
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<div
-  class={divCls}
-  role="banner"
-  on:mouseover={() => (isHovering = true)}
-  on:mouseleave={() => (isHovering = false)}>
-  <div
-    class="flex justify-around items-center min-w-[100%]"
-    style="transform: {`translateX(${offset}px)`}"
-    bind:this={marquee}>
+<div class={divCls} role="banner" on:mouseover={() => (isHovering = true)} on:mouseleave={() => (isHovering = false)}>
+  <div class="flex justify-around items-center min-w-[100%]" style="transform: {`translateX(${offset}px)`}" bind:this={marquee}>
     <slot />
   </div>
   <div class="flex justify-around items-center min-w-[100%]" style="transform: {`translateX(${offset}px)`}">

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -7,8 +7,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;

package/dist/mega-menu/MegaMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/mega-menu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAmDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAvCL,OAAO;iBACJ,MAAM;;;;;;;;;;;;;;;CAsCoC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/mega-menu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAmDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;cAvCL,OAAO;iBACJ,MAAM;;;;;;;;;;;;;;;CAsCoC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/modal/Modal.svelte

@@ -12,7 +12,7 @@ export let dismissable = true;
 export let backdropClass = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 export let defaultClass = 'relative flex flex-col mx-auto';
 export let outsideclose = false;
-export let dialogClass = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+export let dialogClass = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
 const dispatch = createEventDispatcher();
 $: dispatch(open ? 'open' : 'close');
 function prepareFocus(node) {
@@ -66,6 +66,9 @@ const onAutoClose = (e) => {
     const target = e.target;
     if (autoclose && target?.tagName === 'BUTTON')
         hide(e); // close on any button click
+};
+const onOutsideClose = (e) => {
+    const target = e.target;
     if (outsideclose && target === e.currentTarget)
         hide(e); // close on click outside
 };
@@ -88,13 +91,14 @@ function handleKeys(e) {
   <div class={backdropCls} />
   <!-- dialog -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} class={twMerge(dialogClass, $$props.classDialog, ...getPlacementClasses())} tabindex="-1" aria-modal="true" role="dialog">
+  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} on:mousedown={onOutsideClose} class={twMerge(dialogClass, $$props.classDialog, ...getPlacementClasses())} tabindex="-1" aria-modal="true" role="dialog">
     <div class="flex relative {sizes[size]} w-full max-h-full">
       <!-- Modal content -->
+
       <Frame rounded shadow {...$$restProps} class={frameClass}>
         <!-- Modal header -->
         {#if $$slots.header || title}
-          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t">
+          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t-lg">
             <slot name="header">
               <h3 class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
                 {title}
@@ -102,16 +106,17 @@ function handleKeys(e) {
             </slot>
             {#if dismissable}<CloseButton name="Close modal" on:click={hide} color={$$restProps.color} />{/if}
           </Frame>
-        {:else if dismissable}
-          <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} color={$$restProps.color} />
         {/if}
         <!-- Modal body -->
         <div class={twMerge('p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
+          {#if dismissable && !$$slots.header && !title}
+            <CloseButton name="Close modal" class="absolute top-3 end-2.5" on:click={hide} color={$$restProps.color} />
+          {/if}
           <slot />
         </div>
         <!-- Modal footer -->
         {#if $$slots.footer}
-          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rounded-b">
+          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rtl:space-x-reverse rounded-b-lg">
             <slot name="footer" />
           </Frame>
         {/if}
@@ -133,5 +138,5 @@ function handleKeys(e) {
 @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
 @prop export let outsideclose: boolean = false;
-@prop export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+@prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
 -->

package/dist/modal/Modal.svelte.d.ts

@@ -8,8 +8,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
@@ -55,7 +53,7 @@ export type ModalSlots = typeof __propDef.slots;
  * @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
  * @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
  * @prop export let outsideclose: boolean = false;
- * @prop export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+ * @prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
  */
 export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
 }

package/dist/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/modal/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA8JnD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/modal/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAmKnD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/navbar/NavHamburger.svelte

@@ -5,7 +5,7 @@ import ToolbarButton from '../toolbar/ToolbarButton.svelte';
 import Menu from './Menu.svelte';
 export let menuClass = 'h-6 w-6 shrink-0';
 export let onClick = undefined;
-let btnClass = 'ml-3 md:hidden';
+let btnClass = 'ms-3 md:hidden';
 let hiddenStore = getContext('navHidden') ?? writable(true);
 const toggle = (ev) => hiddenStore.update((h) => !h);
 </script>

package/dist/navbar/NavLi.svelte

@@ -10,7 +10,7 @@ activeUrlStore.subscribe((value) => {
     navUrl = value;
 });
 $: active = navUrl ? href === navUrl : false;
-$: liClass = twMerge('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+$: liClass = twMerge('block py-2 pe-4 ps-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
 // $: console.log()
 </script>
 

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/navbar/Navbar.svelte.d.ts

@@ -7,8 +7,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;

package/dist/navbar/Navbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAsCjD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAsCjD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

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/popover/Popover.svelte.d.ts

@@ -6,8 +6,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;

package/dist/popover/Popover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/popover/Popover.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/popover/Popover.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}

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;
 -->