flowbite-svelte 1.6.2 → 1.6.4

package/dist/datepicker/Datepicker.svelte

@@ -10,6 +10,7 @@
   const dateFormatOptions = $derived(dateFormat ?? dateFormatDefault);
   // Internal state
   let isOpen: boolean = $state(inline);
+  let showMonthSelector: boolean = $state(false);
   let inputElement: HTMLInputElement | null = $state(null);
   let datepickerContainerElement: HTMLDivElement;
   let currentMonth: Date = $state(value || defaultDate || new Date());
@@ -62,6 +63,11 @@
   };
   let weekdays = getWeekdayNames();
 
+  const getMonthNames = (): string[] => {
+    return Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleDateString(locale, { month: "short" }));
+  };
+  let monthNames = getMonthNames();
+
   const addMonth = (date: Date, increment: number): Date => new Date(date.getFullYear(), date.getMonth() + increment, 1);
   const addDay = (date: Date, increment: number): Date => new Date(date.getFullYear(), date.getMonth(), date.getDate() + increment);
 
@@ -69,6 +75,21 @@
     currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
   }
 
+  function changeYear(increment: number) {
+    currentMonth = new Date(currentMonth.getFullYear() + increment, currentMonth.getMonth(), 1);
+  }
+
+  function selectMonth(monthIndex: number, event: MouseEvent) {
+    event.stopPropagation();
+    currentMonth = new Date(currentMonth.getFullYear(), monthIndex, 1);
+    showMonthSelector = false;
+  }
+
+  function toggleMonthSelector(event: MouseEvent) {
+    event.stopPropagation();
+    showMonthSelector = !showMonthSelector;
+  }
+
   function handleDaySelect(day: Date) {
     if (range) {
       if (!rangeFrom || (rangeFrom && rangeTo)) {
@@ -98,6 +119,7 @@
   function handleClickOutside(event: MouseEvent) {
     if (isOpen && datepickerContainerElement && !datepickerContainerElement.contains(event.target as Node)) {
       isOpen = false;
+      showMonthSelector = false;
     }
   }
 
@@ -133,6 +155,7 @@
         break;
       case "Escape":
         isOpen = false;
+        showMonthSelector = false;
         inputElement?.focus();
         break;
       default:
@@ -180,6 +203,14 @@
   </ToolbarButton>
 {/snippet}
 
+{#snippet yearNavButton(forward: boolean)}
+  <ToolbarButton color="dark" onclick={() => changeYear(forward ? 1 : -1)} size="lg" aria-label={forward ? "Next year" : "Previous year"}>
+    <svg class="h-3 w-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={forward ? "M1 5h12m0 0L9 1m4 4L9 9" : "M13 5H1m0 0 4 4M1 5l4-4"}></path>
+    </svg>
+  </ToolbarButton>
+{/snippet}
+
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
@@ -197,25 +228,46 @@
       {#if title}
         <h2 class={titleVariant()}>{title}</h2>
       {/if}
-      <div class={nav()}>
-        {@render navButton(false)}
-        <h3 class={polite()} aria-live="polite">
-          {currentMonth.toLocaleString(locale, { month: "long", year: "numeric" })}
-        </h3>
-        {@render navButton(true)}
-      </div>
-      <div class={grid()} role="grid">
-        {#each weekdays as day}
-          <div class={columnHeader()} role="columnheader">{day}</div>
-        {/each}
-        {#each daysInMonth as day}
-          {@const current = day.getMonth() !== currentMonth.getMonth()}
-          <button type="button" color={isSelected(day) ? color : "alternative"} class={dayButton({ current, today: isToday(day), color: isInRange(day) ? color : undefined })} onclick={() => handleDaySelect(day)} onkeydown={handleCalendarKeydown} aria-label={day.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })} aria-selected={isSelected(day)} role="gridcell">
-            {day.getDate()}
+
+      {#if showMonthSelector}
+        <!-- Month/Year Selector View -->
+        <div class={nav()}>
+          {@render yearNavButton(false)}
+          <h3 class={polite()} aria-live="polite">
+            {currentMonth.getFullYear()}
+          </h3>
+          {@render yearNavButton(true)}
+        </div>
+        <div class="grid grid-cols-4 gap-2 p-4">
+          {#each monthNames as month, index}
+            <button type="button" class="rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700 {currentMonth.getMonth() === index ? 'bg-blue-500 text-white' : 'text-gray-700 dark:text-gray-300'}" onclick={(event) => selectMonth(index, event)}>
+              {month}
+            </button>
+          {/each}
+        </div>
+      {:else}
+        <!-- Regular Calendar View -->
+        <div class={nav()}>
+          {@render navButton(false)}
+          <button type="button" class={cn(polite(), "cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700")} aria-live="polite" onclick={(event) => toggleMonthSelector(event)}>
+            {currentMonth.toLocaleString(locale, { month: "long", year: "numeric" })}
           </button>
-        {/each}
-      </div>
-      {#if showActionButtons}
+          {@render navButton(true)}
+        </div>
+        <div class={grid()} role="grid">
+          {#each weekdays as day}
+            <div class={columnHeader()} role="columnheader">{day}</div>
+          {/each}
+          {#each daysInMonth as day}
+            {@const current = day.getMonth() !== currentMonth.getMonth()}
+            <button type="button" color={isSelected(day) ? color : "alternative"} class={dayButton({ current, today: isToday(day), color: isInRange(day) ? color : undefined })} onclick={() => handleDaySelect(day)} onkeydown={handleCalendarKeydown} aria-label={day.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })} aria-selected={isSelected(day)} role="gridcell">
+              {day.getDate()}
+            </button>
+          {/each}
+        </div>
+      {/if}
+
+      {#if showActionButtons && !showMonthSelector}
         <div class={actionButtons()}>
           <Button onclick={() => handleDaySelect(new Date())} {color} size="sm">Today</Button>
           <Button onclick={handleClear} color="red" size="sm">Clear</Button>

package/dist/forms/textarea/Textarea.svelte

@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L922)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L923)
 ## Props
 @prop header
 @prop footer

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

@@ -2,7 +2,7 @@ import { type TextareaProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L922)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L923)
  * ## Props
  * @prop header
  * @prop footer

package/dist/forms/timepicker/Timepicker.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, InputAddon, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
+  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
+  import { twMerge } from "tailwind-merge";
 
   // Props
-  let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
+  let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400", type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
 
   const defaultDivClass = "inline-flex rounded-lg shadow-sm";
   const acturalDivCls = cn(defaultDivClass, divClass);
-  const defaultInputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none border-r-0";
+  const defaultInputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none rounded-e-lg";
   const inputCls = cn(defaultInputClass, inputClass);
   const defaultSelectClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg rounded-l-none focus:ring-0 focus:outline-none block w-full border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
   const selectCls = cn(defaultSelectClass, selectClass);
@@ -116,21 +117,21 @@
 {#if type !== "inline-buttons"}
   <ButtonGroup {size} class={acturalDivCls}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
-      <InputAddon class="rounded-r-lg">
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("relative px-2 pr-8", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+      <div class="pointer-events-none absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
         {#if Icon}
-          <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+          <Icon class={iconClass} />
         {:else}
           <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
           </svg>
         {/if}
-      </InputAddon>
+      </div>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-1/3 rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("w-1/3 rounded-l-lg", inputCls), "rounded-e-none")} bind:value onchange={(e) => handleTimeChange(e)} />
       <Select selectClass={selectCls} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("rounded-l-lg", inputCls), "rounded-e-none")} bind:value onchange={(e) => handleTimeChange(e)} />
       <Button color={buttonColor} class="!rounded-r-lg">
         {optionLabel}
         <svg class="ml-2 h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
@@ -143,27 +144,31 @@
         {/each}
       </Dropdown>
     {:else if type === "range"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
-      <InputAddon class="rounded-none">
-        {#if Icon}
-          <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
-        {:else}
-          <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-          </svg>
-        {/if}
-      </InputAddon>
+      <div class="relative">
+        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("relative pr-8", inputCls))} bind:value onchange={(e) => handleTimeChange(e)} />
+        <button type="button" class="pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5" onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
+          {#if Icon}
+            <Icon class={iconClass} />
+          {:else}
+            <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+            </svg>
+          {/if}
+        </button>
+      </div>
       <span class="flex items-center justify-center px-2 text-gray-500 dark:text-gray-400">-</span>
-      <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-none", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
-      <InputAddon class="rounded-r-lg">
-        {#if Icon}
-          <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
-        {:else}
-          <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-          </svg>
-        {/if}
-      </InputAddon>
+      <div class="relative">
+        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(inputCls, "relative pr-8")} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+        <button type="button" class="pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5" onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
+          {#if Icon}
+            <Icon class={iconClass} />
+          {:else}
+            <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+            </svg>
+          {/if}
+        </button>
+      </div>
     {:else if type === "timerange-dropdown"}
       <Button color={buttonColor} {size} class="!rounded-r-lg">
         {timerangeLabel}
@@ -174,11 +179,11 @@
           <div class="flex space-x-4">
             <div class="flex flex-col">
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r px-2", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
             </div>
             <div class="flex flex-col">
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r px-2", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
           <Button color={buttonColor} class="w-full !rounded-l-lg" onclick={applyTimerange}>
@@ -195,11 +200,11 @@
           <div class="flex space-x-4 p-2.5">
             <div class="flex flex-col">
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r px-2", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
             </div>
             <div class="flex flex-col">
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r px-2", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
         {/if}
@@ -233,6 +238,7 @@
 @prop inputColor
 @prop buttonColor = "primary"
 @prop Icon
+@prop iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400"
 @prop type = "default"
 @prop optionLabel = "Options"
 @prop options = []

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -15,6 +15,7 @@ import { type TimepickerProps } from "../..";
  * @prop inputColor
  * @prop buttonColor = "primary"
  * @prop Icon
+ * @prop iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400"
  * @prop type = "default"
  * @prop optionLabel = "Options"
  * @prop options = []

package/dist/forms/toggle/Toggle.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L944)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L945)
 ## Props
 @prop children
 @prop size = "default"

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

@@ -2,7 +2,7 @@ import { type ToggleProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L944)
+ * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L945)
  * ## Props
  * @prop children
  * @prop size = "default"

package/dist/gallery/Gallery.svelte

@@ -35,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L961)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L962)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

@@ -2,7 +2,7 @@ import { type GalleryProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L961)
+ * [GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L962)
  * ## Props
  * @prop children
  * @prop figure

package/dist/indicator/Indicator.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L972)
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L973)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/indicator/Indicator.svelte.d.ts

@@ -2,7 +2,7 @@ import { type IndicatorProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L972)
+ * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L973)
  * ## Props
  * @prop children
  * @prop color = "primary"

package/dist/kbd/Kbd.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L983)
+[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L984)
 ## Props
 @prop children
 @prop class: className

package/dist/kbd/Kbd.svelte.d.ts

@@ -2,7 +2,7 @@ import { type KbdProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L983)
+ * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L984)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/list-group/Listgroup.svelte

@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1002)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1003)
 ## Props
 @prop children
 @prop items

package/dist/list-group/Listgroup.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ListgroupProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1002)
+ * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1003)
  * ## Props
  * @prop children
  * @prop items

package/dist/list-group/ListgroupItem.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1013)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1014)
 ## Props
 @prop children
 @prop active

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ListgroupItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1013)
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1014)
  * ## Props
  * @prop children
  * @prop active

package/dist/mega-menu/MegaMenu.svelte

@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1024)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1025)
 ## Props
 @prop children
 @prop extra

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -2,7 +2,7 @@ import { type MegaMenuProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1024)
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1025)
  * ## Props
  * @prop children
  * @prop extra

package/dist/modal/Modal.svelte

@@ -91,7 +91,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1035)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1036)
 ## Props
 @prop children
 @prop oncancel

package/dist/modal/Modal.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ModalProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1035)
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1036)
  * ## Props
  * @prop children
  * @prop oncancel

package/dist/navbar/Menu.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1053)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1054)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

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

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1053)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1054)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1073)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1074)
 ## Props
 @prop children
 @prop class: className

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

@@ -2,7 +2,7 @@ import type { NavBrandProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1073)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1074)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/navbar/NavContainer.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1075)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1076)
 ## Props
 @prop children
 @prop fluid

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

@@ -2,7 +2,7 @@ import type { NavContainerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1075)
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1076)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/navbar/NavHamburger.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
 ## Props
 @prop children
 @prop onclick

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

@@ -2,7 +2,7 @@ import clsx from "clsx";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
  * ## Props
  * @prop children
  * @prop onclick

package/dist/navbar/NavLi.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
 ## Props
 @prop children
 @prop activeClass

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

@@ -2,7 +2,7 @@ import type { NavLiProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
+ * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
  * ## Props
  * @prop children
  * @prop activeClass

package/dist/navbar/NavUl.svelte

@@ -72,7 +72,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1084)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1085)
 ## Props
 @prop children
 @prop activeUrl

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

@@ -2,7 +2,7 @@ import type { NavUlProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1084)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1085)
  * ## Props
  * @prop children
  * @prop activeUrl

package/dist/navbar/Navbar.svelte

@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1066)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1067)
 ## Props
 @prop children
 @prop fluid

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

@@ -2,7 +2,7 @@ import type { NavbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1066)
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1067)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/pagination/Pagination.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1164)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1165)
 ## Props
 @prop pages = []
 @prop previous