flowbite-svelte 1.12.6 → 1.13.1

package/dist/datepicker/Datepicker.svelte

@@ -7,7 +7,7 @@
   import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
   import { getTheme } from "../theme/themeUtils";
 
-  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), availableFrom = null, availableTo = null, locale = "default", translationLocale = locale, firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className, elementRef = $bindable() }: DatepickerProps = $props();
+  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), availableFrom = null, availableTo = null, locale = "default", translationLocale = locale, firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className, elementRef = $bindable(), actionSlot }: DatepickerProps = $props();
 
   const theme = getTheme("datepicker");
 
@@ -458,6 +458,20 @@
           <Button onclick={handleApply} {color} size="sm">Apply</Button>
         </div>
       {/if}
+
+      {#if actionSlot}
+        <div class={clsx(classes?.actionSlot, theme?.actionSlot)}>
+          {@render actionSlot({
+            selectedDate: range ? { from: rangeFrom, to: rangeTo } : value,
+            handleClear,
+            handleApply,
+            close: () => {
+              isOpen = false;
+              showMonthSelector = false;
+            }
+          })}
+        </div>
+      {/if}
     </div>
   {/if}
 </div>
@@ -466,7 +480,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L451)
+[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
 ## Props
 @prop value = $bindable()
 @prop defaultDate = null
@@ -499,4 +513,5 @@
 @prop monthBtn = "text-gray-700 dark:text-gray-300"
 @prop class: className
 @prop elementRef = $bindable()
+@prop actionSlot
 -->

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DatepickerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L451)
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
  * ## Props
  * @prop value = $bindable()
  * @prop defaultDate = null
@@ -35,6 +35,7 @@ import { type DatepickerProps } from "..";
  * @prop monthBtn = "text-gray-700 dark:text-gray-300"
  * @prop class: className
  * @prop elementRef = $bindable()
+ * @prop actionSlot
  */
 declare const Datepicker: import("svelte").Component<DatepickerProps, {}, "value" | "rangeFrom" | "rangeTo" | "elementRef">;
 type Datepicker = ReturnType<typeof Datepicker>;

package/dist/datepicker/theme.d.ts

@@ -128,6 +128,7 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     nav: string;
     dayButton: string;
     monthButton: string;
+    actionSlot: string;
 }, undefined, {
     color: {
         primary: {
@@ -255,6 +256,7 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     nav: string;
     dayButton: string;
     monthButton: string;
+    actionSlot: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
         primary: {
@@ -382,4 +384,5 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     nav: string;
     dayButton: string;
     monthButton: string;
+    actionSlot: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/datepicker/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const datepicker = tv({
     slots: {
         base: "inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4",
-        input: "w-full rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50",
+        input: "w-full rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 border-gray-300 bg-gray-50 text-gray-900",
         titleVariant: "mb-2 text-lg font-semibold text-gray-900 dark:text-white",
         polite: "text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
         button: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
@@ -11,7 +11,8 @@ export const datepicker = tv({
         grid: "grid grid-cols-7 gap-1 w-64",
         nav: "mb-4 flex items-center justify-between",
         dayButton: "h-8 w-full block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center font-semibold text-sm day p-0",
-        monthButton: "rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700"
+        monthButton: "rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700",
+        actionSlot: ""
     },
     variants: {
         color: {

package/dist/device-mockups/Android.svelte

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

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

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

package/dist/device-mockups/DefaultMockup.svelte

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

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

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

package/dist/device-mockups/Desktop.svelte

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

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

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

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#L484)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L492)
 ## 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#L484)
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L492)
  * ## Props
  * @prop children
  * @prop device = "default"

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#L526)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L534)
 ## 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#L526)
+ * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L534)
  * ## 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#L497)
+[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L505)
 ## 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#L497)
+ * [LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L505)
  * ## 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#L536)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L544)
 ## 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#L536)
+ * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L544)
  * ## 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#L546)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L554)
 ## 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#L546)
+ * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L554)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/dialog/Dialog.svelte

@@ -16,6 +16,7 @@
 
   // Prefer requestClose when available to trigger a cancellable "cancel" event; otherwise synthesize it.
   const cancel = (dlg: HTMLDialogElement) => {
+    // @ts-ignore
     if (typeof dlg.requestClose === "function") return dlg.requestClose();
     dlg.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
   };
@@ -35,12 +36,15 @@
   }
 
   function _onclick(ev: MouseEvent & { currentTarget: HTMLDialogElement }) {
-    const dlg: HTMLDialogElement = ev.currentTarget,
-      rect = dlg.getBoundingClientRect(),
-      clickedInContent = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
+    const dlg: HTMLDialogElement = ev.currentTarget;
+    if (ev.target === dlg) {
+      // click outside - backdrop is dialog
+      const rect = dlg.getBoundingClientRect(),
+        clickedInContent = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
 
-    if (outsideclose && !clickedInContent) {
-      return cancel(dlg);
+      if (outsideclose && !clickedInContent) {
+        return cancel(dlg);
+      }
     }
 
     if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
@@ -134,7 +138,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L558)
+[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L566)
 ## Props
 @prop children
 @prop onaction = ()

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

@@ -2,7 +2,7 @@ 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#L558)
+ * [DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L566)
  * ## Props
  * @prop children
  * @prop onaction = ()

package/dist/drawer/Drawer.svelte

@@ -6,8 +6,15 @@
   import { sineIn } from "svelte/easing";
   import { fly } from "svelte/transition";
   import { drawer } from ".";
+  import { setContext } from "svelte";
 
-  let { children, open = $bindable(false), hidden = $bindable(), width, dismissable = false, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
+  let { children, open = $bindable(false), hidden = $bindable(), modal, offset, width, dismissable = offset ? false : undefined, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
+
+  setContext("drawer", {
+    get placement() {
+      return placement;
+    }
+  });
 
   // back compatibility
   if (hidden !== undefined) console.warn("'hidden' property is deprecated. Please use the 'open' property to manage 'Drawer'.");
@@ -35,34 +42,64 @@
 
   const theme = getTheme("drawer");
 
-  const { base } = $derived(drawer({ placement, width, modal: restProps.modal }));
+  let shifted = $state(true);
 
-  let innerWidth: number = $state(-1);
-  let innerHeight: number = $state(-1);
-  // let startX = $derived(position === 'fixed'? 0: )
-  let x = $derived(placement === "left" ? -320 : placement === "right" ? innerWidth + 320 : undefined);
-  let y = $derived(placement === "top" ? -100 : placement === "bottom" ? innerHeight + 100 : undefined);
+  const { base } = $derived(drawer({ placement, width, modal: offset && !open ? false : modal, shifted }));
 
-  let transition_params = $derived(transitionParams ?? Object.assign({}, { x, y, duration: 200, easing: sineIn }));
-</script>
+  let x = $state(),
+    y = $state();
+
+  let transition_params = $derived({ x, y, duration: 300, easing: sineIn, opacity: 1, ...transitionParams });
+
+  function init(node: HTMLDialogElement) {
+    // set initial offset, later it will be switched on/off by onintrostart
+    if (offset) node.style[placement] = offset;
+  }
 
-<svelte:window bind:innerWidth bind:innerHeight />
+  function onintrostart(ev: CustomEvent & { currentTarget: HTMLDialogElement }) {
+    // set the values for transition start position
+    const dlg = ev.currentTarget;
+    const { innerWidth = 0, innerHeight = 0 } = dlg.ownerDocument.defaultView ?? {};
 
-<Dialog bind:open {transition} {dismissable} {outsideclose} transitionParams={transition_params} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+    const rect = dlg.getBoundingClientRect();
+
+    x = placement === "left" ? rect.left : placement === "right" ? rect.right - innerWidth : undefined;
+    y = placement === "top" ? rect.top : placement === "bottom" ? rect.bottom - innerHeight : undefined;
+    // remove shift for transition end position
+    shifted = false;
+
+    // add offset if closed, remove it when open
+    if (offset) dlg.style[placement] = open ? "" : offset;
+  }
+
+  function onoutrostart(ev: CustomEvent & { currentTarget: HTMLDialogElement }) {
+    shifted = true;
+  }
+</script>
+
+<Dialog {@attach init} bind:open {modal} {dismissable} {transition} {onintrostart} {onoutrostart} {outsideclose} transitionParams={transition_params} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   {@render children?.()}
 </Dialog>
 
+{#if offset && !open}
+  <Dialog {@attach init} open modal={false} {dismissable} {outsideclose} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+    {@render children?.()}
+  </Dialog>
+{/if}
+
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L572)
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L580)
 ## Props
 @prop children
 @prop open = $bindable(false)
 @prop hidden = $bindable()
+@prop modal
+@prop offset
 @prop width
-@prop dismissable = false
+@prop dismissable = offset ? false : undefined
 @prop placement = "left"
 @prop class: className
 @prop transitionParams

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

@@ -2,13 +2,15 @@ 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#L572)
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L580)
  * ## Props
  * @prop children
  * @prop open = $bindable(false)
  * @prop hidden = $bindable()
+ * @prop modal
+ * @prop offset
  * @prop width
- * @prop dismissable = false
+ * @prop dismissable = offset ? false : undefined
  * @prop placement = "left"
  * @prop class: className
  * @prop transitionParams

package/dist/drawer/DrawerHandle.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getTheme } from "../theme/themeUtils";
+  import type { DrawerHandleProps } from "../types";
+  import clsx from "clsx";
+  import { drawerhandle } from "./theme";
+  import { getContext } from "svelte";
+
+  let { children, placement, "aria-label": ariaLabel, class: className, classes, ...restProps }: DrawerHandleProps = $props();
+
+  const ctx = getContext<{ placement: DrawerHandleProps["placement"] } | undefined>("drawer");
+
+  const theme = getTheme("drawerhandle");
+  let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" }));
+</script>
+
+<button type="button" aria-label={ariaLabel} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  {@render children?.()}
+  <span class={handle({ class: clsx(theme?.handle, classes?.handle) })}></span>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DrawerHandleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L588)
+## Props
+@prop children
+@prop placement
+@prop "aria-label": ariaLabel
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,16 @@
+import type { DrawerHandleProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DrawerHandleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L588)
+ * ## Props
+ * @prop children
+ * @prop placement
+ * @prop "aria-label": ariaLabel
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const DrawerHandle: import("svelte").Component<DrawerHandleProps, {}, "">;
+type DrawerHandle = ReturnType<typeof DrawerHandle>;
+export default DrawerHandle;

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#L579)
+[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L590)
 ## 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#L579)
+ * [DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L590)
  * ## Props
  * @prop closeIcon
  * @prop children

package/dist/drawer/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Drawer } from "./Drawer.svelte";
 export { default as Drawerhead } from "./Drawerhead.svelte";
-export { drawer, drawerhead } from "./theme";
+export { default as DrawerHandle } from "./DrawerHandle.svelte";
+export { drawer, drawerhead, drawerhandle } from "./theme";

package/dist/drawer/index.js

@@ -1,3 +1,4 @@
 export { default as Drawer } from "./Drawer.svelte";
 export { default as Drawerhead } from "./Drawerhead.svelte";
-export { drawer, drawerhead } from "./theme";
+export { default as DrawerHandle } from "./DrawerHandle.svelte";
+export { drawer, drawerhead, drawerhandle } from "./theme";

package/dist/drawer/theme.d.ts

@@ -36,6 +36,10 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    shifted: {
+        true: {};
+        false: {};
+    };
 }, {
     base: string;
 }, undefined, {}, {
@@ -93,3 +97,71 @@ export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     button: string;
     svg: string;
 }, undefined, unknown, unknown, undefined>>;
+export type DrawerHandleVariants = VariantProps<typeof drawerhandle> & Classes<typeof drawerhandle>;
+export declare const drawerhandle: import("tailwind-variants").TVReturnType<{
+    placement: {
+        left: {
+            base: string;
+            handle: string;
+        };
+        right: {
+            base: string;
+            handle: string;
+        };
+        top: {
+            base: string;
+            handle: string;
+        };
+        bottom: {
+            base: string;
+            handle: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, undefined, {
+    placement: {
+        left: {
+            base: string;
+            handle: string;
+        };
+        right: {
+            base: string;
+            handle: string;
+        };
+        top: {
+            base: string;
+            handle: string;
+        };
+        bottom: {
+            base: string;
+            handle: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, import("tailwind-variants").TVReturnType<{
+    placement: {
+        left: {
+            base: string;
+            handle: string;
+        };
+        right: {
+            base: string;
+            handle: string;
+        };
+        top: {
+            base: string;
+            handle: string;
+        };
+        bottom: {
+            base: string;
+            handle: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, undefined, unknown, unknown, undefined>>;