flowbite-svelte 0.47.1 → 0.47.3

package/dist/forms/Toggle.svelte

@@ -6,6 +6,8 @@ export let group = [];
 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 = {
@@ -26,10 +28,12 @@ const sizes = {
   custom: customSize
 };
 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", $$props.classDiv);
+$: 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>
@@ -44,4 +48,6 @@ $: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? "dark
 @prop export let value: $$Props['value'] = '';
 @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

@@ -20,6 +20,8 @@ declare const __propDef: {
         value?: string | number;
         checked?: boolean;
         customSize?: string;
+        classDiv?: string;
+        disabled?: boolean;
     };
     events: {
         click: MouseEvent;
@@ -43,6 +45,8 @@ export type ToggleSlots = typeof __propDef.slots;
  * @prop export let value: $$Props['value'] = '';
  * @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/mega-menu/MegaMenu.svelte

@@ -5,7 +5,7 @@ export let full = false;
 export let open = false;
 export let ulClass = "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max";
 let wrapperClass;
-$: wrapperClass = twMerge(full && "border-y w-full", $$props.class);
+$: wrapperClass = twMerge(full && "border-y w-full !ml-0", $$props.class);
 let ulCls;
 $: ulCls = twMerge(ulClass, full && $$slots.extra ? "grid-cols-2" : "grid-cols-2 md:grid-cols-3", "text-sm font-medium", full && $$slots.extra && "md:w-2/3", $$props.classUl);
 </script>

package/dist/navbar/NavHamburger.svelte

@@ -5,13 +5,14 @@ import ToolbarButton from "../toolbar/ToolbarButton.svelte";
 import Menu from "./Menu.svelte";
 export let menuClass = "h-6 w-6 shrink-0";
 export let onClick = void 0;
+export let classMenu = "";
 let btnClass = "ms-3 md:hidden";
 let hiddenStore = getContext("navHidden") ?? writable(true);
 const toggle = (ev) => hiddenStore.update((h) => !h);
 </script>
 
 <ToolbarButton name="Open main menu" on:click={onClick || toggle} {...$$restProps} class={twMerge(btnClass, $$props.class)}>
-  <Menu class={twMerge(menuClass, $$props.classMenu)} />
+  <Menu class={twMerge(menuClass, classMenu)} />
 </ToolbarButton>
 
 <!--
@@ -20,4 +21,5 @@ const toggle = (ev) => hiddenStore.update((h) => !h);
 ## Props
 @prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
 @prop export let onClick: $$Props['onClick'] = undefined;
+@prop export let classMenu: $$Props['classMenu'] = '';
 -->

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
     } & import("svelte/elements").HTMLButtonAttributes)) & {
         menuClass?: string;
         onClick?: (() => void) | undefined;
+        classMenu?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -29,6 +30,7 @@ export type NavHamburgerSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
  * @prop export let onClick: $$Props['onClick'] = undefined;
+ * @prop export let classMenu: $$Props['classMenu'] = '';
  */
 export default class NavHamburger extends SvelteComponentTyped<NavHamburgerProps, NavHamburgerEvents, NavHamburgerSlots> {
 }

package/dist/navbar/NavUl.svelte

@@ -13,6 +13,7 @@ export let hidden = void 0;
 export let slideParams = { delay: 250, duration: 500, easing: sineIn };
 export let activeClass = "text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent";
 export let nonActiveClass = "text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent";
+export let classUl = "";
 const activeUrlStore = writable("");
 setContext("navbarContext", { activeClass, nonActiveClass });
 $: {
@@ -25,11 +26,7 @@ $: _hidden = hidden ?? $hiddenStore ?? true;
 let _divClass;
 $: _divClass = twMerge(divClass, $$props.class);
 let _ulClass;
-$: _ulClass = twMerge(
-  ulClass,
-  // 'divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-700',
-  $$props.classUl
-);
+$: _ulClass = twMerge(ulClass, classUl);
 </script>
 
 {#if !_hidden}
@@ -57,4 +54,5 @@ $: _ulClass = twMerge(
 @prop export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
 @prop export let activeClass: NonNullable<$$Props['activeClass']> = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
 @prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+@prop export let classUl: string = '';
 -->

package/dist/navbar/NavUl.svelte.d.ts

@@ -37,6 +37,7 @@ export type NavUlSlots = typeof __propDef.slots;
  * @prop export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
  * @prop export let activeClass: NonNullable<$$Props['activeClass']> = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
  * @prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+ * @prop export let classUl: string = '';
  */
 export default class NavUl extends SvelteComponentTyped<NavUlProps, NavUlEvents, NavUlSlots> {
 }

package/dist/navbar/Navbar.svelte

@@ -4,6 +4,7 @@ import { twMerge } from "tailwind-merge";
 import NavContainer from "./NavContainer.svelte";
 import { writable } from "svelte/store";
 export let fluid = false;
+export let navContainerClass = "";
 let hidden = writable(true);
 setContext("navHidden", hidden);
 $: {
@@ -13,7 +14,7 @@ let toggle = () => hidden.update((hidden2) => !hidden2);
 </script>
 
 <Frame tag="nav" {...$$restProps} class={twMerge('px-2 sm:px-4 py-2.5 w-full', $$props.class)}>
-  <NavContainer {fluid}>
+  <NavContainer {fluid} class={navContainerClass}>
     <slot hidden={$hidden} {toggle} {NavContainer} />
   </NavContainer>
 </Frame>
@@ -23,4 +24,5 @@ let toggle = () => hidden.update((hidden2) => !hidden2);
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let fluid: $$Props['fluid'] = false;
+@prop export let navContainerClass: string= '';
 -->

package/dist/navbar/Navbar.svelte.d.ts

@@ -36,6 +36,7 @@ export type NavbarSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let fluid: $$Props['fluid'] = false;
+ * @prop export let navContainerClass: string= '';
  */
 export default class Navbar extends SvelteComponentTyped<NavbarProps, NavbarEvents, NavbarSlots> {
 }

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/progress/Progressbar.svelte

@@ -13,6 +13,7 @@ export let color = "primary";
 export let labelInsideClass = "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
 export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
 export let progressClass = "";
+export let classLabelOutside = "";
 const _progress = tweened(0, {
   duration: animate ? tweenDuration : 0,
   easing
@@ -31,7 +32,7 @@ $: _progress.set(Number(progress));
 </script>
 
 {#if labelOutside}
-  <div {...$$restProps} class={twMerge('flex justify-between mb-1', $$props.classLabelOutside)}>
+  <div {...$$restProps} class={twMerge('flex justify-between mb-1', classLabelOutside)}>
     <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
     <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
   </div>
@@ -62,4 +63,5 @@ $: _progress.set(Number(progress));
 @prop export let labelInsideClass: $$Props['labelInsideClass'] = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 @prop export let divClass: $$Props['divClass'] = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
 @prop export let progressClass: $$Props['progressClass'] = '';
+@prop export let classLabelOutside: $$Props['classLabelOutside'] = '';
 -->

package/dist/progress/Progressbar.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         labelInsideClass?: string;
         divClass?: string;
         progressClass?: string;
+        classLabelOutside?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -39,6 +40,7 @@ export type ProgressbarSlots = typeof __propDef.slots;
  * @prop export let labelInsideClass: $$Props['labelInsideClass'] = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
  * @prop export let divClass: $$Props['divClass'] = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
  * @prop export let progressClass: $$Props['progressClass'] = '';
+ * @prop export let classLabelOutside: $$Props['classLabelOutside'] = '';
  */
 export default class Progressbar extends SvelteComponentTyped<ProgressbarProps, ProgressbarEvents, ProgressbarSlots> {
 }

package/dist/rating/AdvancedRating.svelte

@@ -6,11 +6,16 @@ export let ratingDivClass = "mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700
 export let ratingClass = "h-5 bg-yellow-400 rounded";
 export let rightLabelClass = "text-sm font-medium text-gray-600 dark:text-gray-500";
 export let unit = "%";
-let divCls = twMerge(divClass, $$props.classDiv);
-let labelCls = twMerge(labelClass, $$props.classLabel);
-let ratingDivCls = twMerge(ratingDivClass, $$props.classRatingDiv);
-let ratingCls = twMerge(ratingClass, $$props.classRating);
-let rightLabelCls = twMerge(rightLabelClass, $$props.classRightLabel);
+export let classDiv = "";
+export let classLabel = "";
+export let classRatingDiv = "";
+export let classRating = "";
+export let classRightLabel = "";
+let divCls = twMerge(divClass, classDiv);
+let labelCls = twMerge(labelClass, classLabel);
+let ratingDivCls = twMerge(ratingDivClass, classRatingDiv);
+let ratingCls = twMerge(ratingClass, classRating);
+let rightLabelCls = twMerge(rightLabelClass, classRightLabel);
 </script>
 
 {#if $$slots.rating}
@@ -40,4 +45,9 @@ let rightLabelCls = twMerge(rightLabelClass, $$props.classRightLabel);
 @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
 @prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
 @prop export let unit: string = '%';
+@prop export let classDiv: string = '';
+@prop export let classLabel: string = '';
+@prop export let classRatingDiv: string = '';
+@prop export let classRating: string = '';
+@prop export let classRightLabel: string = '';
 -->

package/dist/rating/AdvancedRating.svelte.d.ts

@@ -1,17 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
         ratings?: {
             label: string;
             rating: number;
-        }[] | undefined;
-        divClass?: string | undefined;
-        labelClass?: string | undefined;
-        ratingDivClass?: string | undefined;
-        ratingClass?: string | undefined;
-        rightLabelClass?: string | undefined;
-        unit?: string | undefined;
+        }[];
+        divClass?: string;
+        labelClass?: string;
+        ratingDivClass?: string;
+        ratingClass?: string;
+        rightLabelClass?: string;
+        unit?: string;
+        classDiv?: string;
+        classLabel?: string;
+        classRatingDiv?: string;
+        classRating?: string;
+        classRightLabel?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -34,6 +38,11 @@ export type AdvancedRatingSlots = typeof __propDef.slots;
  * @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
  * @prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
  * @prop export let unit: string = '%';
+ * @prop export let classDiv: string = '';
+ * @prop export let classLabel: string = '';
+ * @prop export let classRatingDiv: string = '';
+ * @prop export let classRating: string = '';
+ * @prop export let classRightLabel: string = '';
  */
 export default class AdvancedRating extends SvelteComponentTyped<AdvancedRatingProps, AdvancedRatingEvents, AdvancedRatingSlots> {
 }

package/dist/rating/Review.svelte

@@ -5,12 +5,17 @@ export let divClass = "flex items-center mb-6 space-x-4 rtl:space-x-reverse";
 export let imgClass = "w-10 h-10 rounded-full";
 export let ulClass = "space-y-4 text-sm text-gray-500 dark:text-gray-400";
 export let liClass = "flex items-center";
+export let classArticle = "";
+export let classDiv = "";
+export let classImg = "";
+export let classUl = "";
+export let classLi = "";
 </script>
 
-<article class={twMerge(articleClass, $$props.classArticle)}>
+<article class={twMerge(articleClass, classArticle)}>
   <div>
-    <div class={twMerge(divClass, $$props.classDiv)}>
-      <img class={twMerge(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
+    <div class={twMerge(divClass, classDiv)}>
+      <img class={twMerge(imgClass, classImg)} src={review.imgSrc} alt={review.imgAlt} />
       <div class="space-y-1 font-medium dark:text-white">
         <p>{review.name}</p>
         {#if review.address}
@@ -21,19 +26,19 @@ export let liClass = "flex items-center";
       </div>
     </div>
     {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
-      <ul class={twMerge(ulClass, $$props.classUl)}>
+      <ul class={twMerge(ulClass, classUl)}>
         {#if $$slots.item1}
-          <li class={twMerge(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, classLi)}>
             <slot name="item1" />
           </li>
         {/if}
         {#if $$slots.item2}
-          <li class={twMerge(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, classLi)}>
             <slot name="item2" />
           </li>
         {/if}
         {#if $$slots.item3}
-          <li class={twMerge(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, classLi)}>
             <slot name="item3" />
           </li>
         {/if}
@@ -72,4 +77,9 @@ export let liClass = "flex items-center";
 @prop export let imgClass: $$Props['imgClass'] = 'w-10 h-10 rounded-full';
 @prop export let ulClass: $$Props['ulClass'] = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
 @prop export let liClass: $$Props['liClass'] = 'flex items-center';
+@prop export let classArticle: $$Props['classArticle'] = '';
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classImg: $$Props['classImg'] = '';
+@prop export let classUl: $$Props['classUl'] = '';
+@prop export let classLi: $$Props['classLi'] = '';
 -->

package/dist/rating/Review.svelte.d.ts

@@ -8,6 +8,11 @@ declare const __propDef: {
         imgClass?: string;
         ulClass?: string;
         liClass?: string;
+        classArticle?: string;
+        classDiv?: string;
+        classImg?: string;
+        classUl?: string;
+        classLi?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,6 +37,11 @@ export type ReviewSlots = typeof __propDef.slots;
  * @prop export let imgClass: $$Props['imgClass'] = 'w-10 h-10 rounded-full';
  * @prop export let ulClass: $$Props['ulClass'] = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
  * @prop export let liClass: $$Props['liClass'] = 'flex items-center';
+ * @prop export let classArticle: $$Props['classArticle'] = '';
+ * @prop export let classDiv: $$Props['classDiv'] = '';
+ * @prop export let classImg: $$Props['classImg'] = '';
+ * @prop export let classUl: $$Props['classUl'] = '';
+ * @prop export let classLi: $$Props['classLi'] = '';
  */
 export default class Review extends SvelteComponentTyped<ReviewProps, ReviewEvents, ReviewSlots> {
 }

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -25,7 +25,7 @@ const handleDropdown = () => {
 </script>
 
 <li>
-  <button {...$$restProps} on:click={() => handleDropdown()} type="button" class={twMerge(btnClass, $$props.class)} aria-controls="sidebar-dropdown">
+  <button {...$$restProps} on:click={() => handleDropdown()} on:click type="button" class={twMerge(btnClass, $$props.class)} aria-controls="sidebar-dropdown">
     <slot name="icon" />
     <span class={spanClass}>{label}</span>
     {#if isOpen}

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         isOpen?: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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/table/Table.svelte

@@ -16,9 +16,11 @@ export let searchClass = "relative mt-1";
 export let svgDivClass = "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none";
 export let svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400";
 export let inputClass = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 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 classInput = "";
+export let classSvgDiv = "";
 let searchTerm = "";
-let inputCls = twMerge(inputClass, $$props.classInput);
-let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
+let inputCls = twMerge(inputClass, classInput);
+let svgDivCls = twMerge(svgDivClass, classSvgDiv);
 const colors = {
   default: "text-gray-500 dark:text-gray-400",
   blue: "text-blue-100 dark:text-blue-100",
@@ -89,4 +91,6 @@ setContext("sorter", writable(null));
 @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
 @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
 @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 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 classInput: $$Props['classInput'] = '';
+@prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
 -->

package/dist/table/Table.svelte.d.ts

@@ -18,6 +18,8 @@ declare class __sveltets_Render<T> {
         svgDivClass?: string;
         svgClass?: string;
         inputClass?: string;
+        classInput?: string;
+        classSvgDiv?: string;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -50,6 +52,8 @@ export type TableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
  * @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
  * @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
  * @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 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 classInput: $$Props['classInput'] = '';
+ * @prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
  */
 export default class Table<T> extends SvelteComponentTyped<TableProps<T>, TableEvents<T>, TableSlots<T>> {
 }

package/dist/table/TableSearch.svelte

@@ -12,8 +12,10 @@ export let searchClass = "relative mt-1";
 export let svgDivClass = "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none";
 export let svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400";
 export let inputClass = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 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";
-let inputCls = twMerge(inputClass, $$props.classInput);
-let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
+export let classInput = "";
+export let classSvgDiv = "";
+let inputCls = twMerge(inputClass, classInput);
+let svgDivCls = twMerge(svgDivClass, classSvgDiv);
 const colors = {
   default: "text-gray-500 dark:text-gray-400",
   blue: "text-blue-100 dark:text-blue-100",
@@ -65,4 +67,6 @@ $: setContext("color", color);
 @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
 @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
 @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 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 classInput: $$Props['classInput'] = '';
+@prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
 -->

package/dist/table/TableSearch.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         svgDivClass?: string;
         svgClass?: string;
         inputClass?: string;
+        classInput?: string;
+        classSvgDiv?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -43,6 +45,8 @@ export type TableSearchSlots = typeof __propDef.slots;
  * @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
  * @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
  * @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 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 classInput: $$Props['classInput'] = '';
+ * @prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
  */
 export default class TableSearch extends SvelteComponentTyped<TableSearchProps, TableSearchEvents, TableSearchSlots> {
 }