flowbite-svelte 0.47.2 → 0.47.3

package/dist/banner/Banner.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { HTMLAttributes } from 'svelte/elements';
 import { type TransitionConfig } from 'svelte/transition';
+import type { ParamsType } from '../types';
 declare const __propDef: {
     props: HTMLAttributes<HTMLDivElement> & {
         position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
@@ -9,7 +10,7 @@ declare const __propDef: {
         divClass?: string;
         innerClass?: string;
         bannerStatus?: boolean;
-        transition?: (node: HTMLElement, params: any) => TransitionConfig;
+        transition?: (node: HTMLElement, params: ParamsType) => TransitionConfig;
         params?: object;
         classDiv?: string;
         classInner?: string;

package/dist/buttons/Button.svelte

@@ -107,6 +107,10 @@ $: buttonClass = twMerge(
   <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 === 'label'}
+  <label {...$$restProps} class={buttonClass}>
+    <slot />
+  </label>
 {:else if tag === 'button' }
   <button {type} {...$$restProps} {disabled} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & Omit<HTMLAnchorAttributes, "type"> & {
         href?: string | undefined;
@@ -17,7 +17,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & HTMLButtonAttributes & {
         disabled?: HTMLButtonAttributes["disabled"];

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

@@ -11,13 +11,14 @@ import type { TransitionConfig } from 'svelte/transition';
 import Controls from './Controls.svelte';
 import Indicators from './Indicators.svelte';
 import Slide from './Slide.svelte';
+import type { ParamsType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         images: HTMLImgAttributes[];
         index?: number | undefined;
         slideDuration?: number | undefined;
-        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
+        transition?: (((node: HTMLElement, params: ParamsType) => TransitionConfig) | null) | undefined;
         duration?: number | undefined;
         ariaLabel?: string | undefined;
         disableSwipe?: boolean | undefined;

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

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import type { HTMLImgAttributes } from 'svelte/elements';
 import { type TransitionConfig } from 'svelte/transition';
+import type { ParamsType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         image: HTMLImgAttributes;
-        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
+        transition?: (((node: HTMLElement, params: ParamsType) => TransitionConfig) | null) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousel/Thumbnails.svelte

@@ -23,7 +23,6 @@ $: index = (index + images.length) % images.length;
 <div class={twMerge('flex flex-row justify-center bg-gray-100 w-full', $$props.class)}>
   {#each images as image, idx}
     {@const selected = index === idx}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <button on:click={() => btnClick(idx)} aria-label={ariaLabel}>
       <slot {Thumbnail} {image} {selected} {imgClass}>
         <Thumbnail {...image} {selected} class={imgClass} />

package/dist/datepicker/Datepicker.svelte

@@ -21,6 +21,7 @@ export let title = "";
 const dispatch = createEventDispatcher();
 let isOpen = inline;
 let inputElement;
+let datepickerContainerElement;
 let currentMonth = value || defaultDate || /* @__PURE__ */ new Date();
 let focusedDate = null;
 let calendarRef;
@@ -128,7 +129,7 @@ function handleInputChange() {
   }
 }
 function handleClickOutside(event) {
-  if (isOpen && !inputElement.contains(event.target)) {
+  if (isOpen && datepickerContainerElement && !datepickerContainerElement.contains(event.target)) {
     isOpen = false;
   }
 }
@@ -212,7 +213,7 @@ function handleApply() {
 }
 </script>
 
-<div class="relative {inline ? 'inline-block' : ''}">
+<div bind:this={datepickerContainerElement} class="relative {inline ? 'inline-block' : ''}">
   {#if !inline}
     <div class="relative">
       <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & Omit<import("svelte/elements").HTMLAnchorAttributes, "type"> & {
         href?: string | undefined;
@@ -17,7 +17,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & import("svelte/elements").HTMLButtonAttributes & {
         disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];

package/dist/forms/Fileupload.svelte

@@ -1,12 +1,41 @@
 <script>import { twMerge } from "tailwind-merge";
 import Input from "./Input.svelte";
+import { CloseButton } from "..";
 export let files = void 0;
 export let inputClass = "border !p-0 dark:text-gray-400";
+export let clearable = false;
+export let size = "md";
+const base = "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border !p-0 dark:text-gray-400";
+const wrapper = "relative w-full";
+const right = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5";
+const sizes = {
+  sm: "text-xs ps-9 pe-9 p-2",
+  md: "text-sm ps-10 pe-10 p-2.5",
+  lg: "sm:text-base ps-11 pe-11 p-3"
+};
+let fileInputRef;
+const clearAll = () => {
+  if (fileInputRef) {
+    fileInputRef.value = "";
+    files = void 0;
+  }
+};
+$: hasFiles = files && files.length > 0;
+let inputCls = twMerge(base, sizes[size ?? "md"], inputClass);
 </script>
 
-<Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
-  <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:files {...props} />
-</Input>
+{#if clearable}
+  <div class={wrapper}>
+    <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:files {...$$restProps} class={inputCls} bind:this={fileInputRef} />
+    {#if hasFiles}
+      <CloseButton on:click={clearAll} class={right} />
+    {/if}
+  </div>
+{:else}
+  <Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
+    <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:files {...props} />
+  </Input>
+{/if}
 
 <!--
 @component
@@ -14,4 +43,6 @@ export let inputClass = "border !p-0 dark:text-gray-400";
 ## Props
 @prop export let files: $$Props['files'] = undefined;
 @prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
+@prop export let clearable: $$Props['clearable'] = false;
+@prop export let size: $$Props['size'] = 'md';
 -->

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

@@ -13,6 +13,8 @@ declare const __propDef: {
     } & {
         files?: FileList | undefined;
         inputClass?: string;
+        clearable?: boolean;
+        size?: "sm" | "md" | "lg";
     };
     events: {
         change: Event;
@@ -39,6 +41,8 @@ export type FileuploadSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let files: $$Props['files'] = undefined;
  * @prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
+ * @prop export let clearable: $$Props['clearable'] = false;
+ * @prop export let size: $$Props['size'] = 'md';
  */
 export default class Fileupload extends SvelteComponentTyped<FileuploadProps, FileuploadEvents, FileuploadSlots> {
 }

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         type?: InputType;
         size?: "small" | "default";
         color?: "base" | "green" | "red";
-        value?: any;
+        value?: string | number | readonly string[] | undefined;
         classDiv?: string;
         classInput?: string;
         classLabel?: string;

package/dist/forms/Label.svelte

@@ -17,7 +17,6 @@ $: labelClass = twMerge(defaultClass, colorClasses[color], $$props.class);
 </script>
 
 {#if show}
-  <!-- svelte-ignore a11y-label-has-associated-control -->
   <label bind:this={node} {...$$restProps} class={labelClass}><slot /></label>
 {:else}
   <slot />

package/dist/forms/MultiSelect.svelte

@@ -105,7 +105,6 @@ function handleKeyDown(event) {
     <option {value} {disabled}>{name}</option>
   {/each}
 </select>
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click={() => !disabled && (show = !show)} on:focusout={() => !disabled && (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class, !disabled && "focus-within:ring-1 focus-within:border-primary-500 dark:focus-within:border-primary-500", disabled && "opacity-50 cursor-not-allowed")}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
@@ -134,7 +133,6 @@ function handleKeyDown(event) {
   {#if show}
     <div on:click|stopPropagation role="presentation" class={multiSelectDropdown}>
       {#each items as item (item.name)}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div on:click={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectItems.includes(item) && itemsSelectClass, activeItem === item && activeItemClass, disabled && "pointer-events-none", item.disabled && "opacity-50 cursor-not-allowed")}>
           {item.name}
         </div>

package/dist/forms/Radio.svelte

@@ -30,7 +30,7 @@ $: if (checked && group === void 0) {
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" bind:group={group} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
+  <input type="radio" {...$$restProps} bind:group={group} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 

package/dist/forms/RadioButton.svelte

@@ -12,7 +12,7 @@ let buttonClass;
 $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 </script>
 
-<Button checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     type="radio"
     bind:group

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: HTMLTextareaAttributes & {
-        value?: any;
+        value?: string;
         wrappedClass?: string;
         unWrappedClass?: string;
         innerWrappedClass?: string;

package/dist/forms/Toggle.svelte

@@ -7,6 +7,7 @@ export let value = "";
 export let checked = void 0;
 export let customSize = "";
 export let classDiv = "";
+export let disabled = false;
 let background = getContext("background");
 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 = {
@@ -28,9 +29,11 @@ const sizes = {
 };
 let divClass;
 $: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? "dark:bg-gray-600 dark:border-gray-500" : "dark:bg-gray-700 dark:border-gray-600", colors[$$restProps.color ?? "primary"], sizes[size], "relative", classDiv);
+let checkboxCls;
+$: checkboxCls = disabled ? "cursor-not-allowed grayscale contrast-50 text-gray-400" : "cursor-pointer text-gray-900";
 </script>
 
-<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+<Checkbox custom {...$$restProps} {disabled} class={twMerge(checkboxCls, $$props.class)} {value} bind:checked bind:group on:click on:change>
   <slot name="offLabel"></slot>
   <span class={divClass}></span>
   <slot></slot>
@@ -46,4 +49,5 @@ $: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? "dark
 @prop export let checked: $$Props['checked'] = undefined;
 @prop export let customSize: $$Props['customSize'] = '';
 @prop export let classDiv: string = '';
+@prop export let disabled: $$Props['disabled'] = false;
 -->

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

@@ -21,6 +21,7 @@ declare const __propDef: {
         checked?: boolean;
         customSize?: string;
         classDiv?: string;
+        disabled?: boolean;
     };
     events: {
         click: MouseEvent;
@@ -45,6 +46,7 @@ export type ToggleSlots = typeof __propDef.slots;
  * @prop export let checked: $$Props['checked'] = undefined;
  * @prop export let customSize: $$Props['customSize'] = '';
  * @prop export let classDiv: string = '';
+ * @prop export let disabled: $$Props['disabled'] = false;
  */
 export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }

package/dist/pagination/PaginationItem.svelte

@@ -19,7 +19,6 @@ $: defaultClass = twMerge(
 );
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <svelte:element this={href ? 'a' : 'button'} {href} class={defaultClass} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover role={href ? 'button' : undefined}>
   <slot />
 </svelte:element>

package/dist/speed-dial/SpeedDial.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & Omit<import("svelte/elements").HTMLAnchorAttributes, "type"> & {
         href?: string | undefined;
@@ -22,7 +22,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & import("svelte/elements").HTMLButtonAttributes & {
         disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];

package/dist/speed-dial/SpeedDialButton.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & Omit<import("svelte/elements").HTMLAnchorAttributes, "type"> & {
         href?: string | undefined;
@@ -17,7 +17,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & import("svelte/elements").HTMLButtonAttributes & {
         disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];

package/dist/steps/StepIndicator.svelte

@@ -33,11 +33,13 @@ const currentStepColors = {
   blue: "bg-blue-800 dark:bg-blue-400",
   custom: currentCustom
 };
+$: safeCurrentStep = Math.max(1, Math.min(currentStep, steps.length));
+$: currentStepLabel = steps[safeCurrentStep - 1] ?? "Unknown Step";
 </script>
 
 <div {...$$restProps} class={twMerge('space-y-2 dark:text-white', $$props.class)}>
   {#if !hideLabel}
-    <h3 class="text-base font-semibold">{steps[currentStep - 1]}</h3>
+    <h3 class="text-base font-semibold">{currentStepLabel}</h3>
   {/if}
   <div class={twJoin('flex justify-between gap-2 w-full', size)}>
     {#each steps as step, i}
@@ -61,12 +63,12 @@ const currentStepColors = {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let steps: $$Props['steps'] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-@prop export let currentStep: $$Props['currentStep'] = 1;
-@prop export let size: $$Props['size'] = 'h-2.5';
-@prop export let color: $$Props['color'] = 'primary';
-@prop export let glow: $$Props['glow'] = false;
-@prop export let hideLabel: $$Props['hideLabel'] = false;
-@prop export let completedCustom: $$Props['completedCustom'] = '';
-@prop export let currentCustom: $$Props['currentCustom'] = '';
+@prop export let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+@prop export let currentStep = 1;
+@prop export let size = 'h-2.5';
+@prop export let color: ColorType = 'primary';
+@prop export let glow = false;
+@prop export let hideLabel = false;
+@prop export let completedCustom = '';
+@prop export let currentCustom = '';
 -->

package/dist/steps/StepIndicator.svelte.d.ts

@@ -4,12 +4,12 @@ declare const __propDef: {
     props: HTMLAttributes<HTMLElement> & {
         steps: string[];
         currentStep: number;
-        size: string;
-        color: "primary" | "secondary" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "custom";
-        glow: boolean;
-        hideLabel: boolean;
-        completedCustom: string;
-        currentCustom: string;
+        size?: string;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "primary" | "secondary" | "custom";
+        glow?: boolean;
+        hideLabel?: boolean;
+        completedCustom?: string;
+        currentCustom?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,14 +22,14 @@ export type StepIndicatorSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let steps: $$Props['steps'] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
- * @prop export let currentStep: $$Props['currentStep'] = 1;
- * @prop export let size: $$Props['size'] = 'h-2.5';
- * @prop export let color: $$Props['color'] = 'primary';
- * @prop export let glow: $$Props['glow'] = false;
- * @prop export let hideLabel: $$Props['hideLabel'] = false;
- * @prop export let completedCustom: $$Props['completedCustom'] = '';
- * @prop export let currentCustom: $$Props['currentCustom'] = '';
+ * @prop export let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+ * @prop export let currentStep = 1;
+ * @prop export let size = 'h-2.5';
+ * @prop export let color: ColorType = 'primary';
+ * @prop export let glow = false;
+ * @prop export let hideLabel = false;
+ * @prop export let completedCustom = '';
+ * @prop export let currentCustom = '';
  */
 export default class StepIndicator extends SvelteComponentTyped<StepIndicatorProps, StepIndicatorEvents, StepIndicatorSlots> {
 }

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { FadeParams, BlurParams, FlyParams, SlideParams, ScaleParams } from 'svelte/transition';
 export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
 export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none';
 export type CheckboxItem = {
@@ -16,6 +17,7 @@ export type IndicatorPlacementType = 'top-left' | 'top-center' | 'top-right' | '
 export type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
 export type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange' | 'primary' | 'secondary';
 export type ModalPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ParamsType = FadeParams | BlurParams | FlyParams | SlideParams | ScaleParams;
 export type PsizeType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
 export type PweightType = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
 export type TableColorType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'indigo' | 'pink' | 'default' | 'custom';

package/dist/utils/backdrop.js

@@ -2,18 +2,9 @@ import { createEventDispatcher } from 'svelte';
 export let open = false;
 const backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
 export let placement;
-// const placement:
-// 		| 'top-left'
-// 		| 'top-center'
-// 		| 'top-right'
-// 		| 'center-left'
-// 		| 'center'
-// 		| 'center-right'
-// 		| 'bottom-left'
-// 		| 'bottom-center'
-// 		| 'bottom-right'='center';
 export const init = (node, _open) => {
     getPlacementClasses().map((c) => node.classList.add(c));
+    /* eslint-disable  @typescript-eslint/no-unused-expressions */
     _open && createBackdrop(node);
     return {
         update(_open) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.47.2",
+  "version": "0.47.3",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -15,19 +15,19 @@
     "@changesets/cli": "2.27.9",
     "@docsearch/css": "^3.6.2",
     "@docsearch/js": "^3.6.2",
-    "@playwright/test": "^1.48.1",
-    "@sveltejs/adapter-vercel": "^5.4.5",
-    "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/package": "2.3.2",
+    "@playwright/test": "^1.48.2",
+    "@sveltejs/adapter-vercel": "^5.4.6",
+    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/package": "2.3.7",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@types/eslint": "^8.56.12",
+    "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
-    "esbuild": "0.23.1",
-    "eslint": "^9.12.0",
+    "esbuild": "0.24.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
+    "eslint-plugin-svelte": "^2.46.0",
     "flowbite-svelte-icons": "^1.6.2",
     "globals": "^15.11.0",
     "mdsvex": "^0.12.3",
@@ -36,7 +36,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "prism-themes": "^1.9.0",
-    "publint": "^0.2.11",
+    "publint": "^0.2.12",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.5",
     "svelte-lib-helpers": "^0.4.16",
@@ -47,9 +47,9 @@
     "tailwindcss": "^3.4.14",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "8.4.0",
-    "vite": "^5.4.9",
-    "vitest": "^1.6.0"
+    "typescript-eslint": "8.11.0",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.4"
   },
   "peerDependencies": {
     "svelte": "^3.55.1 || ^4.0.0 || ^5.0.0"