flowbite-svelte 0.44.20 → 0.44.21

package/dist/forms/Input.svelte

@@ -9,7 +9,7 @@ import { getContext } from 'svelte';
 export let type = 'text';
 export let value = undefined;
 export let size = undefined;
-export let defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+export let defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
 export let color = 'base';
 export let floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
 const borderClasses = {
@@ -33,20 +33,20 @@ const colorClasses = {
 let background = getContext('background');
 let group = getContext('group');
 const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
-const leftPadding = { sm: 'pl-9', md: 'pl-10', lg: 'pl-11' };
-const rightPadding = { sm: 'pr-9', md: 'pr-10', lg: 'pr-11' };
+const leftPadding = { sm: 'ps-9', md: 'ps-10', lg: 'ps-11' };
+const rightPadding = { sm: 'pe-9', md: 'pe-10', lg: 'pe-11' };
 const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-3' };
 $: _size = size || clampSize(group?.size) || 'md';
 let inputClass;
 $: {
     const _color = color === 'base' && background ? 'tinted' : color;
-    inputClass = twMerge([defaultClass, ($$slots.left && leftPadding[_size]) || ($$slots.right && rightPadding[_size]) || inputPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-l-lg last:rounded-r-lg', group && 'border-l-0 first:border-l last:border-r', $$props.class]);
+    inputClass = twMerge([defaultClass, inputPadding[_size], ($$slots.left && leftPadding[_size]) || ($$slots.right && rightPadding[_size]), ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-s-lg last:rounded-e-lg', group && 'border-s-0 first:border-s last:border-e', $$props.class]);
 }
 </script>
 
 <Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
   {#if $$slots.left}
-    <div class="{twMerge(floatClass, $$props.classLeft)} left-0 pl-2.5 pointer-events-none">
+    <div class="{twMerge(floatClass, $$props.classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
     </div>
   {/if}
@@ -54,7 +54,7 @@ $: {
     <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
   {#if $$slots.right}
-    <div class="{twMerge(floatClass, $$props.classRight)} right-0 pr-2.5"><slot name="right" /></div>
+    <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5"><slot name="right" /></div>
   {/if}
 </Wrapper>
 
@@ -65,7 +65,7 @@ $: {
 @prop export let type: InputType = 'text';
 @prop export let value: any = undefined;
 @prop export let size: FormSizeType | undefined = undefined;
-@prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+@prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
 @prop export let color: 'base' | 'green' | 'red' = 'base';
 @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
 -->

package/dist/forms/Input.svelte.d.ts

@@ -48,7 +48,7 @@ export type InputSlots = typeof __propDef.slots;
  * @prop export let type: InputType = 'text';
  * @prop export let value: any = undefined;
  * @prop export let size: FormSizeType | undefined = undefined;
- * @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+ * @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
  * @prop export let color: 'base' | 'green' | 'red' = 'base';
  * @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
  */

package/dist/forms/InputAddon.svelte

@@ -14,14 +14,14 @@ const darkBgClasses = {
     tinted: 'dark:bg-gray-500 dark:text-gray-300'
 };
 const divider = {
-    base: 'dark:border-r-gray-700 dark:last:border-r-gray-600',
-    tinted: 'dark:border-r-gray-600 dark:last:border-r-gray-500'
+    base: 'dark:border-e-gray-700 dark:last:border-e-gray-600',
+    tinted: 'dark:border-e-gray-600 dark:last:border-e-gray-500'
 };
 const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
 const prefixPadding = { sm: 'px-2', md: 'px-3', lg: 'px-4' };
 // size: explicit, inherited, default
 $: _size = size || clampSize(group?.size) || 'md';
-$: divClass = twMerge(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-l border-r', 'first:rounded-l-lg last:rounded-r-lg', $$props.class);
+$: divClass = twMerge(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-s border-e', 'first:rounded-s-lg last:rounded-e-lg', $$props.class);
 </script>
 
 <div {...$$restProps} class={divClass}>

package/dist/forms/Label.svelte

@@ -1,6 +1,6 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let color = 'gray';
-export let defaultClass = 'text-sm font-medium block';
+export let defaultClass = 'text-sm rtl:text-right font-medium block';
 export let show = true;
 let node;
 const colorClasses = {
@@ -29,6 +29,6 @@ $: labelClass = twMerge(defaultClass, colorClasses[color], $$props.class);
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
-@prop export let defaultClass: string = 'text-sm font-medium block';
+@prop export let defaultClass: string = 'text-sm rtl:text-right font-medium block';
 @prop export let show: boolean = true;
 -->

package/dist/forms/Label.svelte.d.ts

@@ -20,7 +20,7 @@ export type LabelSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
- * @prop export let defaultClass: string = 'text-sm font-medium block';
+ * @prop export let defaultClass: string = 'text-sm rtl:text-right font-medium block';
  * @prop export let show: boolean = true;
  */
 export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {

package/dist/forms/MultiSelect.svelte

@@ -1,8 +1,6 @@
 <script>import Badge from '../badge/Badge.svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import { twMerge } from 'tailwind-merge';
-import createEventDispatcher from '../utils/createEventDispatcher';
-const dispatch = createEventDispatcher();
 export let items = [];
 export let value = [];
 export let size = 'md';
@@ -18,7 +16,7 @@ const sizes = {
 const multiSelectClass = 'relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500';
 // Dropdown
 let multiSelectDropdown;
-$: multiSelectDropdown = twMerge('absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 left-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full', dropdownClass);
+$: multiSelectDropdown = twMerge('absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full', dropdownClass);
 // Items
 const itemsClass = 'py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600';
 // Selected items
@@ -41,6 +39,9 @@ const clearThisOption = (select) => {
         value = value.filter((o) => o !== select.value);
     }
 };
+function create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
+    return new CustomEvent(type, { detail, bubbles, cancelable });
+}
 function init(node, value) {
     const inital = value; // hack for below
     return {
@@ -48,8 +49,8 @@ function init(node, value) {
             selectItems = items.filter((x) => value.includes(x.value));
             // avoid initial event emitting
             if (value !== inital) {
-                dispatch('change', node, selectItems);
-                dispatch('input', node, selectItems);
+                node.dispatchEvent(create_custom_event('input', selectItems));
+                node.dispatchEvent(create_custom_event('change', selectItems));
             }
         }
     };
@@ -57,7 +58,7 @@ function init(node, value) {
 </script>
 
 <!-- Hidden select for form submission -->
-<select use:init={value} {...$$restProps} {value} hidden multiple>
+<select use:init={value} {...$$restProps} {value} hidden multiple on:change on:input>
   {#each items as { value, name }}
     <option {value}>{name}</option>
   {/each}
@@ -75,12 +76,12 @@ function init(node, value) {
       {/each}
     {/if}
   </span>
-  <div class="flex ml-auto gap-2 items-center">
+  <div class="flex ms-auto gap-2 items-center">
     {#if selectItems.length}
       <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400" />
     {/if}
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600" />
-    <svg class="cursor-pointer h-3 w-3 ml-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <svg class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
     </svg>
   </div>

package/dist/forms/MultiSelect.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         dropdownClass?: string | undefined;
     };
     events: {
+        change: Event;
+        input: Event;
         click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/forms/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/MultiSelect.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAqH/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/MultiSelect.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAqH/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}

package/dist/forms/Radio.svelte

@@ -12,7 +12,7 @@ const colorClasses = {
     blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
 };
 export const labelClass = (inline, extraClass) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-export let spacing = 'mr-2';
+export let spacing = 'me-2';
 export const inputClass = (custom, color, rounded, tinted, extraClass) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
 </script>
 
@@ -36,7 +36,7 @@ let background = getContext('background');
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let spacing: string = 'mr-2';
+@prop export let spacing: string = 'me-2';
 @prop export let color: FormColorType = 'primary';
 @prop export let custom: boolean = false;
 @prop export let inline: boolean = false;

package/dist/forms/Radio.svelte.d.ts

@@ -37,7 +37,7 @@ export type RadioSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let spacing: string = 'mr-2';
+ * @prop export let spacing: string = 'me-2';
  * @prop export let color: FormColorType = 'primary';
  * @prop export let custom: boolean = false;
  * @prop export let inline: boolean = false;

package/dist/forms/Search.svelte

@@ -24,7 +24,7 @@ const sizes = {
     Due to that we need the below slot and Wrapper around
   -->
   {#if $$slots.default}
-    <div class="flex absolute inset-y-0 right-0 items-center text-gray-500 dark:text-gray-400">
+    <div class="flex absolute inset-y-0 end-0 items-center text-gray-500 dark:text-gray-400">
       <slot />
     </div>
   {/if}

package/dist/forms/Toggle.svelte

@@ -8,7 +8,7 @@ export let checked = undefined;
 export let customSize = '';
 // tinted if put in component having its own background
 let background = getContext('background');
-const common = "mr-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
+const common = "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
 const colors = {
     primary: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600',
     secondary: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600',
@@ -21,9 +21,9 @@ const colors = {
     blue: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
 };
 const sizes = {
-    small: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
-    default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
-    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6',
+    small: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4',
+    default: 'w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5',
+    large: 'w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6',
     custom: customSize
 };
 let divClass;

package/dist/indicators/Indicator.svelte

@@ -27,31 +27,31 @@ const sizes = {
 };
 const placements = {
     // top
-    'top-left': 'top-0 left-0',
-    'top-center': 'top-0 left-1/2 -translate-x-1/2',
-    'top-right': 'top-0 right-0',
+    'top-left': 'top-0 start-0',
+    'top-center': 'top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2',
+    'top-right': 'top-0 end-0',
     // center
-    'center-left': 'top-1/2 -translate-y-1/2 left-0',
-    center: 'top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
-    'center-right': 'top-1/2 -translate-y-1/2 right-0',
+    'center-left': 'top-1/2 -translate-y-1/2 start-0',
+    center: 'top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2',
+    'center-right': 'top-1/2 -translate-y-1/2 end-0',
     // bottom
-    'bottom-left': 'bottom-0 left-0',
-    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
-    'bottom-right': 'bottom-0 right-0'
+    'bottom-left': 'bottom-0 start-0',
+    'bottom-center': 'bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2',
+    'bottom-right': 'bottom-0 end-0'
 };
 const offsets = {
     // top
-    'top-left': '-translate-x-1/3 -translate-y-1/3',
+    'top-left': '-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3',
     'top-center': '-translate-y-1/3',
-    'top-right': 'translate-x-1/3 -translate-y-1/3',
+    'top-right': 'translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3',
     // center
-    'center-left': '-translate-x-1/3',
+    'center-left': '-translate-x-1/3 rtl:translate-x-1/3',
     center: '',
-    'center-right': 'translate-x-1/3',
+    'center-right': 'translate-x-1/3 rtl:-translate-x-1/3',
     // bottom
-    'bottom-left': '-translate-x-1/3 translate-y-1/3',
+    'bottom-left': '-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3',
     'bottom-center': 'translate-y-1/3',
-    'bottom-right': 'translate-x-1/3 translate-y-1/3'
+    'bottom-right': 'translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3'
 };
 let dotClass;
 $: dotClass = twMerge('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);

package/dist/list-group/Listgroup.svelte

@@ -20,7 +20,7 @@ $: groupClass = twMerge(defaultClass, $$props.class);
     {/if}
   {:else}
     {@const item = items[0]}
-    <slot {item} />
+    <slot {item} index={0} />
   {/each}
 </Frame>
 

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

@@ -24,6 +24,7 @@ declare const __propDef: {
     slots: {
         default: {
             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;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"}
+{"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/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/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

@@ -53,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/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';