flowbite-svelte 1.2.0 → 1.2.2

package/dist/forms/helper/Helper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { HelperProps } from "../../types";
 /**
  * [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

package/dist/forms/input/Input.svelte

@@ -1,14 +1,44 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { CloseButton, type SizeType, type InputProps, type InputValue } from "../..";
+  import { twMerge } from "tailwind-merge";
   import { input, clampSize } from ".";
   import clsx from "clsx";
 
-  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: InputProps<InputValue> = $props();
+  let {
+    children,
+    left,
+    right,
+    value = $bindable(),
+    elementRef = $bindable(),
+    clearable = false,
+    size,
+    color = "default",
+    class: className,
+    wrapperClass,
+    classLeft,
+    classRight,
+    divClass,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    // Combobox props
+    data = [],
+    maxSuggestions = 5,
+    onSelect,
+    ...restProps
+  }: InputProps<InputValue> = $props();
+
+  // Automatically enable combobox when data is provided
+  const isCombobox = $derived(Array.isArray(data) && data.length > 0);
 
   // tinted if put in component having its own background
   let background: boolean = getContext("background");
 
+  // svelte-ignore non_reactive_update
+  let dummyFocusDiv: HTMLDivElement;
+
   let group: { size: SizeType } = getContext("group");
   let isGroup = !!group;
   let _size = $derived(size || clampSize(group?.size) || "md");
@@ -18,13 +48,163 @@
 
   const clearAll = () => {
     if (elementRef) {
-      elementRef.value = "";
-      value = undefined;
+      // in order to avoid type error in setTimeout()
+      const input = elementRef;
+      input.value = "";
+      value = "";
+
+      backspaceUsed = false;
+      updateSuggestions();
+      // hack to focus outside
+      dummyFocusDiv?.focus();
+      setTimeout(() => {
+        input.focus();
+      }, 100);
     }
+
     if (clearableOnClick) clearableOnClick();
   };
+
+  // Combobox functionality
+  let isFocused = $state(false);
+  let filteredSuggestions: string[] = $state([]);
+  let selectedIndex = $state(-1);
+  let backspaceUsed = $state(false); // Track if backspace was used to clear
+
+  function updateSuggestions() {
+    if (!isCombobox || !isFocused) {
+      filteredSuggestions = [];
+      return;
+    }
+
+    const searchTerm = ((value as string) || "").toLowerCase();
+
+    // Show suggestions if:
+    // 1. There's actual input text, OR
+    // 2. The input is empty but backspace was just used to clear it
+    if (searchTerm === "" && !backspaceUsed) {
+      filteredSuggestions = [];
+    } else {
+      // If there's text, filter suggestions
+      if (searchTerm) {
+        filteredSuggestions = data.filter((item) => item.toLowerCase().includes(searchTerm)).slice(0, maxSuggestions);
+      }
+      // If empty but backspace was used, show all suggestions
+      else if (backspaceUsed) {
+        filteredSuggestions = [...data].slice(0, maxSuggestions);
+      }
+    }
+
+    selectedIndex = -1;
+  }
+
+  // Watch for value changes
+  $effect(() => {
+    if (isCombobox) {
+      updateSuggestions();
+    }
+  });
+
+  function handleInput() {
+    // Reset backspace flag if user starts typing again
+    if ((value as string).length > 0) {
+      backspaceUsed = false;
+    }
+    updateSuggestions();
+  }
+
+  function handleFocus() {
+    isFocused = true;
+    updateSuggestions();
+  }
+
+  function handleBlur() {
+    // Small delay to allow click on suggestion to fire first
+    setTimeout(() => {
+      isFocused = false;
+      backspaceUsed = false; // Reset flag when focus is lost
+      filteredSuggestions = [];
+    }, 200);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isCombobox) return;
+
+    // Special handling for backspace/delete - track when it's used to clear the input
+    if (event.key === "Backspace" || event.key === "Delete") {
+      const currentValue = value as string;
+      // If this keypress will make the input empty
+      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;
+
+    if (elementRef) {
+      elementRef.focus();
+    }
+  }
 </script>
 
+{#if clearable}
+  <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
+{/if}
+
+<div class={twMerge(isCombobox ? "relative w-full" : "", wrapperClass)}>
+  {#if group}
+    {@render inputContent()}
+  {:else if right || left || clearable}
+    <div class={base({ class: divClass })}>
+      {@render inputContent()}
+    </div>
+  {:else}
+    {@render inputContent()}
+  {/if}
+
+  {#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>
+
 {#snippet inputContent()}
   {#if left}
     <div class={leftCls({ class: classLeft })}>
@@ -34,7 +214,7 @@
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value bind:this={elementRef} class={inputCls({ class: clsx(className) })} />
+    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={inputCls({ class: clsx(className) })} />
     {#if value !== undefined && value !== "" && clearable}
       <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} />
     {/if}
@@ -45,20 +225,3 @@
     </div>
   {/if}
 {/snippet}
-
-{#if group}
-  {@render inputContent()}
-{:else if right || left || clearable}
-  <div class={base({ class: divClass })}>
-    {@render inputContent()}
-  </div>
-{:else}
-  {@render inputContent()}
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@props: 
--->

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

@@ -1,9 +1,4 @@
 import { type InputProps, type InputValue } from "../..";
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @props:
- */
 declare const Input: import("svelte").Component<InputProps<InputValue>, {}, "value" | "elementRef">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/forms/input-addon/InputAddon.svelte

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

package/dist/forms/input-addon/InputAddon.svelte.d.ts

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

package/dist/forms/label/Label.svelte

@@ -20,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L756)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L766)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/forms/label/Label.svelte.d.ts

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

package/dist/forms/range/Range.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L785)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L795)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

package/dist/forms/range/Range.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RangeProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L785)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L795)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

package/dist/forms/search/Search.svelte

@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L790)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L800)
 ## Props
 @prop children
 @prop class: inputClass

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

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

package/dist/forms/select/index.d.ts

@@ -1,4 +1,3 @@
-import Select from "./Select.svelte";
-import MultiSelect from "./MultiSelect.svelte";
-import { select } from "./theme";
-export { Select, MultiSelect, select };
+export { default as Select } from "./Select.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { select } from "./theme";

package/dist/forms/select/index.js

@@ -1,4 +1,3 @@
-import Select from "./Select.svelte";
-import MultiSelect from "./MultiSelect.svelte";
-import { select } from "./theme";
-export { Select, MultiSelect, select };
+export { default as Select } from "./Select.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { select } from "./theme";

package/dist/forms/tags/Tags.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { type TagsProps, CloseButton } from "../..";
+  import { tags } from "./theme";
+
+  let { value = $bindable([]), itemClass, spanClass, placeholder = "Enter tags", class: className, closeClass, inputClass, closeBtnSize = "xs", ...restProps }: TagsProps = $props();
+
+  const { base, tag: tagCls, span: spanCls, close, input: inputCls } = $derived(tags());
+
+  let contents: string = $state("");
+
+  const handleKeys = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (contents.length > 0 && contents.trim().length > 0) {
+        value.push(contents.trim());
+        value = value;
+        contents = "";
+      }
+    }
+
+    if (event.key === "Backspace") {
+      if (contents.length === 0) {
+        event.preventDefault();
+        contents = value.pop() ?? "";
+        value = value;
+      }
+    }
+  };
+
+  const deleteField = (index: number) => {
+    value.splice(index, 1);
+    value = value;
+  };
+</script>
+
+<div {...restProps} class={base({ class: className })}>
+  {#each value as tag, index}
+    <div class={tagCls({ class: itemClass })}>
+      <span class={spanCls({ class: spanClass })}>
+        {tag}
+      </span>
+      <CloseButton
+        size={closeBtnSize}
+        class={close({ class: closeClass })}
+        onclick={() => {
+          deleteField(index);
+        }}
+      />
+    </div>
+  {/each}
+
+  <input
+    onkeydown={(event) => {
+      handleKeys(event);
+    }}
+    bind:value={contents}
+    placeholder={value.length === 0 ? placeholder : ""}
+    type="text"
+    autocomplete="new-password"
+    class={inputCls({ class: inputClass })}
+  />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L843)
+## Props
+@prop value = $bindable([])
+@prop itemClass
+@prop spanClass
+@prop placeholder = 'Enter tags'
+@prop class:className
+@prop closeClass
+@prop inputClass
+@prop closeBtnSize = "xs"
+@prop ...restProps
+-->

package/dist/forms/tags/Tags.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type TagsProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L843)
+ * ## Props
+ * @prop value = $bindable([])
+ * @prop itemClass
+ * @prop spanClass
+ * @prop placeholder = 'Enter tags'
+ * @prop class:className
+ * @prop closeClass
+ * @prop inputClass
+ * @prop closeBtnSize = "xs"
+ * @prop ...restProps
+ */
+declare const Tags: import("svelte").Component<TagsProps, {}, "value">;
+type Tags = ReturnType<typeof Tags>;
+export default Tags;

package/dist/forms/tags/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tags } from "./Tags.svelte";
+export { tags } from "./theme";

package/dist/forms/tags/index.js

@@ -0,0 +1,2 @@
+export { default as Tags } from "./Tags.svelte";
+export { tags } from "./theme";

package/dist/forms/tags/theme.d.ts

@@ -0,0 +1,49 @@
+export declare const tags: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            tag?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            tag?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    tag: string;
+    span: string;
+    close: string;
+    input: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            tag?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    tag: string;
+    span: string;
+    close: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    tag: string;
+    span: string;
+    close: string;
+    input: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/tags/theme.js

@@ -0,0 +1,10 @@
+import { tv } from "tailwind-variants";
+export const tags = tv({
+    slots: {
+        base: "border bg-gray-50 border-gray-300 rounded-lg flex focus-within:ring-primary-500 focus-within:ring-1 focus-within:border-primary-500 overflow-x-auto scrollbar-hidden",
+        tag: "flex items-center rounded-lg bg-gray-100 text-gray-900 border border-gray-300 my-1 ml-1 px-2 text-sm max-w-full min-w-fit",
+        span: "items-center",
+        close: "my-auto ml-1",
+        input: "block text-sm m-2.5 p-0 bg-transparent border-none outline-none text-gray-900 h-min w-full min-w-fit focus:ring-0 placeholder-gray-400"
+    }
+});

package/dist/forms/textarea/Textarea.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L868)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L891)
 ## 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#L868)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L891)
  * ## Props
  * @prop header
  * @prop footer

package/dist/forms/timepicker/Timepicker.svelte

@@ -195,7 +195,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L840)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L863)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"

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

@@ -2,7 +2,7 @@ import { type TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L840)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L863)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"

package/dist/forms/toggle/Toggle.svelte

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

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

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

package/dist/gallery/Gallery.svelte

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

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

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

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export * from "./forms/radio";
 export * from "./forms/radio-button";
 export * from "./forms/range";
 export * from "./forms/search";
+export * from "./forms/tags";
 export * from "./forms/textarea";
 export * from "./forms/timepicker";
 export * from "./forms/toggle";

package/dist/index.js

@@ -56,6 +56,7 @@ export * from "./forms/radio";
 export * from "./forms/radio-button";
 export * from "./forms/range";
 export * from "./forms/search";
+export * from "./forms/tags";
 export * from "./forms/textarea";
 export * from "./forms/timepicker";
 export * from "./forms/toggle";

package/dist/indicator/Indicator.svelte

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

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

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

package/dist/kbd/Kbd.svelte

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