flowbite-svelte 0.44.20 → 0.44.22

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

@@ -20,7 +20,7 @@ $: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items
 
   {#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 />
+      <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>

package/dist/avatar/Avatar.svelte

@@ -1,6 +1,5 @@
-<script>import { twMerge } from 'tailwind-merge';
-import AvatarPlaceholder from './Placeholder.svelte';
-import Indicator from '../indicators/Indicator.svelte';
+<script>import Indicator from '../indicators/Indicator.svelte';
+import { twMerge } from 'tailwind-merge';
 export let src = '';
 export let href = undefined;
 export let rounded = false;
@@ -15,10 +14,11 @@ const sizes = {
     sm: 'w-8 h-8',
     md: 'w-10 h-10',
     lg: 'w-20 h-20',
-    xl: 'w-36 h-36'
+    xl: 'w-36 h-36',
+    none: ''
 };
 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}
@@ -26,7 +26,12 @@ $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ri
     {#if src}
       <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
     {:else}
-      <slot><AvatarPlaceholder {rounded} {size} {border} class={twMerge($$props.classPlaceholder)} /></slot>
+      <slot>
+        <!-- default avatar placeholder -->
+        <svg class="w-full h-full {rounded ? 'rounded' : 'rounded-full'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+        </svg>
+      </slot>
     {/if}
     {#if dot}
       <Indicator border offset={rounded} {...dot} />
@@ -47,5 +52,5 @@ $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ri
 @prop export let stacked: boolean = false;
 @prop export let dot: object | undefined = undefined;
 @prop export let alt: string = '';
-@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'md';
 -->

package/dist/avatar/Avatar.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         stacked?: boolean | undefined;
         dot?: object | undefined;
         alt?: string | undefined;
-        size?: "xs" | "sm" | "lg" | "xl" | "md" | undefined;
+        size?: "none" | "xs" | "sm" | "lg" | "xl" | "md" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -31,7 +31,7 @@ export type AvatarSlots = typeof __propDef.slots;
  * @prop export let stacked: boolean = false;
  * @prop export let dot: object | undefined = undefined;
  * @prop export let alt: string = '';
- * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+ * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'md';
  */
 export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
 }

package/dist/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/avatar/Avatar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAoDD,QAAA,MAAM,SAAS;;;;eAD4I,MAAM,GAAG,SAAS;;;;cAAgE,MAAM,GAAG,SAAS;;;;;;;;;;CACjL,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/avatar/Avatar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAwDD,QAAA,MAAM,SAAS;;;;eAD4I,MAAM,GAAG,SAAS;;;;cAAgE,MAAM,GAAG,SAAS;;;;;;;;;;CACjL,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

package/dist/badge/Badge.svelte

@@ -63,7 +63,7 @@ const closeBtnColors = {
   <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" />
+      <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ms-1.5 -me-1.5" />
     </slot>
   {/if}
 </TransitionFrame>

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

@@ -20,12 +20,12 @@ const sizes = {
     lg: 'max-w-2xl',
     xl: 'max-w-screen-xl'
 };
-let inneraPdding;
+let innerPadding;
 $: 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);
+$: cardClass = twMerge('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse' : 'md:flex-row'), 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/carousel/Carousel.svelte

@@ -12,7 +12,7 @@ const SLIDE_DURATION_RATIO = 0.25; // TODO: Expose one day?
 export let images;
 export let index = 0;
 export let slideDuration = 1000;
-export let transition;
+export let transition = null;
 export let duration = 0;
 export let ariaLabel = 'Draggable Carousel';
 // Carousel
@@ -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 }))
@@ -177,7 +167,7 @@ $: onDragStop =
 @prop export let images: HTMLImgAttributes[];
 @prop export let index: number = 0;
 @prop export let slideDuration: number = 1000;
-@prop export let transition: TransitionFunc | null;
+@prop export let transition: TransitionFunc | null = null;
 @prop export let duration: number = 0;
 @prop export let ariaLabel: string = 'Draggable Carousel';
 @prop export let imgClass: string = '';

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

@@ -17,7 +17,7 @@ declare const __propDef: {
         images: HTMLImgAttributes[];
         index?: number | undefined;
         slideDuration?: number | undefined;
-        transition: ((node: HTMLElement, params: any) => TransitionConfig) | null;
+        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | null | undefined;
         duration?: number | undefined;
         ariaLabel?: string | undefined;
         imgClass?: string | undefined;
@@ -48,7 +48,7 @@ export type CarouselSlots = typeof __propDef.slots;
  * @prop export let images: HTMLImgAttributes[];
  * @prop export let index: number = 0;
  * @prop export let slideDuration: number = 1000;
- * @prop export let transition: TransitionFunc | null;
+ * @prop export let transition: TransitionFunc | null = null;
  * @prop export let duration: number = 0;
  * @prop export let ariaLabel: string = 'Draggable Carousel';
  * @prop export let imgClass: string = '';

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;;;6BAtLzK,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"}

package/dist/datepicker/Datepicker.svelte

@@ -10,7 +10,7 @@ export let datepickerFormat = 'mm/dd/yyyy';
 export let datepickerOrientation = 'bottom';
 export let datepickerTitle = 'Flowbite datepicker';
 export let attribute = '';
-export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 $: setAttribute = (node, params) => {
     if (params) {
         node.setAttribute(params, '');
@@ -26,14 +26,14 @@ $: setAttribute = (node, params) => {
 {#if range}
   <div date-rangepicker class="flex items-center">
     <div class="relative">
-      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+      <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
         <Calendar />
       </div>
       <input name="start" type="text" class={inputClass} placeholder="Select date start" />
     </div>
     <span class="mx-4 text-gray-500">to</span>
     <div class="relative">
-      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+      <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
         <Calendar />
       </div>
       <input name="end" type="text" class={inputClass} placeholder="Select date end" />
@@ -41,7 +41,7 @@ $: setAttribute = (node, params) => {
   </div>
 {:else}
   <div class="relative">
-    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+    <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
       <Calendar />
     </div>
     {#if datepickerButtons}
@@ -64,5 +64,5 @@ $: setAttribute = (node, params) => {
 @prop export let datepickerOrientation: string = 'bottom';
 @prop export let datepickerTitle: string = 'Flowbite datepicker';
 @prop export let attribute: string = '';
-@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 -->

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -41,7 +41,7 @@ export type DatepickerSlots = typeof __propDef.slots;
  * @prop export let datepickerOrientation: string = 'bottom';
  * @prop export let datepickerTitle: string = 'Flowbite datepicker';
  * @prop export let attribute: string = '';
- * @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ * @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
  */
 export default class Datepicker extends SvelteComponent<DatepickerProps, DatepickerEvents, DatepickerSlots> {
 }

package/dist/drawer/Drawer.svelte

@@ -4,8 +4,8 @@ import { clickOutside } from '../utils/clickOutside';
 export let activateClickOutside = true;
 export let hidden = true;
 export let position = 'fixed';
-export let leftOffset = 'inset-y-0 left-0';
-export let rightOffset = 'inset-y-0 right-0';
+export let leftOffset = 'inset-y-0 start-0';
+export let rightOffset = 'inset-y-0 end-0';
 export let topOffset = 'inset-x-0 top-0';
 export let bottomOffset = 'inset-x-0 bottom-0';
 export let width = 'w-80';
@@ -39,7 +39,7 @@ const handleDrawer = () => {
     hidden = !hidden;
 };
 const handleClickOutside = () => activateClickOutside && !hidden && handleDrawer();
-let backdropDivClass = twMerge('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
+let backdropDivClass = twMerge('fixed top-0 start-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
 function clickOutsideWrapper(node, callback) {
     return activateClickOutside ? clickOutside(node, callback) : undefined;
 }
@@ -64,8 +64,8 @@ function clickOutsideWrapper(node, callback) {
 @prop export let activateClickOutside: boolean = true;
 @prop export let hidden: boolean = true;
 @prop export let position: 'fixed' | 'absolute' = 'fixed';
-@prop export let leftOffset: string = 'inset-y-0 left-0';
-@prop export let rightOffset: string = 'inset-y-0 right-0';
+@prop export let leftOffset: string = 'inset-y-0 start-0';
+@prop export let rightOffset: string = 'inset-y-0 end-0';
 @prop export let topOffset: string = 'inset-x-0 top-0';
 @prop export let bottomOffset: string = 'inset-x-0 bottom-0';
 @prop export let width: string = 'w-80';

package/dist/drawer/Drawer.svelte.d.ts

@@ -38,8 +38,8 @@ export type DrawerSlots = typeof __propDef.slots;
  * @prop export let activateClickOutside: boolean = true;
  * @prop export let hidden: boolean = true;
  * @prop export let position: 'fixed' | 'absolute' = 'fixed';
- * @prop export let leftOffset: string = 'inset-y-0 left-0';
- * @prop export let rightOffset: string = 'inset-y-0 right-0';
+ * @prop export let leftOffset: string = 'inset-y-0 start-0';
+ * @prop export let rightOffset: string = 'inset-y-0 end-0';
  * @prop export let topOffset: string = 'inset-x-0 top-0';
  * @prop export let bottomOffset: string = 'inset-x-0 bottom-0';
  * @prop export let width: string = 'w-80';

package/dist/footer/FooterBrand.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let aClass = 'flex items-center';
 export let spanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-export let imgClass = 'mr-3 h-8';
+export let imgClass = 'me-3 h-8';
 export let href = '';
 export let src = '';
 export let alt = '';
@@ -28,7 +28,7 @@ let imgCls = twMerge(imgClass, $$props.classImg);
 ## Props
 @prop export let aClass: string = 'flex items-center';
 @prop export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-@prop export let imgClass: string = 'mr-3 h-8';
+@prop export let imgClass: string = 'me-3 h-8';
 @prop export let href: string = '';
 @prop export let src: string = '';
 @prop export let alt: string = '';

package/dist/footer/FooterBrand.svelte.d.ts

@@ -26,7 +26,7 @@ export type FooterBrandSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let aClass: string = 'flex items-center';
  * @prop export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
- * @prop export let imgClass: string = 'mr-3 h-8';
+ * @prop export let imgClass: string = 'me-3 h-8';
  * @prop export let href: string = '';
  * @prop export let src: string = '';
  * @prop export let alt: string = '';