flowbite-svelte 0.46.16 → 0.46.18

package/README.md

@@ -468,7 +468,6 @@ Please read [how to contribute](https://github.com/themesberg/flowbite-svelte/bl
 
 View the full [changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md) on this page.
 
-
 ## License
 
 Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).

package/dist/cards/Card.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         img?: string;
         padding?: SizeType | "none";
         size?: SizeType | "none";
+        imgClass?: string;
     };
     events: {
         click: MouseEvent;

package/dist/carousel/Thumbnail.svelte

@@ -1,16 +1,18 @@
 <script>import { twMerge } from "tailwind-merge";
 export let selected = false;
+export let alt = "";
 export let activeClass = "opacity-100";
 export let inactiveClass = "opacity-60";
 </script>
 
-<img alt="..." {...$$restProps} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
+<img {...$$restProps} {alt} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let selected: boolean = false;
-@prop export let activeClass = 'opacity-100';
-@prop export let inactiveClass = 'opacity-60';
+@prop export let selected: $$Props['selected'] = false;
+@prop export let alt: $$Props['alt'] = '';
+@prop export let activeClass: $$Props['activeClass'] = 'opacity-100';
+@prop export let inactiveClass: $$Props['inactiveClass'] = 'opacity-60';
 -->

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

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLImgAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        selected?: boolean | undefined;
-        activeClass?: string | undefined;
-        inactiveClass?: string | undefined;
+    props: HTMLImgAttributes & {
+        selected?: boolean;
+        alt?: string;
+        activeClass?: string;
+        inactiveClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,9 +18,10 @@ export type ThumbnailSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let selected: boolean = false;
- * @prop export let activeClass = 'opacity-100';
- * @prop export let inactiveClass = 'opacity-60';
+ * @prop export let selected: $$Props['selected'] = false;
+ * @prop export let alt: $$Props['alt'] = '';
+ * @prop export let activeClass: $$Props['activeClass'] = 'opacity-100';
+ * @prop export let inactiveClass: $$Props['inactiveClass'] = 'opacity-60';
  */
 export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }

package/dist/forms/Helper.svelte

@@ -5,7 +5,7 @@ const colorClasses = {
   gray: "text-gray-900 dark:text-gray-300",
   green: "text-green-700 dark:text-green-500",
   red: "text-red-700 dark:text-red-500",
-  disabled: "text-gray-400 dark:text-gray-500"
+  disabled: "text-gray-400 dark:text-gray-500 grayscale contrast-50"
 };
 </script>
 

package/dist/forms/Input.svelte

@@ -5,10 +5,13 @@
 
 <script>import Wrapper from "../utils/Wrapper.svelte";
 import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
+import { createEventDispatcher, getContext } from "svelte";
+import CloseButton from "../utils/CloseButton.svelte";
+const dispatcher = createEventDispatcher();
 export let type = "text";
 export let value = void 0;
 export let size = void 0;
+export let clearable = false;
 export let defaultClass = "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right";
 export let color = "base";
 export let floatClass = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400";
@@ -39,11 +42,16 @@ $: _size = size || clampSize(group?.size) || "md";
 let inputClass;
 $: {
   const _color = color === "base" && background ? "tinted" : color;
-  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "[&:not(:first-child)]:-ms-px", $$props.class]);
+  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || (clearable || $$slots.right) && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "[&:not(:first-child)]:-ms-px", $$props.class]);
 }
+const clearAll = (e) => {
+  e.stopPropagation();
+  value = void 0;
+  dispatcher("change");
+};
 </script>
 
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
+<Wrapper class="relative w-full" show>
   {#if $$slots.left}
     <div class="{twMerge(floatClass, $$props.classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
@@ -52,9 +60,14 @@ $: {
   <slot props={{ ...$$restProps, class: inputClass }}>
     <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
-  {#if $$slots.right}
-    <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5"><slot name="right" /></div>
-  {/if}
+  <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5">
+    {#if $$slots.right}
+      <slot name="right"></slot>
+    {/if}
+    {#if clearable && value && `${value}`.length > 0}
+      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
+    {/if}
+  </div>
 </Wrapper>
 
 <!--
@@ -64,6 +77,7 @@ $: {
 @prop export let type: InputType = 'text';
 @prop export let value: any = undefined;
 @prop export let size: FormSizeType | undefined = undefined;
+@prop export let clearable = false;
 @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
 @prop export let color: 'base' | 'green' | 'red' = 'base';
 @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';

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

@@ -8,13 +8,14 @@ declare const __propDef: {
         type?: InputType | undefined;
         value?: any;
         size?: FormSizeType | undefined;
+        clearable?: boolean | undefined;
         defaultClass?: string | undefined;
         color?: ("base" | "green" | "red") | undefined;
         floatClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;
-        change: Event;
+        change: CustomEvent<any>;
         click: MouseEvent;
         contextmenu: MouseEvent;
         focus: FocusEvent;
@@ -48,6 +49,7 @@ export type InputSlots = typeof __propDef.slots;
  * @prop export let type: InputType = 'text';
  * @prop export let value: any = undefined;
  * @prop export let size: FormSizeType | undefined = undefined;
+ * @prop export let clearable = false;
  * @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
  * @prop export let color: 'base' | 'green' | 'red' = 'base';
  * @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';

package/dist/forms/Label.svelte

@@ -7,7 +7,7 @@ const colorClasses = {
   gray: "text-gray-900 dark:text-gray-300",
   green: "text-green-700 dark:text-green-500",
   red: "text-red-700 dark:text-red-500",
-  disabled: "text-gray-400 dark:text-gray-500"
+  disabled: "text-gray-400 dark:text-gray-500 grayscale contrast-50"
 };
 $: {
   const control = node?.control;

package/dist/forms/MultiSelect.svelte

@@ -8,6 +8,7 @@ export let value = [];
 export let size = "md";
 export let dropdownClass = "";
 export let placeholder = "";
+export let disabled = false;
 $: selectItems = items.filter((x) => value.includes(x.value));
 let show = false;
 const sizes = {
@@ -15,7 +16,7 @@ const sizes = {
   md: "px-3 py-1 min-h-[2.7rem]",
   lg: "px-4 py-2 min-h-[3.2rem]"
 };
-const multiSelectClass = "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500 focus-visible:outline-none";
+const multiSelectClass = "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-none";
 let multiSelectDropdown;
 $: multiSelectDropdown = twMerge("absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full", dropdownClass);
 const itemsClass = "py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600";
@@ -24,6 +25,8 @@ let activeIndex = null;
 $: activeItem = activeIndex !== null ? items[(activeIndex % items.length + items.length) % items.length] : null;
 const activeItemClass = "bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100";
 const selectOption = (select) => {
+  if (disabled) return;
+  if (select.disabled) return;
   if (value.includes(select.value)) {
     clearThisOption(select);
   } else if (!value.includes(select.value)) {
@@ -32,22 +35,26 @@ const selectOption = (select) => {
   }
 };
 const clearAll = (e) => {
+  if (disabled) return;
   e.stopPropagation();
   value = [];
   dispatcher("change");
 };
 const clearThisOption = (select) => {
+  if (disabled) return;
   if (value.includes(select.value)) {
     value = value.filter((o) => o !== select.value);
     dispatcher("change");
   }
 };
 function handleEscape() {
+  if (disabled) return;
   if (show) {
     show = false;
   }
 }
 function handleToggleActiveItem() {
+  if (disabled) return;
   if (!show) {
     show = true;
     activeIndex = 0;
@@ -56,6 +63,7 @@ function handleToggleActiveItem() {
   }
 }
 function handleArrowUpDown(offset) {
+  if (disabled) return;
   if (!show) {
     show = true;
     activeIndex = 0;
@@ -68,6 +76,7 @@ function handleArrowUpDown(offset) {
   }
 }
 function handleKeyDown(event) {
+  if (disabled) return;
   switch (event.key) {
     case "Escape":
       handleEscape();
@@ -92,12 +101,12 @@ function handleKeyDown(event) {
 
 <!-- Hidden select for form submission -->
 <select {...$$restProps} {value} hidden multiple on:input>
-  {#each items as { value, name }}
-    <option {value}>{name}</option>
+  {#each items as { value, name, disabled }}
+    <option {value} {disabled}>{name}</option>
   {/each}
 </select>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => (show = !show)} on:focusout={() => (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
+<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>
   {/if}
@@ -105,7 +114,7 @@ function handleKeyDown(event) {
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
         <slot {item} clear={() => clearThisOption(item)}>
-          <Badge color="dark" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)}>
+          <Badge color="dark" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)} class={disabled && "pointer-events-none"} >
             {item.name}
           </Badge>
         </slot>
@@ -114,10 +123,10 @@ function handleKeyDown(event) {
   </span>
   <div class="flex ms-auto gap-2 items-center">
     {#if selectItems.length}
-      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
+      <CloseButton {size} on:click={clearAll} color="none" class={twMerge("p-0 focus:ring-gray-400 dark:text-white", disabled && "cursor-not-allowed")} disabled={disabled} />
     {/if}
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600"></div>
-    <svg class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <svg class={twMerge("cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
     </svg>
   </div>
@@ -126,7 +135,7 @@ function handleKeyDown(event) {
     <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)}>
+        <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>
       {/each}
@@ -143,4 +152,5 @@ function handleKeyDown(event) {
 @prop export let size: FormSizeType = 'md';
 @prop export let dropdownClass: string = '';
 @prop export let placeholder: string = '';
+@prop export let disabled: boolean = false;
 -->

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         size?: FormSizeType | undefined;
         dropdownClass?: string | undefined;
         placeholder?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         input: Event;
@@ -34,6 +35,7 @@ export type MultiSelectSlots = typeof __propDef.slots;
  * @prop export let size: FormSizeType = 'md';
  * @prop export let dropdownClass: string = '';
  * @prop export let placeholder: string = '';
+ * @prop export let disabled: boolean = false;
  */
 export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
 }

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

@@ -9,7 +9,7 @@ declare const __propDef: {
     };
     events: {
         blur: FocusEvent;
-        change: Event;
+        change: CustomEvent<any>;
         input: Event;
         click: MouseEvent;
         focus: FocusEvent;

package/dist/forms/Select.svelte

@@ -21,8 +21,8 @@ $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, size
     <option disabled selected={(value === undefined) ? true : undefined} value="">{placeholder}</option>
   {/if}
 
-  {#each items as { value: itemValue, name }}
-    <option value={itemValue} selected={(itemValue === value) ? true : undefined}>{name}</option>
+  {#each items as { value: itemValue, name, disabled }}
+    <option disabled={disabled} value={itemValue} selected={(itemValue === value) ? true : undefined}>{name}</option>
   {:else}
     <slot />
   {/each}

package/dist/list-group/Listgroup.svelte

@@ -1,4 +1,4 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
+<script generics="T extends ListGroupItemType | string">import { createEventDispatcher, setContext } from "svelte";
 import { twMerge } from "tailwind-merge";
 import Frame from "../utils/Frame.svelte";
 import ListgroupItem from "./ListgroupItem.svelte";
@@ -28,7 +28,7 @@ $: groupClass = twMerge(defaultClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let items: ListGroupItemType[] | string[] = [];
+@prop export let items: T[] = [];
 @prop export let active: boolean = false;
 @prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
 -->

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ListGroupItemType } from '../types';
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+declare class __sveltets_Render<T extends ListGroupItemType | string> {
+    props(): import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
@@ -16,31 +16,31 @@ declare const __propDef: {
         transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
         params?: any;
     } & {
-        items?: ListGroupItemType[] | string[];
+        items?: T[] | undefined;
         active?: boolean;
     };
-    events: {
+    events(): {
         click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {
-            item: string;
+            item: T;
             index: number;
         };
     };
-};
-export type ListgroupProps = typeof __propDef.props;
-export type ListgroupEvents = typeof __propDef.events;
-export type ListgroupSlots = typeof __propDef.slots;
+}
+export type ListgroupProps<T extends ListGroupItemType | string> = ReturnType<__sveltets_Render<T>['props']>;
+export type ListgroupEvents<T extends ListGroupItemType | string> = ReturnType<__sveltets_Render<T>['events']>;
+export type ListgroupSlots<T extends ListGroupItemType | string> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let items: ListGroupItemType[] | string[] = [];
+ * @prop export let items: T[] = [];
  * @prop export let active: boolean = false;
  * @prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
  */
-export default class Listgroup extends SvelteComponentTyped<ListgroupProps, ListgroupEvents, ListgroupSlots> {
+export default class Listgroup<T extends ListGroupItemType | string> extends SvelteComponentTyped<ListgroupProps<T>, ListgroupEvents<T>, ListgroupSlots<T>> {
 }
 export {};

package/dist/progress/Progressbar.svelte

@@ -1,6 +1,6 @@
 <script>import { cubicOut } from "svelte/easing";
 import { tweened } from "svelte/motion";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twMerge } from "tailwind-merge";
 export let progress = "45";
 export let precision = 0;
 export let tweenDuration = 400;
@@ -12,6 +12,7 @@ export let easing = cubicOut;
 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;
 const _progress = tweened(0, {
   duration: animate ? tweenDuration : 0,
   easing
@@ -37,11 +38,11 @@ $: _progress.set(Number(progress));
 {/if}
 <div class={twMerge(divClass, size, $$props.class)}>
   {#if labelInside}
-    <div class={twJoin(labelInsideClass, barColors[color])} style="width: {$_progress}%">
+    <div class={twMerge(barColors[color], labelInsideClass)} style="width: {$_progress}%">
       {$_progress.toFixed(precision)}%
     </div>
   {:else}
-    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {$_progress}%"></div>
+    <div class={twMerge(barColors[color], size, 'rounded-full', progressClass)} style="width: {$_progress}%"></div>
   {/if}
 </div>
 
@@ -60,4 +61,5 @@ $: _progress.set(Number(progress));
 @prop export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
 @prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 @prop export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
+@prop export let progressClass: string;
 -->

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         color?: ("primary" | "blue" | "gray" | "red" | "green" | "yellow" | "purple" | "indigo") | undefined;
         labelInsideClass?: string | undefined;
         divClass?: string | undefined;
+        progressClass: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -37,6 +38,7 @@ export type ProgressbarSlots = typeof __propDef.slots;
  * @prop export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
  * @prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
  * @prop export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
+ * @prop export let progressClass: string;
  */
 export default class Progressbar extends SvelteComponentTyped<ProgressbarProps, ProgressbarEvents, ProgressbarSlots> {
 }

package/dist/rating/Rating.svelte

@@ -8,28 +8,30 @@ export let rating = 4;
 export let partialId = "partialStar" + generateId();
 export let icon = Star;
 export let count = false;
+export let iconFillColor;
+export let iconStrokeColor;
 const fullStarId = generateId();
 const grayStarId = generateId();
-let fullStars = Math.floor(rating);
-let rateDiffence = rating - fullStars;
-let percentRating = Math.round(rateDiffence * 100);
-let grayStars = total - (fullStars + Math.ceil(rateDiffence));
+$: fullStars = Math.floor(rating);
+$: rateDiffence = rating - fullStars;
+$: percentRating = Math.round(rateDiffence * 100);
+$: grayStars = total - (fullStars + Math.ceil(rateDiffence));
 </script>
 
 <div class={twMerge(divClass, $$props.class)}>
   {#if count}
-    <svelte:component this={icon} fillPercent={100} {size} />
+    <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} fillPercent={100} {size} />
     <p class="ms-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
     <slot />
   {:else}
     {#each Array(fullStars) as star}
-      <svelte:component this={icon} {size} fillPercent={100} id={fullStarId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={100} id={fullStarId} />
     {/each}
     {#if percentRating}
-      <svelte:component this={icon} {size} fillPercent={percentRating} id={partialId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={percentRating} id={partialId} />
     {/if}
     {#each Array(grayStars) as star}
-      <svelte:component this={icon} {size} fillPercent={0} id={grayStarId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={0} id={grayStarId} />
     {/each}
     {#if $$slots.text}
       <slot name="text" />
@@ -41,11 +43,13 @@ let grayStars = total - (fullStars + Math.ceil(rateDiffence));
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'flex items-center';
-@prop export let size: number = 24;
-@prop export let total: number = 5;
-@prop export let rating: number = 4;
-@prop export let partialId: string = 'partialStar' + generateId();
-@prop export let icon: ComponentType = Star;
-@prop export let count: boolean = false;
+@prop export let divClass: $$Props['divClass'] = 'flex items-center';
+@prop export let size: $$Props['size'] = 24;
+@prop export let total: NonNullable<$$Props['total']> = 5;
+@prop export let rating: $$Props['rating'] = 4;
+@prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
+@prop export let icon: $$Props['icon'] = Star;
+@prop export let count: $$Props['count'] = false;
+@prop export let iconFillColor: $$Props['iconFillColor'];
+@prop export let iconStrokeColor: $$Props['iconStrokeColor'];
 -->

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

@@ -1,15 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ComponentType } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-        size?: number | undefined;
-        total?: number | undefined;
-        rating?: number | undefined;
-        partialId?: string | undefined;
-        icon?: ComponentType | undefined;
-        count?: boolean | undefined;
+    props: HTMLAttributes<HTMLDivElement> & {
+        divClass?: string;
+        size?: number;
+        total?: number;
+        rating: number;
+        partialId?: string;
+        icon?: ComponentType;
+        count?: boolean;
+        iconFillColor?: string;
+        iconStrokeColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,13 +27,15 @@ export type RatingSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'flex items-center';
- * @prop export let size: number = 24;
- * @prop export let total: number = 5;
- * @prop export let rating: number = 4;
- * @prop export let partialId: string = 'partialStar' + generateId();
- * @prop export let icon: ComponentType = Star;
- * @prop export let count: boolean = false;
+ * @prop export let divClass: $$Props['divClass'] = 'flex items-center';
+ * @prop export let size: $$Props['size'] = 24;
+ * @prop export let total: NonNullable<$$Props['total']> = 5;
+ * @prop export let rating: $$Props['rating'] = 4;
+ * @prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
+ * @prop export let icon: $$Props['icon'] = Star;
+ * @prop export let count: $$Props['count'] = false;
+ * @prop export let iconFillColor: $$Props['iconFillColor'];
+ * @prop export let iconStrokeColor: $$Props['iconStrokeColor'];
  */
 export default class Rating extends SvelteComponentTyped<RatingProps, RatingEvents, RatingSlots> {
 }

package/dist/sidebar/SidebarItem.svelte

@@ -1,5 +1,8 @@
 <script>import { getContext } from "svelte";
 import { twMerge } from "tailwind-merge";
+export let action = () => {
+};
+export let params = {};
 export let href = "";
 export let label = "";
 export let spanClass = "ms-3";
@@ -16,7 +19,7 @@ $: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass
 </script>
 
 <li>
-  <a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
+  <a {...$$restProps} {href} use:action={params} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
     <slot name="icon" />
     <span class={spanClass}>{label}</span>
     {#if $$slots.subtext}
@@ -29,6 +32,8 @@ $: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let action: Action<HTMLElement, any> = () => {};
+@prop export let params: any = {};
 @prop export let href: string = '';
 @prop export let label: string = '';
 @prop export let spanClass: string = 'ms-3';

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

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Action } from 'svelte/action';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        action?: Action<HTMLElement, any> | undefined;
+        params?: any;
         href?: string | undefined;
         label?: string | undefined;
         spanClass?: string | undefined;
@@ -32,6 +35,8 @@ export type SidebarItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let action: Action<HTMLElement, any> = () => {};
+ * @prop export let params: any = {};
  * @prop export let href: string = '';
  * @prop export let label: string = '';
  * @prop export let spanClass: string = 'ms-3';

package/dist/table/Table.svelte

@@ -1,4 +1,5 @@
-<script>import { twMerge, twJoin } from "tailwind-merge";
+<script generics="T">import { writable } from "svelte/store";
+import { twMerge, twJoin } from "tailwind-merge";
 import { setContext } from "svelte";
 export let divClass = "relative overflow-x-auto";
 export let striped = false;
@@ -7,6 +8,17 @@ export let noborder = false;
 export let shadow = false;
 export let color = "default";
 export let customeColor = "";
+export let items = [];
+export let filter = null;
+export let placeholder = "Search";
+export let innerDivClass = "p-4";
+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 searchTerm = "";
+let inputCls = twMerge(inputClass, $$props.classInput);
+let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
 const colors = {
   default: "text-gray-500 dark:text-gray-400",
   blue: "text-blue-100 dark:text-blue-100",
@@ -22,9 +34,35 @@ $: setContext("striped", striped);
 $: setContext("hoverable", hoverable);
 $: setContext("noborder", noborder);
 $: setContext("color", color);
+$: setContext("items", items);
+const searchTermStore = writable(searchTerm);
+const filterStore = writable(filter);
+setContext("searchTerm", searchTermStore);
+setContext("filter", filterStore);
+$: searchTermStore.set(searchTerm);
+$: filterStore.set(filter);
+setContext("sorter", writable(null));
 </script>
 
 <div class={twJoin(divClass, shadow && 'shadow-md sm:rounded-lg')}>
+  {#if filter}
+    <slot name="search">
+      <div class={innerDivClass}>
+        <label for="table-search" class="sr-only">Search</label>
+        <div class={searchClass}>
+          <div class={svgDivCls}>
+            <slot name="svgSearch">
+              <svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+              </svg>
+            </slot>
+          </div>
+          <input bind:value={searchTerm} type="text" id="table-search" class={inputCls} {placeholder} />
+        </div>
+        <slot name="header" />
+      </div>
+    </slot>
+  {/if}
   <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
     <slot />
   </table>
@@ -41,4 +79,12 @@ $: setContext("color", color);
 @prop export let shadow: boolean = false;
 @prop export let color: TableColorType = 'default';
 @prop export let customeColor: string = '';
+@prop export let items: T[] = [];
+@prop export let filter: ((t: T, term: string) => boolean) | null = null;
+@prop export let placeholder: string = 'Search';
+@prop export let innerDivClass: string = 'p-4';
+@prop export let searchClass: string = 'relative mt-1';
+@prop export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
+@prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+@prop export let inputClass: string = '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';
 -->

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { TableColorType } from '../types';
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         [x: string]: any;
         divClass?: string | undefined;
         striped?: boolean | undefined;
@@ -10,17 +10,28 @@ declare const __propDef: {
         shadow?: boolean | undefined;
         color?: TableColorType | undefined;
         customeColor?: string | undefined;
+        items?: T[] | undefined;
+        filter?: ((t: T, term: string) => boolean) | null | undefined;
+        placeholder?: string | undefined;
+        innerDivClass?: string | undefined;
+        searchClass?: string | undefined;
+        svgDivClass?: string | undefined;
+        svgClass?: string | undefined;
+        inputClass?: string | undefined;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
+        search: {};
+        svgSearch: {};
+        header: {};
         default: {};
     };
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
+}
+export type TableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
@@ -31,7 +42,15 @@ export type TableSlots = typeof __propDef.slots;
  * @prop export let shadow: boolean = false;
  * @prop export let color: TableColorType = 'default';
  * @prop export let customeColor: string = '';
+ * @prop export let items: T[] = [];
+ * @prop export let filter: ((t: T, term: string) => boolean) | null = null;
+ * @prop export let placeholder: string = 'Search';
+ * @prop export let innerDivClass: string = 'p-4';
+ * @prop export let searchClass: string = 'relative mt-1';
+ * @prop export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
+ * @prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+ * @prop export let inputClass: string = '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 default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+export default class Table<T> extends SvelteComponentTyped<TableProps<T>, TableEvents<T>, TableSlots<T>> {
 }
 export {};

package/dist/table/TableBody.svelte

@@ -1,8 +1,18 @@
-<script>export let tableBodyClass = void 0;
+<script generics="T">import { getContext } from "svelte";
+export let tableBodyClass = void 0;
+$: items = getContext("items") || [];
+let filter = getContext("filter");
+let searchTerm = getContext("searchTerm");
+$: filtered = $filter ? items.filter((item) => $filter(item, $searchTerm)) : items;
+let sorter = getContext("sorter");
+$: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
 </script>
 
 <tbody class={tableBodyClass}>
   <slot />
+  {#each sorted as item}
+    <slot name="row" {item} />
+  {/each}
 </tbody>
 
 <!--

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

@@ -1,23 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         tableBodyClass?: string | undefined;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {};
+        row: {
+            item: T;
+        };
     };
-};
-export type TableBodyProps = typeof __propDef.props;
-export type TableBodyEvents = typeof __propDef.events;
-export type TableBodySlots = typeof __propDef.slots;
+}
+export type TableBodyProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TableBodyEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TableBodySlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let tableBodyClass: string | undefined = undefined;
  */
-export default class TableBody extends SvelteComponentTyped<TableBodyProps, TableBodyEvents, TableBodySlots> {
+export default class TableBody<T> extends SvelteComponentTyped<TableBodyProps<T>, TableBodyEvents<T>, TableBodySlots<T>> {
 }
 export {};

package/dist/table/TableHeadCell.svelte

@@ -1,14 +1,47 @@
-<script>import { twMerge } from "tailwind-merge";
+<script generics="T">import { getContext } from "svelte";
+import { twMerge } from "tailwind-merge";
 export let padding = "px-6 py-3";
+export let sort = null;
+export let defaultDirection = "asc";
+export let defaultSort = false;
+export let direction = defaultSort ? defaultDirection : null;
+let sorter = getContext("sorter");
+let sortId = Math.random().toString(36).substring(2);
+$: direction = $sorter?.id === sortId ? $sorter.sortDirection === 1 ? "asc" : "desc" : null;
+if (defaultSort) {
+  sortItems();
+}
+function sortItems() {
+  if (!sort || !sorter) return;
+  sorter.update((sorter2) => {
+    return {
+      id: sortId,
+      sort,
+      sortDirection: sorter2?.id === sortId ? -sorter2.sortDirection : defaultDirection === "asc" ? 1 : -1
+    };
+  });
+}
 </script>
 
+{#if sort && sorter}
+<th {...$$restProps} class={$$props.class} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-sort={direction ? `${direction}ending` : undefined}>
+  <button class={twMerge('w-full text-left', 'after:absolute after:pl-3', direction === 'asc' && 'after:content-["▲"]', direction === 'desc' && 'after:content-["▼"]', padding)} on:click={sortItems}>
+    <slot />
+  </button>
+</th>
+{:else}
 <th {...$$restProps} class={twMerge(padding, $$props.class)} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
   <slot />
 </th>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let padding: string = 'px-6 py-3';
+@prop export let sort: ((a: T, b: T) => number) | null = null;
+@prop export let defaultDirection: 'asc' | 'desc' = 'asc';
+@prop export let defaultSort: boolean = false;
+@prop export let direction: 'asc' | 'desc' | null = defaultSort ? defaultDirection : null;
 -->

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

@@ -1,10 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         [x: string]: any;
         padding?: string | undefined;
+        sort?: ((a: T, b: T) => number) | null | undefined;
+        defaultDirection?: ("asc" | "desc") | undefined;
+        defaultSort?: boolean | undefined;
+        direction?: ("asc" | "desc" | null) | undefined;
     };
-    events: {
+    events(): {
         click: MouseEvent;
         focus: FocusEvent;
         keydown: KeyboardEvent;
@@ -16,18 +20,22 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {};
     };
-};
-export type TableHeadCellProps = typeof __propDef.props;
-export type TableHeadCellEvents = typeof __propDef.events;
-export type TableHeadCellSlots = typeof __propDef.slots;
+}
+export type TableHeadCellProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TableHeadCellEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TableHeadCellSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let padding: string = 'px-6 py-3';
+ * @prop export let sort: ((a: T, b: T) => number) | null = null;
+ * @prop export let defaultDirection: 'asc' | 'desc' = 'asc';
+ * @prop export let defaultSort: boolean = false;
+ * @prop export let direction: 'asc' | 'desc' | null = defaultSort ? defaultDirection : null;
  */
-export default class TableHeadCell extends SvelteComponentTyped<TableHeadCellProps, TableHeadCellEvents, TableHeadCellSlots> {
+export default class TableHeadCell<T> extends SvelteComponentTyped<TableHeadCellProps<T>, TableHeadCellEvents<T>, TableHeadCellSlots<T>> {
 }
 export {};

package/dist/timeline/GroupItem.svelte

@@ -5,6 +5,7 @@ export let imgClass = "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0";
 export let divClass = "text-gray-600 dark:text-gray-400";
 export let titleClass = "text-base font-normal";
 export let spanClass = "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400";
+export let isPrivacy = true;
 let aCls = twMerge(aClass, $$props.classA);
 let imgCls = twMerge(imgClass, $$props.classImg);
 let divCls = twMerge(divClass, $$props.classDiv);
@@ -23,6 +24,7 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
+        {#if isPrivacy}
         <span class={spanCls}>
           {#if isPrivate}
             <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -37,6 +39,7 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
             Public
           {/if}
         </span>
+        {/if}
       </div>
     </a>
   </li>
@@ -52,4 +55,5 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
 @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
 @prop export let titleClass: string = 'text-base font-normal';
 @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+@prop export let isPrivacy: boolean = true;
 -->

package/dist/timeline/GroupItem.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         divClass?: string | undefined;
         titleClass?: string | undefined;
         spanClass?: string | undefined;
+        isPrivacy?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -27,6 +28,7 @@ export type GroupItemSlots = typeof __propDef.slots;
  * @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
  * @prop export let titleClass: string = 'text-base font-normal';
  * @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+ * @prop export let isPrivacy: boolean = true;
  */
 export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
 }

package/dist/types.d.ts

@@ -46,6 +46,7 @@ export type ReviewType = {
 export type SelectOptionType<T> = {
     name: string | number;
     value: T;
+    disabled?: boolean;
 };
 export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
 export interface ActivityType {

package/dist/typography/A.svelte

@@ -1,10 +1,13 @@
 <script>import { twMerge } from "tailwind-merge";
+export let action = () => {
+};
+export let params = {};
 export let href = "#";
 export let color = "text-primary-600 dark:text-primary-500";
 export let aClass = "inline-flex items-center hover:underline";
 </script>
 
-<a {...$$restProps} {href} class={twMerge(aClass, color, $$props.class)} on:click>
+<a {...$$restProps} {href} use:action={params} class={twMerge(aClass, color, $$props.class)} on:click>
   <slot />
 </a>
 
@@ -12,6 +15,8 @@ export let aClass = "inline-flex items-center hover:underline";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let action: Action<HTMLElement, any> = () => {};
+@prop export let params: any = {};
 @prop export let href: string = '#';
 @prop export let color: string = 'text-primary-600 dark:text-primary-500';
 @prop export let aClass: string = 'inline-flex items-center hover:underline';

package/dist/typography/A.svelte.d.ts

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Action } from 'svelte/action';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        action?: Action<HTMLElement, any> | undefined;
+        params?: any;
         href?: string | undefined;
         color?: string | undefined;
         aClass?: string | undefined;
@@ -21,6 +24,8 @@ export type ASlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let action: Action<HTMLElement, any> = () => {};
+ * @prop export let params: any = {};
  * @prop export let href: string = '#';
  * @prop export let color: string = 'text-primary-600 dark:text-primary-500';
  * @prop export let aClass: string = 'inline-flex items-center hover:underline';

package/dist/utils/Popper.svelte

@@ -14,6 +14,8 @@ export let open = false;
 export let yOnly = false;
 export let middlewares = [dom.flip(), dom.shift()];
 const dispatch = createEventDispatcher();
+let focusable;
+$: focusable = trigger === "focus";
 let clickable;
 $: clickable = trigger === "click";
 let hoverable;
@@ -25,29 +27,28 @@ let floatingEl;
 let arrowEl;
 let contentEl;
 let triggerEls = [];
-let _blocked = false;
-const block = () => (_blocked = true, setTimeout(() => _blocked = false, 250));
 const showHandler = (ev) => {
   if (referenceEl === void 0) console.error("trigger undefined");
   if (!reference && triggerEls.includes(ev.target) && referenceEl !== ev.target) {
     referenceEl = ev.target;
-    block();
+    if (open) return;
   }
-  if (clickable && ev.type === "focusin" && !open) block();
-  open = clickable && ev.type === "click" && !_blocked ? !open : true;
+  open = ev.type === "click" ? !open : true;
 };
 const hasHover = (el) => el.matches(":hover");
 const hasFocus = (el) => el.contains(document.activeElement);
-const px = (n) => n != null ? `${n}px` : "";
+const px = (n) => n ? `${n}px` : "";
 const hideHandler = (ev) => {
-  if (activeContent) {
+  if (activeContent && hoverable) {
+    const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
     setTimeout(() => {
-      const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
-      if (ev.type === "mouseleave" && elements.some(hasHover)) return;
-      if (ev.type === "focusout" && elements.some(hasFocus)) return;
-      open = false;
+      if (ev.type === "mouseleave" && !elements.some(hasHover)) {
+        open = false;
+      }
     }, 100);
-  } else open = false;
+  } else {
+    open = false;
+  }
 };
 let arrowSide;
 const oppositeSideMap = {
@@ -85,8 +86,8 @@ function init(node, _referenceEl) {
 }
 onMount(() => {
   const events = [
-    ["focusin", showHandler, true],
-    ["focusout", hideHandler, true],
+    ["focusin", showHandler, focusable],
+    ["focusout", hideHandler, focusable],
     ["click", showHandler, clickable],
     ["mouseenter", showHandler, hoverable],
     ["mouseleave", hideHandler, hoverable]
@@ -105,13 +106,13 @@ onMount(() => {
     if (referenceEl === document.body) {
       console.error(`Popup reference not found: '${reference}'`);
     } else {
-      referenceEl.addEventListener("focusout", hideHandler);
+      if (focusable) referenceEl.addEventListener("focusout", hideHandler);
       if (hoverable) referenceEl.addEventListener("mouseleave", hideHandler);
     }
   } else {
     referenceEl = triggerEls[0];
   }
-  document.addEventListener("click", closeOnClickOutside);
+  if (clickable) document.addEventListener("click", closeOnClickOutside);
   return () => {
     triggerEls.forEach((element) => {
       if (element) {
@@ -152,7 +153,7 @@ function initArrow(node) {
 {/if}
 
 {#if referenceEl}
-  <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
+  <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent && focusable, showHandler)} on:focusout={optional(activeContent && focusable, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
     <slot></slot>
     {#if arrow}<div use:initArrow class={arrowClass}></div>{/if}
   </Frame>

package/dist/utils/focusTrap.js

@@ -22,7 +22,9 @@ export default function focusTrap(node) {
 
     const tabbable = Array.from(node.querySelectorAll(selectorTabbable)).filter((el) => el.hidden !== true);
 
-    let index = tabbable.indexOf(document.activeElement ?? node);
+    const activeElement = document.activeElement && document.activeElement.shadowRoot ? document.activeElement.shadowRoot.activeElement : document.activeElement;
+
+    let index = tabbable.indexOf(activeElement ?? node);
     if (index === -1 && e.shiftKey) index = 0;
     index += tabbable.length + (e.shiftKey ? -1 : 1);
     index %= tabbable.length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.16",
+  "version": "0.46.18",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -12,12 +12,12 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.8",
     "@docsearch/css": "^3.6.1",
     "@docsearch/js": "^3.6.1",
-    "@playwright/test": "^1.46.1",
-    "@sveltejs/adapter-vercel": "^5.4.3",
-    "@sveltejs/kit": "^2.5.25",
+    "@playwright/test": "^1.47.2",
+    "@sveltejs/adapter-vercel": "^5.4.4",
+    "@sveltejs/kit": "^2.5.28",
     "@sveltejs/package": "2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
@@ -25,31 +25,31 @@
     "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
     "esbuild": "0.23.1",
-    "eslint": "^9.9.1",
+    "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "flowbite-svelte": "^0.46.16",
+    "eslint-plugin-svelte": "^2.44.0",
+    "flowbite-svelte": "^0.46.18",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "prism-themes": "^1.9.0",
-    "publint": "^0.2.10",
+    "publint": "^0.2.11",
     "svelte": "^4.2.19",
-    "svelte-check": "^4.0.0",
-    "svelte-lib-helpers": "^0.4.7",
+    "svelte-check": "^4.0.2",
+    "svelte-lib-helpers": "^0.4.8",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.2",
-    "svelte2tsx": "^0.7.17",
+    "svelte2tsx": "^0.7.19",
     "tailwind-merge": "^1.13.1",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.12",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "typescript-eslint": "8.4.0",
-    "vite": "^5.4.3",
+    "vite": "^5.4.7",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
@@ -99,7 +99,7 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.11",
     "apexcharts": "^3.53.0",
     "flowbite": "^2.5.1",
     "tailwind-merge": "^2.5.2"
@@ -746,6 +746,7 @@
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint:format": "prettier --plugin-search-dir . --check .",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "test:integration": "playwright test",