flowbite-svelte 1.10.4 → 1.10.5

package/dist/sidebar/Sidebar.svelte

@@ -9,28 +9,7 @@
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
 
-  let {
-    children,
-    isOpen = false, // Controls the *overlay* state on small screens
-    closeSidebar,
-    isSingle = true,
-    breakpoint = "md", // e.g., 'md'
-    alwaysOpen = false, // When true, sidebar is always visible, no hamburger menu
-    position = "fixed",
-    activateClickOutside = true,
-    backdrop = true,
-    backdropClass,
-    transition = fly,
-    params,
-    divClass,
-    ariaLabel,
-    nonActiveClass,
-    activeClass,
-    activeUrl = "",
-    class: className,
-    disableBreakpoints = false, // Key prop for Drawer integration
-    ...restProps
-  }: SidebarProps = $props();
+  let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", alwaysOpen = false, position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, disableBreakpoints = false, ...restProps }: SidebarProps = $props();
 
   const theme = getTheme("sidebar");
 
@@ -43,15 +22,8 @@
   };
 
   let innerWidth: number = $state(-1);
-  // This derived state is now primarily for trapFocus and transition,
-  // NOT for rendering the main sidebar element in standalone mode.
-  // It determines if the screen size *would* make it "large" if alwaysOpen were applied.
-  let isLargeScreen = $derived(innerWidth >= breakpointValues[breakpoint]);
-
-  // Determine if the sidebar should be "open" based on explicit isOpen or large screen AND alwaysOpen
-  // This state is what should drive the 'hidden' / 'block' classes for the sidebar itself,
-  // which will be passed to tailwind-variants.
-  let shouldBeOpen = $derived(isOpen || (alwaysOpen && isLargeScreen));
+  // isLargeScreen should only be true if not disabling breakpoints and it meets the criteria
+  let isLargeScreen = $derived(disableBreakpoints ? false : alwaysOpen || innerWidth >= breakpointValues[breakpoint]);
 
   const activeUrlStore = writable("");
   setContext("activeUrl", activeUrlStore);
@@ -59,23 +31,8 @@
     activeUrlStore.set(activeUrl);
   });
 
-  // Pass shouldBeOpen to sidebar utility for `isOpen` variant and other relevant styling.
-  // Pass alwaysOpen directly to sidebar utility for the `alwaysOpen` variant.
-  const {
-    base,
-    active,
-    nonactive,
-    div,
-    backdrop: backdropCls
-  } = $derived(
-    sidebar({
-      isOpen: shouldBeOpen, // Now dynamically drives the tv `isOpen` variant
-      breakpoint: alwaysOpen ? undefined : breakpoint, // Apply breakpoint variant ONLY if not alwaysOpen
-      position,
-      backdrop: backdrop && !disableBreakpoints, // Backdrop for standalone sidebar
-      alwaysOpen // Pass alwaysOpen directly
-    })
-  );
+  if (disableBreakpoints) isOpen = true;
+  const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop, alwaysOpen: alwaysOpen && !disableBreakpoints }));
 
   let sidebarCtx: SidebarCtxType = {
     get closeSidebar() {
@@ -90,11 +47,11 @@
     isSingle
   };
 
-  // Transition parameters for the fly effect when opening/closing
   let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
 
   setContext("sidebarContext", sidebarCtx);
 
+  // Handler for Escape key
   const handleEscape = () => {
     closeSidebar?.();
   };
@@ -103,17 +60,26 @@
 <svelte:window bind:innerWidth />
 
 {#if !disableBreakpoints}
-  <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={isOpen && !alwaysOpen ? transitionParams : undefined} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
-    <div class={cn(div(), clsx(divClass), (theme as SidebarTheme)?.base)}>
-      {@render children()}
-    </div>
-  </aside>
-
-  {#if isOpen && !alwaysOpen && backdrop}
-    <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)} onclick={activateClickOutside ? closeSidebar : undefined}></div>
+  {#if isOpen || isLargeScreen}
+    {#if isOpen && !alwaysOpen}
+      {#if backdrop && activateClickOutside}
+        <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)} onclick={closeSidebar}></div>
+      {:else if backdrop && !activateClickOutside}
+        <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)}></div>
+      {:else if !backdrop && activateClickOutside}
+        <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeSidebar}></div>
+      {:else if !backdrop && !activateClickOutside}
+        <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
+      {/if}
+    {/if}
+    <aside use:trapFocus={!isLargeScreen && isOpen && !alwaysOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={!alwaysOpen ? transitionParams : undefined} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
+      <div class={cn(div(), clsx(divClass), (theme as SidebarTheme)?.base)}>
+        {@render children()}
+      </div>
+    </aside>
   {/if}
 {:else}
-  <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={isOpen && !alwaysOpen ? transitionParams : undefined} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
+  <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
     <div class={cn(div(), clsx(divClass), (theme as SidebarTheme)?.base)}>
       {@render children()}
     </div>

package/dist/sidebar/theme.d.ts

@@ -13,12 +13,8 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
         };
     };
     isOpen: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
+        true: string;
+        false: string;
     };
     breakpoint: {
         sm: {
@@ -66,12 +62,8 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
         };
     };
     isOpen: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
+        true: string;
+        false: string;
     };
     breakpoint: {
         sm: {
@@ -119,12 +111,8 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
         };
     };
     isOpen: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
+        true: string;
+        false: string;
     };
     breakpoint: {
         sm: {

package/dist/sidebar/theme.js

@@ -1,4 +1,3 @@
-// theme.ts
 import { tv } from "tailwind-variants";
 export const sidebar = tv({
     slots: {
@@ -14,10 +13,9 @@ export const sidebar = tv({
             absolute: { base: "absolute" },
             static: { base: "static" }
         },
-        // Reintroducing isOpen, but this will only apply when isLargeScreen AND alwaysOpen is false
         isOpen: {
-            true: { base: "block" }, // When explicitly open (hamburger menu clicked)
-            false: { base: "hidden" } // When explicitly closed
+            true: "block",
+            false: "hidden"
         },
         breakpoint: {
             sm: { base: "sm:block" },
@@ -27,58 +25,21 @@ export const sidebar = tv({
             "2xl": { base: "2xl:block" }
         },
         alwaysOpen: {
-            true: { base: "block" } // This variant will ensure it's always block regardless of breakpoints
+            true: { base: "block" } // Always display the sidebar when alwaysOpen is true
         },
         backdrop: {
             true: { backdrop: "bg-gray-900 opacity-75" }
         }
     },
     compoundVariants: [
-        // Rule for responsive display when NOT alwaysOpen
-        {
-            alwaysOpen: false, // Only apply these if the sidebar is NOT always open
-            breakpoint: "sm",
-            class: { base: "sm:block" }
-        },
-        {
-            alwaysOpen: false,
-            breakpoint: "md",
-            class: { base: "md:block" }
-        },
-        {
-            alwaysOpen: false,
-            breakpoint: "lg",
-            class: { base: "lg:block" }
-        },
-        {
-            alwaysOpen: false,
-            breakpoint: "xl",
-            class: { base: "xl:block" }
-        },
-        {
-            alwaysOpen: false,
-            breakpoint: "2xl",
-            class: { base: "2xl:block" }
-        },
-        // Override: When alwaysOpen is true, it should always be visible, ignoring `isOpen` and `breakpoint`
+        // When alwaysOpen is true, override the breakpoint display classes
         {
             alwaysOpen: true,
             class: {
-                base: "!block" // Force block display
-            }
-        },
-        // Another compound variant to hide it below the breakpoint if not alwaysOpen and not explicitly open
-        {
-            alwaysOpen: false,
-            isOpen: false, // If it's not always open AND not explicitly open (via hamburger)
-            class: {
-                base: "hidden" // Hide it by default. Breakpoint rules will override this for larger screens.
+                base: "!block"
             }
         }
-    ],
-    defaultVariants: {
-        isOpen: false // Default to closed on small screens if not specified
-    }
+    ]
 });
 export const sidebarButton = tv({
     base: "inline-flex items-center p-0 mt-0 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.10.4",
+  "version": "1.10.5",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {