v1.11.4

fix: #1710 add breakpoint to navbar components

Author: shinokada

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.11.4
+
+### Patch Changes
+
+- feat: breakpoint for nav components
+
 ## 1.11.3
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -63,8 +63,10 @@
     "eslint-plugin-svelte": "^3.11.0",
     "flowbite-svelte-blocks": "^2.1.0",
     "flowbite-svelte-icons": "^2.2.1",
+    "flowbite-svelte-illustrations": "^1.0.4",
     "flowbite-typography": "^1.0.5",
     "globals": "^16.3.0",
+    "highlight.js": "^11.11.1",
     "jsdom": "^26.1.0",
     "katex": "^0.16.22",
     "lowlight": "^3.3.0",
@@ -81,7 +83,7 @@
     "svelte-doc-llm": "^0.2.2",
     "svelte-lib-helpers": "^0.4.30",
     "svelte-meta-tags": "^4.4.0",
-    "svelte-rune-highlight": "^0.6.6",
+    "svelte-rune-highlight": "^0.6.8",
     "tailwindcss": "^4.1.11",
     "tsx": "^4.20.3",
     "typescript": "^5.9.2",
@@ -145,7 +147,7 @@
     "date-fns": "^4.1.0",
     "flowbite": "^3.1.2",
     "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-variants": "2.0.1"
   },
   "files": [
     "dist",

pnpm-lock.yaml

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

src/lib/navbar/NavBrand.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1081)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1084)
 ## Props
 @prop children
 @prop fluid

src/lib/navbar/NavContainer.svelte

@@ -4,7 +4,7 @@
   import ToolbarButton from "../toolbar/ToolbarButton.svelte";
   import Menu from "./Menu.svelte";
   import { navbarHamburger } from "./theme";
-  import type { NavbarState, NavHamburgerProps } from "$lib/types";
+  import type { NavbarState, NavHamburgerProps, NavbarBreakpoint } from "$lib/types";
   import type { MouseEventHandler } from "svelte/elements";
   import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
 
@@ -14,10 +14,10 @@
   const styling = $derived(classes ?? { menu: menuClass });
 
   const theme = getTheme("navbarHamburger");
+  const navState = getContext<NavbarState>("navState");
+  const navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
+  const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint });
 
-  let { base, menu } = navbarHamburger();
-
-  let navState = getContext<NavbarState>("navState");
   const toggle: MouseEventHandler<HTMLButtonElement> = (ev) => {
     navState.hidden = !navState.hidden;
   };
@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1085)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
 ## Props
 @prop children
 @prop onclick

src/lib/navbar/NavHamburger.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import { getTheme } from "$lib/theme/themeUtils";
-  import type { NavbarState, NavLiProps } from "$lib/types";
+  import type { NavbarState, NavLiProps, NavbarBreakpoint } from "$lib/types";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import { navbarLi } from "./theme";
 
   let navState = getContext<NavbarState>("navState");
+  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
 
   let { children, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
   const theme = getTheme("navbarLi");
 
   let active = $derived(navState.activeUrl ? restProps.href === navState.activeUrl : false);
-  let liClass = $derived(navbarLi({ hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
+  let liClass = $derived(navbarLi({ breakpoint: navBreakpoint, hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
 </script>
 
 <li>
@@ -31,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
 ## Props
 @prop children
 @prop activeClass

src/lib/navbar/NavLi.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
-  import type { NavbarState, NavUlProps } from "$lib/types";
+  import type { NavbarState, NavUlProps, NavbarBreakpoint } from "$lib/types";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import { sineIn } from "svelte/easing";
@@ -9,6 +9,7 @@
   import { navbarUl } from "./theme";
 
   let navState = getContext<NavbarState>("navState");
+  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
 
   let { children, activeUrl = $bindable(), ulClass, slideParams, transition = slide, transitionParams, activeClass, nonActiveClass, respectMotionPreference = true, class: clasName, classes, ...restProps }: NavUlProps = $props();
 
@@ -40,7 +41,7 @@
 
   let hidden: boolean = $derived(navState.hidden ?? true);
 
-  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden }));
+  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint }));
 
   $effect(() => {
     navState.activeClass = active({ class: clsx(theme?.active, styling.active) });
@@ -70,7 +71,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1091)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1094)
 ## Props
 @prop children
 @prop activeUrl = $bindable()

src/lib/navbar/NavUl.svelte

@@ -8,12 +8,13 @@
 
   // propagate props type from underlying Frame
 
-  let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, ...restProps }: NavbarProps = $props();
+  let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
 
   const theme = getTheme("navbar");
 
   let navState = $state({ hidden: true });
   setContext<NavbarState>("navState", navState);
+  setContext("breakpoint", breakpoint);
 
   // Add reference to the navbar element
   let navbarElement: HTMLElement;
@@ -45,12 +46,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1072)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1074)
 ## Props
 @prop children
 @prop fluid
 @prop navContainerClass
 @prop class: className
 @prop closeOnClickOutside = true
+@prop breakpoint = "md"
 @prop ...restProps
 -->