flowbite-svelte 0.44.19 → 0.44.21

package/README.md

@@ -113,7 +113,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
     <td width="33.3333%">Typography</td>
     <td width="33.3333%">Modal</td>
-    <td width="33.3333%">Tab</td>
+    <td width="33.3333%">Tabs</td>
   </tr>
   <tr>
     <td width="33.3333%">
@@ -127,7 +127,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/tab">
+        <a href="https://flowbite-svelte.com/docs/components/tabs">
             <img alt="Svelte Tabs" src="https://flowbite.s3.amazonaws.com/github/svelte/tabs.jpg">
         </a>
     </td>

package/dist/accordion/Accordion.svelte.d.ts

@@ -15,8 +15,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/accordion/Accordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmDH,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmDH,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}

package/dist/accordion/AccordionItem.svelte

@@ -12,8 +12,8 @@ export let paddingFlush = 'py-5';
 export let paddingDefault = 'p-5';
 export let textFlushOpen = 'text-gray-900 dark:text-white';
 export let textFlushDefault = 'text-gray-500 dark:text-gray-400';
-export let borderClass = 'border-l border-r group-first:border-t';
-export let borderOpenClass = 'border-l border-r';
+export let borderClass = 'border-s border-e group-first:border-t';
+export let borderOpenClass = 'border-s border-e';
 export let borderBottomClass = 'border-b';
 export let borderSharedClass = 'border-gray-200 dark:border-gray-700';
 export let classActive = undefined;
@@ -97,8 +97,8 @@ $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush
 @prop export let paddingDefault: string = 'p-5';
 @prop export let textFlushOpen: string = 'text-gray-900 dark:text-white';
 @prop export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
-@prop export let borderClass: string = 'border-l border-r group-first:border-t';
-@prop export let borderOpenClass: string = 'border-l border-r';
+@prop export let borderClass: string = 'border-s border-e group-first:border-t';
+@prop export let borderOpenClass: string = 'border-s border-e';
 @prop export let borderBottomClass: string = 'border-b';
 @prop export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
 @prop export let classActive: string | undefined = undefined;

package/dist/accordion/AccordionItem.svelte.d.ts

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

package/dist/alert/Alert.svelte

@@ -1,47 +1,29 @@
-<script>import { twMerge } from 'tailwind-merge';
-import { createEventDispatcher } from 'svelte';
+<script>import TransitionFrame from '../utils/TransitionFrame.svelte';
+import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
-import Frame from '../utils/Frame.svelte';
-import { fade } from 'svelte/transition';
 export let dismissable = false;
 export let defaultClass = 'p-4 gap-3 text-sm';
-let open = true;
-const dispatch = createEventDispatcher();
-$: dispatch(open ? 'open' : 'close');
-function close(e) {
-    e.stopPropagation();
-    open = false;
-}
 let divClass;
 $: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
-$: {
-    // set default values
-    $$restProps.color = $$restProps.color ?? 'primary';
-    $$restProps.rounded = $$restProps.rounded ?? true;
-    if (dismissable)
-        $$restProps.transition = $$restProps.transition ?? fade;
-}
 </script>
 
-{#if open}
-  <Frame {...$$restProps} class={divClass} role="alert">
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {/if}
+<TransitionFrame {dismissable} color="primary" role="alert" rounded {...$$restProps} class={divClass} on:close let:close>
+  {#if $$slots.icon}
+    <slot name="icon" />
+  {/if}
 
-    {#if $$slots.icon || dismissable}
-      <div><slot /></div>
-    {:else}
-      <slot />
-    {/if}
+  {#if $$slots.icon || dismissable}
+    <div><slot /></div>
+  {:else}
+    <slot />
+  {/if}
 
-    {#if dismissable}
-      <slot name="close-button" {close}>
-        <CloseButton class="ml-auto -mr-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
-      </slot>
-    {/if}
-  </Frame>
-{/if}
+  {#if dismissable}
+    <slot name="close-button" {close}>
+      <CloseButton class="ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+    </slot>
+  {/if}
+</TransitionFrame>
 
 <!--
 @component

package/dist/alert/Alert.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import type { Dismissable } from '../types';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string | undefined;
@@ -7,15 +6,19 @@ 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;
         class?: string | undefined;
         role?: string | undefined;
-    } & Dismissable;
+    } & import("..").Dismissable & {
+        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
+        params?: any;
+    } & {
+        defaultClass?: string | undefined;
+    };
     events: {
+        close: CustomEvent<any>;
         click: MouseEvent;
         change: CustomEvent<any>;
         keydown: CustomEvent<any>;
@@ -31,7 +34,7 @@ declare const __propDef: {
         icon: {};
         default: {};
         'close-button': {
-            close: (e: MouseEvent) => void;
+            close: (ev: MouseEvent | undefined) => void;
         };
     };
 };

package/dist/alert/Alert.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/alert/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA2D9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAxCK,UAAU;;;CAwCyB,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/alert/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA6CD,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/avatar/Avatar.svelte

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

package/dist/badge/Badge.svelte

@@ -1,8 +1,6 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { twMerge, twJoin } from 'tailwind-merge';
+<script>import TransitionFrame from '../utils/TransitionFrame.svelte';
+import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
-import { fade } from 'svelte/transition';
-import Frame from '../utils/Frame.svelte';
 export let color = 'primary';
 export let large = false;
 export let dismissable = false;
@@ -59,29 +57,16 @@ const closeBtnColors = {
     pink: 'text-pink-400 hover:text-pink-900 dark:hover:bg-pink-800 dark:hover:text-pink-300',
     none: ''
 };
-$: {
-    if (dismissable)
-        $$restProps.transition = $$restProps.transition ?? fade;
-}
-let open = true;
-const dispatch = createEventDispatcher();
-$: dispatch(open ? 'open' : 'close');
-const close = (e) => {
-    e.stopPropagation();
-    open = false;
-};
 </script>
 
-{#if open}
-  <Frame {...$$restProps} class={badgeClass}>
-    <slot />
-    {#if dismissable}
-      <slot name="close-button" {close}>
-        <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ml-1.5 -mr-1.5" />
-      </slot>
-    {/if}
-  </Frame>
-{/if}
+<TransitionFrame {dismissable} {...$$restProps} class={badgeClass} let:close on:close>
+  <slot />
+  {#if dismissable}
+    <slot name="close-button" {close}>
+      <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ms-1.5 -me-1.5" />
+    </slot>
+  {/if}
+</TransitionFrame>
 
 <!--
 @component

package/dist/badge/Badge.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import type { Dismissable } from '../types';
 declare const __propDef: {
     props: Omit<import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string | undefined;
@@ -7,24 +6,27 @@ 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;
         class?: string | undefined;
         role?: string | undefined;
-    }, "color"> & Dismissable & {
+    } & import("..").Dismissable & {
+        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
+        params?: any;
+    }, "color"> & {
         color?: "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "primary" | "none" | undefined;
         large?: boolean | undefined;
     };
     events: {
+        close: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
         'close-button': {
-            close: (e: MouseEvent) => void;
+            close: (ev: MouseEvent | undefined) => void;
         };
     };
 };

package/dist/badge/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/badge/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA0G9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;uBArBK,UAAU;;;CAqByB,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/badge/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA8FD,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/banner/Banner.svelte

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

package/dist/bottom-navigation/BottomNav.svelte

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

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -34,9 +34,9 @@ const spanClasses = {
     video: ''
 };
 const appBtnClasses = {
-    left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    left: 'inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
     middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
+    right: 'inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
 };
 let btnClass;
 // let active = navUrl ? href === navUrl : false;

package/dist/breadcrumb/Breadcrumb.svelte

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

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

@@ -24,7 +24,7 @@ export type BreadcrumbSlots = typeof __propDef.slots;
  * @prop export let solid: boolean = false;
  * @prop export let navClass: string = 'flex';
  * @prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
- * @prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+ * @prop export let olClass: string = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
  * @prop export let ariaLabel: string = 'Breadcrumb';
  */
 export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {

package/dist/breadcrumb/BreadcrumbItem.svelte

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

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -24,8 +24,8 @@ export type BreadcrumbItemSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let home: boolean = false;
  * @prop export let href: string | undefined = undefined;
- * @prop export let linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
- * @prop export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+ * @prop export let linkClass: string = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
+ * @prop export let spanClass: string = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
  * @prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
  */
 export default class BreadcrumbItem extends SvelteComponent<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {

package/dist/buttons/Button.svelte

@@ -79,51 +79,15 @@ const sizeClasses = {
 };
 const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
-$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' &&
-    (group && !checked
-        ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
-        : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline &&
-    color === 'dark' &&
-    (group
-        ? checked
-            ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600'
-            : 'dark:text-white border-gray-800 dark:border-white'
-        : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group
-    ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg'
-    : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' && (group && !checked ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline && color === 'dark' && (group ? (checked ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600' : 'dark:text-white border-gray-800 dark:border-white') : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-s-0 first:border-s', group ? (pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
 {#if href}
-  <a
-    {href}
-    {...$$restProps}
-    class={buttonClass}
-    role="button"
-    on:click
-    on:change
-    on:keydown
-    on:keyup
-    on:touchstart|passive
-    on:touchend
-    on:touchcancel
-    on:mouseenter
-    on:mouseleave>
+  <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </a>
 {:else if tag === 'button'}
-  <button
-    {type}
-    {...$$restProps}
-    class={buttonClass}
-    on:click
-    on:change
-    on:keydown
-    on:keyup
-    on:touchstart|passive
-    on:touchend
-    on:touchcancel
-    on:mouseenter
-    on:mouseleave>
+  <button {type} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </button>
 {:else}

package/dist/buttons/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgK5D,QAAA,MAAM,SAAS;;;;;;eAD6N,MAAM,GAAG,SAAS;eAAS,oBAAoB,CAAC,MAAM,CAAC;;;;kBAAiE,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACzS,CAAC;AAC/E,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;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AA2I5D,QAAA,MAAM,SAAS;;;;;;eAD6N,MAAM,GAAG,SAAS;eAAS,oBAAoB,CAAC,MAAM,CAAC;;;;kBAAiE,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACzS,CAAC;AAC/E,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;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

package/dist/buttons/GradientButton.svelte

@@ -42,7 +42,7 @@ let gradientOutlineClass;
 $: gradientOutlineClass = twMerge('inline-flex items-center justify-center w-full  !border-0', $$props.pill || '!rounded-md', 'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white', // this is limitation - no transparency
 'hover:bg-transparent hover:!text-inherit', 'transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit');
 let divClass;
-$: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
+$: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
 </script>
 
 {#if $$props.outline}

package/dist/cards/Card.svelte

@@ -25,7 +25,7 @@ $: innerPadding = paddings[padding];
 let cardClass;
 $: cardClass = twMerge('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
 let imgClass;
-$: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
+$: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-e-lg' : 'md:rounded-s-lg'));
 </script>
 
 <Frame tag={href ? 'a' : 'div'} rounded shadow border on:click on:focusin on:focusout on:mouseenter on:mouseleave {href} {...$$restProps} class={cardClass}>

package/dist/cards/Card.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/cards/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}

package/dist/carousel/Carousel.svelte

@@ -31,16 +31,6 @@ subscribe((_state) => {
 onMount(() => {
     dispatch('change', images[index]);
 });
-let prevIndex = index;
-$: {
-    if (!prevIndex || prevIndex < index) {
-        update((_state) => ({ ..._state, forward: true, index }));
-    }
-    else {
-        update((_state) => ({ ..._state, forward: false, index }));
-    }
-    prevIndex = index;
-}
 const nextSlide = () => {
     update((_state) => {
         if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO }))

package/dist/carousel/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,IAAI,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAIJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA+MnC,QAAA,MAAM,SAAS;;;gBADsK,iBAAiB,EAAE;;;4BAhMzK,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;;;;;;;CAiME,CAAC;AAC/E,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,IAAI,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAIJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAqMnC,QAAA,MAAM,SAAS;;;gBADsK,iBAAiB,EAAE;;;4BAtLzK,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;;;;;;;CAuLE,CAAC;AAC/E,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/carousel/ControlButton.svelte

@@ -2,7 +2,7 @@
 export let forward;
 export let name;
 let buttonCls;
-$: buttonCls = twMerge('flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-none text-white dark:text-gray-300', forward ? 'right-0' : 'left-0', $$props.class);
+$: buttonCls = twMerge('flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-none text-white dark:text-gray-300', forward ? 'end-0' : 'start-0', $$props.class);
 </script>
 
 <button on:click type="button" class={buttonCls}>

package/dist/carousel/Indicators.svelte

@@ -6,7 +6,7 @@ export let inactiveClass = 'opacity-60';
 const state = getContext('state');
 </script>
 
-<div class={twMerge('flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2', $$props.class)}>
+<div class={twMerge('flex absolute bottom-5 start-1/2 z-30 space-x-3 rtl:space-x-reverse -translate-x-1/2 rtl:translate-x-1/2', $$props.class)}>
   {#each $state.images as _, idx}
     {@const selected = $state.index === idx}
     <button on:click={() => ($state.index = idx)}>

package/dist/darkmode/DarkMode.svelte

@@ -7,9 +7,12 @@ const sizes = {
     md: 'w-5 h-5',
     lg: 'w-6 h-6'
 };
-const toggleTheme = () => {
-    const isDark = window.document.documentElement.classList.toggle('dark');
-    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
+const toggleTheme = (ev) => {
+    const target = ev.target;
+    const isDark = target.ownerDocument.documentElement.classList.toggle('dark');
+    if (target.ownerDocument === document)
+        // we are NOT in the iFrame
+        localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
 };
 </script>
 

package/dist/darkmode/DarkMode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}