flowbite-svelte 0.46.14 → 0.46.16

package/dist/accordion/AccordionItem.svelte

@@ -2,6 +2,7 @@
 import { getContext, onMount } from "svelte";
 import { writable } from "svelte/store";
 import { fade, blur, fly, slide } from "svelte/transition";
+export let tag = "h2";
 export let open = false;
 export let activeClass = void 0;
 export let inactiveClass = void 0;
@@ -47,7 +48,7 @@ $: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomCl
 $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush ? "" : borderOpenClass, borderBottomClass, borderSharedClass]);
 </script>
 
-<h2 class="group">
+<svelte:element this={tag} class="group">
   <button on:click={handleToggle} type="button" class={buttonClass} aria-expanded={open}>
     <slot name="header" />
     {#if open}
@@ -64,7 +65,7 @@ $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush
       </slot>
     {/if}
   </button>
-</h2>
+</svelte:element>
 {#if open}
   <div transition:multiple={transitionParams}>
     <div class={contentClass}>
@@ -77,6 +78,7 @@ $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let tag: string = 'h2';
 @prop export let open: boolean = false;
 @prop export let activeClass: string | undefined = undefined;
 @prop export let inactiveClass: string | undefined = undefined;

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

@@ -3,20 +3,21 @@ import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        open?: boolean;
+        tag?: string | undefined;
+        open?: boolean | undefined;
         activeClass?: string | undefined;
         inactiveClass?: string | undefined;
-        defaultClass?: string;
-        transitionType?: TransitionTypes;
-        transitionParams?: TransitionParamTypes;
-        paddingFlush?: string;
-        paddingDefault?: string;
-        textFlushOpen?: string;
-        textFlushDefault?: string;
-        borderClass?: string;
-        borderOpenClass?: string;
-        borderBottomClass?: string;
-        borderSharedClass?: string;
+        defaultClass?: string | undefined;
+        transitionType?: TransitionTypes | undefined;
+        transitionParams?: TransitionParamTypes | undefined;
+        paddingFlush?: string | undefined;
+        paddingDefault?: string | undefined;
+        textFlushOpen?: string | undefined;
+        textFlushDefault?: string | undefined;
+        borderClass?: string | undefined;
+        borderOpenClass?: string | undefined;
+        borderBottomClass?: string | undefined;
+        borderSharedClass?: string | undefined;
         classActive?: string | undefined;
         classInactive?: string | undefined;
     };
@@ -36,6 +37,7 @@ export type AccordionItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let tag: string = 'h2';
  * @prop export let open: boolean = false;
  * @prop export let activeClass: string | undefined = undefined;
  * @prop export let inactiveClass: string | undefined = undefined;

package/dist/avatar/Avatar.svelte

@@ -18,7 +18,7 @@ const sizes = {
   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 -ms-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 object-cover", $$props.class);
 </script>
 
 {#if !src || !!href || $$slots.default || dot}

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

@@ -2,14 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        src?: string;
+        src?: string | undefined;
         href?: string | undefined;
-        rounded?: boolean;
-        border?: boolean;
-        stacked?: boolean;
+        rounded?: boolean | undefined;
+        border?: boolean | undefined;
+        stacked?: boolean | undefined;
         dot?: object | undefined;
-        alt?: string;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
+        alt?: string | undefined;
+        size?: ("xs" | "sm" | "md" | "lg" | "xl" | "none") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/badge/Badge.svelte

@@ -52,14 +52,8 @@ const close = () => {
   badgeStatus = false;
 };
 const baseClass = "font-medium inline-flex items-center justify-center px-2.5 py-0.5";
-let badgeClass = twMerge(
-  baseClass,
-  large ? "text-sm" : "text-xs",
-  border ? `border ${borderedColors[color]}` : colors[color],
-  href && hoverColors[color],
-  rounded ? "rounded-full" : "rounded",
-  $$restProps.class
-);
+let badgeClass;
+$: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? "rounded-full" : "rounded", $$restProps.class);
 </script>
 
 {#if badgeStatus}
@@ -81,8 +75,7 @@ let badgeClass = twMerge(
           on:click={() => {
             badgeStatus = false;
             dispatcher('close');
-          }}
-        />
+          }} />
       </slot>
     {/if}
   </div>
@@ -92,14 +85,12 @@ let badgeClass = twMerge(
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let color: ColorVariant = 'primary'
-  export let large: boolean = false
-  export let dismissable: boolean = false
-  export let border: boolean = false
-  export let href: string = ''
-  export let rounded: boolean = false
-  export let transition = fade
-  export let params = {}
-
-  let badgeStatus: boolean = true;
+@prop export let color: ColorVariant = 'primary';
+@prop export let large: boolean = false;
+@prop export let dismissable: boolean = false;
+@prop export let border: boolean = false;
+@prop export let href: string = '';
+@prop export let rounded: boolean = false;
+@prop export let transition = fade;
+@prop export let params = {};
 -->

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

@@ -4,14 +4,14 @@ import { fade } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: ColorVariant;
-        large?: boolean;
-        dismissable?: boolean;
-        border?: boolean;
-        href?: string;
-        rounded?: boolean;
-        transition?: typeof fade;
-        params?: {};
+        color?: ColorVariant | undefined;
+        large?: boolean | undefined;
+        dismissable?: boolean | undefined;
+        border?: boolean | undefined;
+        href?: string | undefined;
+        rounded?: boolean | undefined;
+        transition?: typeof fade | undefined;
+        params?: {} | undefined;
     };
     events: {
         close: CustomEvent<any>;
@@ -31,16 +31,14 @@ export type BadgeSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let color: ColorVariant = 'primary'
- * export let large: boolean = false
- * export let dismissable: boolean = false
- * export let border: boolean = false
- * export let href: string = ''
- * export let rounded: boolean = false
- * export let transition = fade
- * export let params = {}
- *
- * let badgeStatus: boolean = true;
+ * @prop export let color: ColorVariant = 'primary';
+ * @prop export let large: boolean = false;
+ * @prop export let dismissable: boolean = false;
+ * @prop export let border: boolean = false;
+ * @prop export let href: string = '';
+ * @prop export let rounded: boolean = false;
+ * @prop export let transition = fade;
+ * @prop export let params = {};
  */
 export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
 }

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

@@ -3,14 +3,14 @@ import { type TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
-        dismissable?: boolean;
-        bannerType?: "default" | "bottom" | "cta" | "signup" | "info";
-        divClass?: string;
-        innerClass?: string;
-        bannerStatus?: boolean;
-        transition?: (node: HTMLElement, params: any) => TransitionConfig;
-        params?: {};
+        position?: ("static" | "fixed" | "absolute" | "relative" | "sticky") | undefined;
+        dismissable?: boolean | undefined;
+        bannerType?: ("default" | "bottom" | "cta" | "signup" | "info") | undefined;
+        divClass?: string | undefined;
+        innerClass?: string | undefined;
+        bannerStatus?: boolean | undefined;
+        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
+        params?: {} | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/bottom-navigation/BottomNav.svelte.d.ts

@@ -5,12 +5,12 @@ export type BottomNavType = {
 declare const __propDef: {
     props: {
         [x: string]: any;
-        activeUrl?: string;
-        position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
-        navType?: "default" | "border" | "application" | "pagination" | "group" | "card" | "meeting" | "video";
-        outerClass?: string;
-        innerClass?: string;
-        activeClass?: string;
+        activeUrl?: string | undefined;
+        position?: ("static" | "fixed" | "absolute" | "relative" | "sticky") | undefined;
+        navType?: ("default" | "border" | "application" | "pagination" | "group" | "card" | "meeting" | "video") | undefined;
+        outerClass?: string | undefined;
+        innerClass?: string | undefined;
+        activeClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        outerClass?: string;
-        innerClass?: string;
+        outerClass?: string | undefined;
+        innerClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        itemName?: string;
-        active?: boolean;
-        defaultClass?: string;
-        activeClass?: string;
+        itemName?: string | undefined;
+        active?: boolean | undefined;
+        defaultClass?: string | undefined;
+        activeClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        btnName?: string;
-        appBtnPosition?: "left" | "middle" | "right";
+        btnName?: string | undefined;
+        appBtnPosition?: ("left" | "middle" | "right") | undefined;
         activeClass?: string | undefined;
-        href?: string;
-        exact?: boolean;
-        spanClass?: string;
+        href?: string | undefined;
+        exact?: boolean | undefined;
+        spanClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        solid?: boolean;
-        navClass?: string;
-        solidClass?: string;
-        olClass?: string;
-        ariaLabel?: string;
+        solid?: boolean | undefined;
+        navClass?: string | undefined;
+        solidClass?: string | undefined;
+        olClass?: string | undefined;
+        ariaLabel?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        home?: boolean;
+        home?: boolean | undefined;
         href?: string | undefined;
-        linkClass?: string;
-        spanClass?: string;
-        homeClass?: string;
+        linkClass?: string | undefined;
+        spanClass?: string | undefined;
+        homeClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/button-group/ButtonGroup.svelte.d.ts

@@ -3,8 +3,8 @@ import type { SizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        size?: SizeType;
-        divClass?: string;
+        size?: SizeType | undefined;
+        divClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,16 +3,16 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        pill?: boolean;
-        outline?: boolean;
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        pill?: boolean | undefined;
+        outline?: boolean | undefined;
+        size?: ("xs" | "sm" | "md" | "lg" | "xl") | undefined;
         href?: string | undefined;
         type?: HTMLButtonAttributes["type"];
-        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
-        shadow?: boolean;
-        tag?: string;
+        color?: ("red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative") | undefined;
+        shadow?: boolean | undefined;
+        tag?: string | undefined;
         checked?: boolean | undefined;
-        disabled?: boolean;
+        disabled?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "red" | "green" | "purple" | "pink" | "blue" | "teal" | "cyan" | "lime" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow";
-        shadow?: boolean;
+        color?: ("red" | "green" | "purple" | "pink" | "blue" | "teal" | "cyan" | "lime" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow") | undefined;
+        shadow?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -15,13 +15,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         images: HTMLImgAttributes[];
-        index?: number;
-        slideDuration?: number;
-        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | null;
-        duration?: number;
-        ariaLabel?: string;
-        disableSwipe?: boolean;
-        imgClass?: string;
+        index?: number | undefined;
+        slideDuration?: number | undefined;
+        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
+        duration?: number | undefined;
+        ariaLabel?: string | undefined;
+        disableSwipe?: boolean | undefined;
+        imgClass?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -3,8 +3,8 @@ import Indicator from '../indicators/Indicator.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        activeClass?: string;
-        inactiveClass?: string;
+        activeClass?: string | undefined;
+        inactiveClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         image: HTMLImgAttributes;
-        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | null;
+        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        selected?: boolean;
-        activeClass?: string;
-        inactiveClass?: string;
+        selected?: boolean | undefined;
+        activeClass?: string | undefined;
+        inactiveClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,11 +4,11 @@ import Thumbnail from './Thumbnail.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        images?: HTMLImgAttributes[];
-        index?: number;
-        ariaLabel?: string;
-        imgClass?: string;
-        throttleDelay?: number;
+        images?: HTMLImgAttributes[] | undefined;
+        index?: number | undefined;
+        ariaLabel?: string | undefined;
+        imgClass?: string | undefined;
+        throttleDelay?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/charts/Chart.svelte

@@ -1,6 +1,6 @@
 <script>export let options;
+export let chart;
 function initChart(node, options2) {
-  let chart;
   async function asyncInitChart() {
     const ApexCharts = (await import("apexcharts")).default;
     chart = new ApexCharts(node, options2);
@@ -25,4 +25,5 @@ function initChart(node, options2) {
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let options: ApexOptions;
+@prop export let chart: ApexCharts;
 -->

package/dist/charts/Chart.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         options: ApexOptions;
+        chart: ApexCharts;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +18,7 @@ export type ChartSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let options: ApexOptions;
+ * @prop export let chart: ApexCharts;
  */
 export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
 }

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        btnClass?: string;
-        size?: "sm" | "md" | "lg";
-        ariaLabel?: string;
+        btnClass?: string | undefined;
+        size?: ("sm" | "md" | "lg") | undefined;
+        ariaLabel?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -13,13 +13,13 @@ declare module 'svelte/elements' {
 declare const __propDef: {
     props: {
         [x: string]: any;
-        range?: boolean;
-        datepickerButtons?: boolean;
-        datepickerFormat?: string;
-        datepickerOrientation?: string;
-        datepickerTitle?: string;
-        attribute?: string;
-        inputClass?: string;
+        range?: boolean | undefined;
+        datepickerButtons?: boolean | undefined;
+        datepickerFormat?: string | undefined;
+        datepickerOrientation?: string | undefined;
+        datepickerTitle?: string | undefined;
+        attribute?: string | undefined;
+        inputClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Android.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftMid?: string;
-        leftBot?: string;
-        right?: string;
+        div?: string | undefined;
+        slot?: string | undefined;
+        top?: string | undefined;
+        leftTop?: string | undefined;
+        leftMid?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/DefaultMockup.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftBot?: string;
-        right?: string;
+        div?: string | undefined;
+        slot?: string | undefined;
+        top?: string | undefined;
+        leftTop?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Desktop.svelte.d.ts

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        inner?: string;
-        bot?: string;
-        botUnder?: string;
-        div?: string;
+        inner?: string | undefined;
+        bot?: string | undefined;
+        botUnder?: string | undefined;
+        div?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Ios.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftBot?: string;
-        right?: string;
+        div?: string | undefined;
+        slot?: string | undefined;
+        top?: string | undefined;
+        leftTop?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Laptop.svelte.d.ts

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        div?: string;
-        inner?: string;
-        bot?: string;
-        botCen?: string;
+        div?: string | undefined;
+        inner?: string | undefined;
+        bot?: string | undefined;
+        botCen?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Smartwatch.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        div?: string;
-        slot?: string;
-        rightTop?: string;
-        rightBot?: string;
-        top?: string;
-        bot?: string;
+        div?: string | undefined;
+        slot?: string | undefined;
+        rightTop?: string | undefined;
+        rightBot?: string | undefined;
+        top?: string | undefined;
+        bot?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;