flowbite-svelte 0.44.19 → 0.44.21

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/dropdown/Dropdown.svelte.d.ts

@@ -9,8 +9,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/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA+EJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA+EJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

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

package/dist/footer/FooterCopyright.svelte

@@ -17,7 +17,7 @@ let aCls = twMerge(aClass, $$props.classA);
       {by}
     </a>
   {:else}
-    <span class="ml-1">{by}</span>
+    <span class="ms-1">{by}</span>
   {/if}
   {copyrightMessage}
 </span>

package/dist/footer/FooterLink.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from 'tailwind-merge';
-export let liClass = 'mr-4 last:mr-0 md:mr-6';
+export let liClass = 'me-4 last:me-0 md:me-6';
 export let aClass = 'hover:underline';
 export let href = '';
 export let target = undefined;
@@ -17,7 +17,7 @@ let aCls = twMerge(aClass, $$props.classA);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
+@prop export let liClass: string = 'me-4 last:me-0 md:me-6';
 @prop export let aClass: string = 'hover:underline';
 @prop export let href: string = '';
 @prop export let target: string | undefined = undefined;

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

@@ -20,7 +20,7 @@ export type FooterLinkSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
+ * @prop export let liClass: string = 'me-4 last:me-0 md:me-6';
  * @prop export let aClass: string = 'hover:underline';
  * @prop export let href: string = '';
  * @prop export let target: string | undefined = undefined;

package/dist/forms/Checkbox.svelte

@@ -9,7 +9,7 @@ export let inline = false;
 export let group = [];
 export let value = 'on';
 export let checked = undefined;
-export let spacing = 'mr-2';
+export let spacing = 'me-2';
 // tinted if put in component having its own background
 let background = getContext('background');
 // react on external group changes
@@ -60,5 +60,5 @@ function onChange() {
 @prop export let group: (string | number)[] = [];
 @prop export let value: string | number = 'on';
 @prop export let checked: boolean | undefined = undefined;
-@prop export let spacing: string = 'mr-2';
+@prop export let spacing: string = 'me-2';
 -->

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

@@ -42,7 +42,7 @@ export type CheckboxSlots = typeof __propDef.slots;
  * @prop export let group: (string | number)[] = [];
  * @prop export let value: string | number = 'on';
  * @prop export let checked: boolean | undefined = undefined;
- * @prop export let spacing: string = 'mr-2';
+ * @prop export let spacing: string = 'me-2';
  */
 export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
 }

package/dist/forms/FloatingLabelInput.svelte

@@ -45,9 +45,9 @@ const inputClasses = {
     standard: 'block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer'
 };
 const labelClasses = {
-    filled: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4',
-    outlined: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1',
-    standard: 'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6'
+    filled: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-left rtl:origin-right start-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4',
+    outlined: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-left rtl:origin-right bg-white dark:bg-gray-900 px-2 peer-focus:px-2  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1',
+    standard: 'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-left rtl:origin-right peer-focus:start-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6'
 };
 const inputColorClasses = {
     base: 'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600',

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,69 +1,64 @@
 <script>import Badge from '../badge/Badge.svelte';
-import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
-import { createEventDispatcher } from 'svelte';
-import { onMount } from 'svelte';
-const dispatch = createEventDispatcher();
+import { twMerge } from 'tailwind-merge';
 export let items = [];
 export let value = [];
 export let size = 'md';
 export let dropdownClass = '';
-let selectItems = [];
+let selectItems = items.filter((x) => value.includes(x.value));
 let show = false;
 const sizes = {
-    sm: 'px-2 py-1',
-    md: 'px-3 py-2',
-    lg: 'px-4 py-3'
+    sm: 'px-2 py-1 min-h-[2.4rem]',
+    md: 'px-3 py-1 min-h-[2.7rem]',
+    lg: 'px-4 py-2 min-h-[3.2rem]'
 };
 // Container
 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
 const itemsSelectClass = 'bg-gray-100 text-black hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
-onMount(() => {
-    if (value.length) {
-        items.map((item) => {
-            if (value.includes(item.value)) {
-                selectItems.push(item);
-            }
-        });
-    }
-});
 const selectOption = (select) => {
-    if (selectItems.includes(select)) {
+    if (value.includes(select.value)) {
         clearThisOption(select);
     }
     else {
-        selectItems.push(select);
-        value.push(select.value);
-        selectItems = selectItems;
-        value = value;
-        dispatch('selected', selectItems);
+        if (!value.includes(select.value))
+            value = [...value, select.value];
     }
 };
 const clearAll = (e) => {
     e.stopPropagation();
-    selectItems = [];
     value = [];
-    dispatch('selected', selectItems);
 };
 const clearThisOption = (select) => {
-    if (selectItems.includes(select)) {
-        selectItems = selectItems.filter((o) => o !== select);
-        dispatch('selected', selectItems);
-    }
     if (value.includes(select.value)) {
         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 {
+        update: (value) => {
+            selectItems = items.filter((x) => value.includes(x.value));
+            // avoid initial event emitting
+            if (value !== inital) {
+                node.dispatchEvent(create_custom_event('input', selectItems));
+                node.dispatchEvent(create_custom_event('change', selectItems));
+            }
+        }
+    };
+}
 </script>
 
 <!-- Hidden select for form submission -->
-<select {...$$restProps} bind:value hidden multiple on:change on:input>
+<select use:init={value} {...$$restProps} {value} hidden multiple on:change on:input>
   {#each items as { value, name }}
     <option {value}>{name}</option>
   {/each}
@@ -81,12 +76,12 @@ const clearThisOption = (select) => {
       {/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 on:click={clearAll} color="none" class="p-0 focus:ring-gray-400" />
+      <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

@@ -12,7 +12,6 @@ declare const __propDef: {
         change: Event;
         input: Event;
         click: MouseEvent;
-        selected: CustomEvent<any>;
     } & {
         [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;AAGD,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA8H/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/Textarea.svelte

@@ -14,7 +14,7 @@ let textareaClass;
 $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
 const headerClass = (header) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
 let innerWrapperClass;
-$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
+$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? '' : 'rounded-b-lg', $$slots.header ? '' : 'rounded-t-lg');
 </script>
 
 <Wrapper show={wrapped} class={wrapperClass}>

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/index.d.ts

@@ -133,6 +133,7 @@ export { default as Secondary } from "./typography/Secondary.svelte";
 export { default as Span } from "./typography/Span.svelte";
 export { default as CloseButton } from "./utils/CloseButton.svelte";
 export { default as Frame } from "./utils/Frame.svelte";
+export { default as TransitionFrame } from "./utils/TransitionFrame.svelte";
 export { default as Video } from "./video/Video.svelte";
 export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -220,6 +220,7 @@ export { default as Span } from './typography/Span.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';
 export { default as Frame } from './utils/Frame.svelte';
+export { default as TransitionFrame } from './utils/TransitionFrame.svelte';
 
 // video
 export { default as Video } from './video/Video.svelte';

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