flowbite-svelte 1.2.0 → 1.2.2

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

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

package/dist/device-mockups/Desktop.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L483)
+[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L486)
 ## Props
 @prop children
 @prop divClass

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

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

package/dist/device-mockups/DeviceMockup.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L478)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L481)
 ## Props
 @prop children
 @prop device = "default"

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

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

package/dist/device-mockups/Ios.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L512)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L515)
 ## Props
 @prop children
 @prop divClass

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

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

package/dist/device-mockups/Laptop.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L483)
+[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L486)
 ## Props
 @prop children
 @prop divClass

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

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

package/dist/device-mockups/Smartwatch.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L522)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L525)
 ## Props
 @prop children
 @prop divClass

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

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

package/dist/device-mockups/Tablet.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L532)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L535)
 ## Props
 @prop children
 @prop divClass

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

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

package/dist/drawer/Drawer.svelte

@@ -39,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L543)
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L546)
 ## Props
 @prop children
 @prop hidden = $bindable()

package/dist/drawer/Drawer.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DrawerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L543)
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L546)
  * ## Props
  * @prop children
  * @prop hidden = $bindable()

package/dist/drawer/Drawerhead.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L553)
+[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L556)
 ## Props
 @prop closeIcon
 @prop children

package/dist/drawer/Drawerhead.svelte.d.ts

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

package/dist/dropdown/Dropdown.svelte

@@ -34,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L560)
+[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L563)
 ## Props
 @prop children
 @prop simple = false

package/dist/dropdown/Dropdown.svelte.d.ts

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

package/dist/dropdown/DropdownDivider.svelte

@@ -13,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L571)
+[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L574)
 ## Props
 @prop class: divClass
 @prop ...restProps

package/dist/dropdown/DropdownDivider.svelte.d.ts

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

package/dist/dropdown/DropdownGroup.svelte

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

package/dist/dropdown/DropdownGroup.svelte.d.ts

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

package/dist/dropdown/DropdownHeader.svelte

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

package/dist/dropdown/DropdownHeader.svelte.d.ts

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

package/dist/dropdown/DropdownItem.svelte

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

package/dist/dropdown/DropdownItem.svelte.d.ts

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

package/dist/footer/Footer.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L595)
+[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L598)
 ## Props
 @prop children
 @prop footerType = "default"

package/dist/footer/Footer.svelte.d.ts

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

package/dist/footer/FooterBrand.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L601)
+[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L604)
 ## Props
 @prop children
 @prop aClass

package/dist/footer/FooterBrand.svelte.d.ts

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

package/dist/footer/FooterCopyright.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L612)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L615)
 ## Props
 @prop spanClass
 @prop aClass

package/dist/footer/FooterCopyright.svelte.d.ts

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

package/dist/footer/FooterIcon.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L621)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L624)
 ## Props
 @prop children
 @prop href

package/dist/footer/FooterIcon.svelte.d.ts

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

package/dist/footer/FooterLink.svelte

@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L633)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L636)
 ## Props
 @prop children
 @prop liClass

package/dist/footer/FooterLink.svelte.d.ts

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

package/dist/footer/FooterLinkGroup.svelte

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

package/dist/footer/FooterLinkGroup.svelte.d.ts

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

package/dist/forms/checkbox-button/CheckboxButton.svelte

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

package/dist/forms/checkbox-button/CheckboxButton.svelte.d.ts

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

package/dist/forms/fileupload/Fileupload.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L693)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L696)
 ## Props
 @prop files = $bindable()
 @prop size = "md"

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

@@ -2,7 +2,7 @@ import { type FileuploadProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L693)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L696)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"

package/dist/forms/floating-label-input/FloatingLabelInput.svelte

@@ -4,34 +4,151 @@
   import { type FloatingLabelInputProps, CloseButton } from "../..";
   import clsx from "clsx";
 
-  let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: divClass, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: FloatingLabelInputProps = $props();
+  let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: divClass, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, ...restProps }: FloatingLabelInputProps = $props();
 
   const { base, input, label, clearbtn } = $derived(floatingLabelInput({ variant, size, color }));
 
   const clearAll = () => {
     if (elementRef) {
       elementRef.value = "";
-      value = undefined;
+      value = "";
+      backspaceUsed = false;
+      updateSuggestions();
+      dummyFocusDiv?.focus();
+      setTimeout(() => {
+        elementRef?.focus();
+      }, 100);
     }
     if (clearableOnClick) clearableOnClick();
   };
+
+  const isCombobox = $derived(Array.isArray(data) && data.length > 0);
+
+  // svelte-ignore non_reactive_update
+  let dummyFocusDiv: HTMLDivElement;
+
+  let isFocused = $state(false);
+  let filteredSuggestions: string[] = $state([]);
+  let selectedIndex = $state(-1);
+  let backspaceUsed = $state(false);
+
+  function updateSuggestions() {
+    if (!isCombobox || !isFocused) {
+      filteredSuggestions = [];
+      return;
+    }
+
+    const searchTerm = ((value as string) || "").toLowerCase();
+
+    if (searchTerm === "" && !backspaceUsed) {
+      filteredSuggestions = [];
+    } else if (searchTerm) {
+      filteredSuggestions = data.filter((item) => item.toLowerCase().includes(searchTerm)).slice(0, maxSuggestions);
+    } else if (backspaceUsed) {
+      filteredSuggestions = [...data].slice(0, maxSuggestions);
+    }
+
+    selectedIndex = -1;
+  }
+
+  $effect(() => {
+    if (isCombobox) {
+      updateSuggestions();
+    }
+  });
+
+  function handleInput() {
+    if ((value as string).length > 0) {
+      backspaceUsed = false;
+    }
+    updateSuggestions();
+  }
+
+  function handleFocus() {
+    isFocused = true;
+    updateSuggestions();
+  }
+
+  function handleBlur() {
+    setTimeout(() => {
+      isFocused = false;
+      backspaceUsed = false;
+      filteredSuggestions = [];
+    }, 200);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isCombobox) return;
+
+    if (event.key === "Backspace" || event.key === "Delete") {
+      const currentValue = value as string;
+      if (currentValue.length <= 1) {
+        backspaceUsed = true;
+      }
+    }
+
+    if (!filteredSuggestions.length) return;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        selectedIndex = (selectedIndex + 1) % filteredSuggestions.length;
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        selectedIndex = selectedIndex <= 0 ? filteredSuggestions.length - 1 : selectedIndex - 1;
+        break;
+      case "Enter":
+        if (selectedIndex >= 0) {
+          event.preventDefault();
+          selectItem(filteredSuggestions[selectedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        filteredSuggestions = [];
+        break;
+    }
+  }
+
+  function selectItem(item: string) {
+    value = item;
+    if (onSelect) onSelect(item);
+    filteredSuggestions = [];
+    selectedIndex = -1;
+    elementRef?.focus();
+  }
 </script>
 
-<div class={base({ class: clsx(divClass) })}>
-  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={input({ class: inputClass })} />
+{#if clearable}
+  <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
+{/if}
+
+<div class={clsx(base({ class: clsx(divClass) }), isCombobox ? "relative" : "")}>
+  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={input({ class: inputClass })} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
   {#if value !== undefined && value !== "" && clearable}
     <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} />
   {/if}
   <label for={id} class={label({ class: labelClass })}>
     {@render children()}
   </label>
+
+  {#if isCombobox && isFocused && filteredSuggestions.length > 0}
+    <div class="absolute top-full right-0 left-0 z-10 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
+      {#each filteredSuggestions as item, i}
+        <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
+          {item}
+        </button>
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L706)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L709)
 ## Props
 @prop children
 @prop id = idGenerator()
@@ -49,5 +166,8 @@
 @prop clearableColor = "none"
 @prop clearableClass
 @prop clearableOnClick
+@prop data = []
+@prop maxSuggestions = 5
+@prop onSelect
 @prop ...restProps
 -->

package/dist/forms/floating-label-input/FloatingLabelInput.svelte.d.ts

@@ -2,7 +2,7 @@ import { type FloatingLabelInputProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L706)
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L709)
  * ## Props
  * @prop children
  * @prop id = idGenerator()
@@ -20,6 +20,9 @@ import { type FloatingLabelInputProps } from "../..";
  * @prop clearableColor = "none"
  * @prop clearableClass
  * @prop clearableOnClick
+ * @prop data = []
+ * @prop maxSuggestions = 5
+ * @prop onSelect
  * @prop ...restProps
  */
 declare const FloatingLabelInput: import("svelte").Component<FloatingLabelInputProps, {}, "value" | "elementRef">;

package/dist/forms/helper/Helper.svelte

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