flowbite-svelte 1.11.8 → 1.12.0

package/dist/device-mockups/Ios.svelte

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

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

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

package/dist/device-mockups/Laptop.svelte

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

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

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

package/dist/device-mockups/Smartwatch.svelte

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

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

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

package/dist/device-mockups/Tablet.svelte

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

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

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

package/dist/dialog/Dialog.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { dialog, type DialogProps, type ParamsType, trapFocus } from "..";
+  import CloseButton from "../utils/CloseButton.svelte";
+  import { createDismissableContext } from "../utils/dismissable";
+  import clsx from "clsx";
+  import { sineIn } from "svelte/easing";
+  import { fade } from "svelte/transition";
+
+  let { children, onaction = () => true, oncancel, onsubmit, ontoggle, form = false, modal = true, autoclose = false, focustrap = false, open = $bindable(false), permanent = false, dismissable = true, outsideclose = true, class: className, classes, transition = fade, transitionParams, ...restProps }: DialogProps = $props();
+
+  const paramsOptions = $derived(transitionParams ?? { duration: 100, easing: sineIn });
+
+  let { base, form: formCls, close: closeCls } = dialog();
+
+  const close = (dlg: HTMLDialogElement) => (open = false);
+
+  // Prefer requestClose when available to trigger a cancellable "cancel" event; otherwise synthesize it.
+  const cancel = (dlg: HTMLDialogElement) => {
+    if (typeof dlg.requestClose === "function") return dlg.requestClose();
+    dlg.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
+  };
+
+  function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
+    if (ev.target !== ev.currentTarget) {
+      return; // ignore if not on dialog
+    }
+
+    // this event gets called when user canceled the dialog:
+    // pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
+    oncancel?.(ev);
+    if (ev.defaultPrevented) return;
+
+    ev.preventDefault(); // prevent anyway, we need clean close
+    if (!permanent) close(ev.currentTarget);
+  }
+
+  function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
+    const dlg: HTMLDialogElement = ev.currentTarget;
+    if (outsideclose && ev.target === dlg) {
+      return cancel(dlg);
+    }
+
+    if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
+      return close(dlg);
+    }
+  }
+
+  function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
+    // When dialog contains the <form method="dialog"> and when child with type="submit" was pressed
+
+    onsubmit?.(ev);
+    if (ev.defaultPrevented) return;
+
+    ev.preventDefault(); // stop dialog.close()
+
+    const dlg: HTMLDialogElement = ev.currentTarget;
+
+    if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
+      dlg.returnValue = ev.submitter.value;
+    }
+
+    if (!dlg.returnValue) {
+      return cancel(dlg); // if no action - treat that as cancel
+    }
+
+    // explicit false from onaction blocks the form closing
+    if (typeof onaction === "function" && onaction({ action: dlg.returnValue, data: new FormData(ev.target as HTMLFormElement) }) === false) return;
+
+    close(dlg);
+  }
+
+  function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
+    ontoggle?.(ev);
+    open = ev.newState === "open"; // for cases when toggle by other means
+  }
+
+  function init(dlg: HTMLDialogElement) {
+    if (modal) dlg.showModal();
+    else dlg.show();
+    return () => dlg.close();
+  }
+
+  const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
+
+  let ref: HTMLDialogElement | undefined = $state(undefined);
+
+  function close_handler(ev: MouseEvent) {
+    if (form) {
+      // dialog/form mechanism will close the dialog
+      return;
+    }
+
+    ref?.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
+  }
+
+  createDismissableContext(close_handler);
+</script>
+
+{#snippet content()}
+  {@render children?.()}
+  {#if dismissable && !permanent}
+    <CloseButton type="submit" formnovalidate class={closeCls({ class: clsx(classes?.close) })} />
+  {/if}
+{/snippet}
+{#if open}
+  <dialog {@attach init} bind:this={ref} use:focusTrap tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps} class={base({ class: clsx(className) })}>
+    {#if form}
+      <form method="dialog" class={formCls({ class: clsx(classes?.form) })}>
+        {@render content()}
+      </form>
+    {:else}
+      {@render content()}
+      <div class="h-full w-full"></div>
+    {/if}
+  </dialog>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
+## Props
+@prop children
+@prop onaction = ()
+@prop oncancel
+@prop onsubmit
+@prop ontoggle
+@prop form = false
+@prop modal = true
+@prop autoclose = false
+@prop focustrap = false
+@prop open = $bindable(false)
+@prop permanent = false
+@prop dismissable = true
+@prop outsideclose = true
+@prop class: className
+@prop classes
+@prop transition = fade
+@prop transitionParams
+@prop ...restProps
+-->

package/dist/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type DialogProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
+ * ## Props
+ * @prop children
+ * @prop onaction = ()
+ * @prop oncancel
+ * @prop onsubmit
+ * @prop ontoggle
+ * @prop form = false
+ * @prop modal = true
+ * @prop autoclose = false
+ * @prop focustrap = false
+ * @prop open = $bindable(false)
+ * @prop permanent = false
+ * @prop dismissable = true
+ * @prop outsideclose = true
+ * @prop class: className
+ * @prop classes
+ * @prop transition = fade
+ * @prop transitionParams
+ * @prop ...restProps
+ */
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/dialog/index.d.ts

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

package/dist/dialog/index.js

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

package/dist/dialog/theme.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type DialogVariants = VariantProps<typeof dialog> & Classes<typeof dialog>;
+export declare const dialog: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, {}, {
+    base: string;
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/dialog/theme.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const dialog = tv({
+    slots: {
+        base: "backdrop:bg-gray-900/50 open:flex flex-col bg-white dark:bg-gray-800",
+        form: "flex flex-col h-full w-full border-inherit dark:border-inherit divide-inherit dark:divide-inherit",
+        close: "absolute top-2.5 end-2.5"
+    },
+    variants: {
+    // position: {
+    //     fixed: { base: "fixed" },
+    //     absolute: { base: "absolute" }
+    // },
+    },
+    defaultVariants: {
+    // position: "fixed"
+    }
+});

package/dist/drawer/Drawer.svelte

@@ -1,25 +1,20 @@
 <script lang="ts">
-  import { type ParamsType, type DrawerProps, trapFocus } from "..";
+  import { type DrawerProps } from "..";
+  import Dialog from "../dialog/Dialog.svelte";
+  import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { fly } from "svelte/transition";
   import { sineIn } from "svelte/easing";
+  import { fly } from "svelte/transition";
   import { drawer } from ".";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { createDismissableContext } from "../utils/dismissable";
 
-  let { children, hidden = $bindable(), activateClickOutside = true, position, width, backdrop = true, backdropClass, placement = "left", class: className, classes, transitionParams, transitionType = fly, bodyScrolling = false, ...restProps }: DrawerProps = $props();
-
-  warnThemeDeprecation("Drawer", { backdropClass }, { backdropClass: "backdrop" });
-  const styling = $derived(classes ?? { backdrop: backdropClass });
+  let { children, open = $bindable(false), width, placement = "left", class: className, classes, transitionParams, transition = fly, ...restProps }: DrawerProps = $props();
 
   const theme = getTheme("drawer");
 
-  const { base, backdrop: backdropCls } = $derived(
+  const { base } = $derived(
     drawer({
-      position,
       placement,
-      width,
-      backdrop
+      width
     })
   );
 
@@ -29,44 +24,28 @@
   let x = $derived(placement === "left" ? -320 : placement === "right" ? innerWidth + 320 : undefined);
   let y = $derived(placement === "top" ? -100 : placement === "bottom" ? innerHeight + 100 : undefined);
 
-  let transition_params = $derived(Object.assign({}, { x, y, duration: 200, easing: sineIn }));
-
-  let ref: HTMLDivElement | undefined = $state(undefined);
-  function close(ev: MouseEvent) {
-    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
-      hidden = true;
-    }
-  }
-  createDismissableContext(close);
+  let transition_params = $derived(transitionParams ?? Object.assign({}, { x, y, duration: 200, easing: sineIn }));
 </script>
 
 <svelte:window bind:innerWidth bind:innerHeight />
 
-{#if !hidden}
-  <div role="presentation" bind:this={ref} class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })} onclick={activateClickOutside ? close : undefined} style={bodyScrolling ? "pointer-events: none;" : ""}></div>
-  <div use:trapFocus={{ onEscape: close as () => void }} {...restProps} class={base({ class: clsx(theme?.base, className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
-    {@render children?.()}
-  </div>
-{/if}
+<Dialog bind:open {transition} transitionParams={transition_params} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  {@render children?.()}
+</Dialog>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L555)
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L571)
 ## Props
 @prop children
-@prop hidden = $bindable()
-@prop activateClickOutside = true
-@prop position
+@prop open = $bindable(false)
 @prop width
-@prop backdrop = true
-@prop backdropClass
 @prop placement = "left"
 @prop class: className
 @prop classes
 @prop transitionParams
-@prop transitionType = fly
-@prop bodyScrolling = false
+@prop transition = fly
 @prop ...restProps
 -->

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

@@ -2,23 +2,18 @@ import { type DrawerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L555)
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L571)
  * ## Props
  * @prop children
- * @prop hidden = $bindable()
- * @prop activateClickOutside = true
- * @prop position
+ * @prop open = $bindable(false)
  * @prop width
- * @prop backdrop = true
- * @prop backdropClass
  * @prop placement = "left"
  * @prop class: className
  * @prop classes
  * @prop transitionParams
- * @prop transitionType = fly
- * @prop bodyScrolling = false
+ * @prop transition = fly
  * @prop ...restProps
  */
-declare const Drawer: import("svelte").Component<DrawerProps, {}, "hidden">;
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/drawer/Drawerhead.svelte

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

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

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

package/dist/drawer/theme.d.ts

@@ -2,16 +2,6 @@ import { type VariantProps } from "tailwind-variants";
 import type { Classes } from "../theme/themeUtils";
 export type DrawerVariants = VariantProps<typeof drawer> & Classes<typeof drawer>;
 export declare const drawer: import("tailwind-variants").TVReturnType<{
-    position: {
-        fixed: {
-            base: string;
-            backdrop: string;
-        };
-        absolute: {
-            base: string;
-            backdrop: string;
-        };
-    };
     placement: {
         left: {
             base: string;
@@ -37,103 +27,25 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    backdrop: {
-        true: {
-            backdrop: string;
-        };
-    };
 }, {
     base: string;
-    backdrop: string;
-}, undefined, {
-    position: {
-        fixed: {
-            base: string;
-            backdrop: string;
-        };
-        absolute: {
-            base: string;
-            backdrop: string;
-        };
-    };
-    placement: {
-        left: {
-            base: string;
-        };
-        right: {
-            base: string;
-        };
-        top: {
-            base: string;
-        };
-        bottom: {
-            base: string;
-        };
-    };
-    width: {
-        default: {
-            base: string;
-        };
-        full: {
-            base: string;
-        };
-        half: {
-            base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
-        };
-    };
-}, {
+}, undefined, {}, {
     base: string;
-    backdrop: string;
-}, import("tailwind-variants").TVReturnType<{
-    position: {
-        fixed: {
-            base: string;
-            backdrop: string;
-        };
-        absolute: {
-            base: string;
-            backdrop: string;
-        };
-    };
-    placement: {
-        left: {
-            base: string;
-        };
-        right: {
-            base: string;
-        };
-        top: {
-            base: string;
-        };
-        bottom: {
-            base: string;
-        };
-    };
-    width: {
-        default: {
-            base: string;
-        };
-        full: {
-            base: string;
-        };
-        half: {
-            base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
-        };
-    };
-}, {
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
     base: string;
-    backdrop: string;
-}, undefined, unknown, unknown, undefined>>;
+    form: string;
+    close: string;
+}, undefined, {}, {
+    base: string;
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>>;
 export type DrawerheadVariants = VariantProps<typeof drawerhead> & Classes<typeof drawerhead>;
 export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     [key: string]: {

package/dist/drawer/theme.js

@@ -1,31 +1,24 @@
 import { tv } from "tailwind-variants";
+import { dialog } from "../dialog";
 export const drawer = tv({
+    extend: dialog,
     slots: {
-        base: "overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800",
-        backdrop: "fixed top-0 start-0 z-50 w-full h-full"
+        base: "p-4 max-h-screen max-w-screen"
     },
     variants: {
-        position: {
-            fixed: { base: "fixed", backdrop: "fixed" },
-            absolute: { base: "absolute", backdrop: "absolute" }
-        },
         placement: {
-            left: { base: "inset-y-0 start-0" },
-            right: { base: "inset-y-0 end-0" },
-            top: { base: "inset-x-0 top-0" },
-            bottom: { base: "inset-x-0 bottom-0" }
+            left: { base: "me-auto h-full" },
+            right: { base: "ms-auto h-full" },
+            top: { base: "mb-auto w-full" },
+            bottom: { base: "mt-auto w-full" }
         },
         width: {
             default: { base: "w-80" },
             full: { base: "w-full" },
             half: { base: "w-1/2" }
-        },
-        backdrop: {
-            true: { backdrop: "bg-gray-900 opacity-75" }
         }
     },
     defaultVariants: {
-        position: "fixed",
         placement: "left",
         width: "default"
     }

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#L573)
+[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L580)
 ## Props
 @prop children
 @prop simple = false

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

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

package/dist/dropdown/DropdownDivider.svelte

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

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

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

package/dist/dropdown/DropdownGroup.svelte

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

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

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