flowbite-svelte 1.29.1 → 1.30.0

package/dist/list-group/Listgroup.svelte.d.ts

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

package/dist/list-group/ListgroupItem.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import clsx from "clsx";
   import type { ListgroupItemProps } from "..";
   import { listGroupItem, type ListgroupItemVariants } from "./theme";
   import { getTheme } from "../theme/themeUtils";
+  import { getListGroupContext } from "../context";
 
   let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-15 w-15", ...restProps }: ListgroupItemProps = $props();
 
   const theme = getTheme("listGroupItem");
 
-  active = active ?? getContext("listGrpActive");
-  horizontal = horizontal ?? getContext("listGrpHorizontal");
+  const listGroupCtx = getListGroupContext();
+  const finalActive = $derived(active ?? listGroupCtx?.active);
+  const finalHorizontal = $derived(horizontal ?? listGroupCtx?.horizontal);
 
   let state: ListgroupItemVariants["state"] = $derived(disabled ? "disabled" : current ? "current" : "normal");
-  let itemClass = $derived(listGroupItem({ state, active, horizontal, class: clsx(theme, className) }));
+  let itemClass = $derived(listGroupItem({ state, active: finalActive, horizontal: finalHorizontal, class: clsx(theme, className) }));
 </script>
 
 {#snippet nameOrChildren()}
@@ -45,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1082)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
 ## Props
 @prop children
 @prop active

package/dist/list-group/ListgroupItem.svelte.d.ts

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

package/dist/mega-menu/MegaMenu.svelte

@@ -7,8 +7,9 @@
 
   let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, classes, ...restProps }: MegaMenuProps = $props();
 
-  //  ulClass, extraClass
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("MegaMenu", { ulClass, extraClass }, { ulClass: "ul", extraClass: "extra" });
+
   const styling = $derived(classes ?? { ul: ulClass, extra: extraClass });
   const theme = getTheme("megamenu");
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
@@ -33,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1093)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
 ## Props
 @prop children
 @prop extra

package/dist/mega-menu/MegaMenu.svelte.d.ts

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

package/dist/modal/Modal.svelte

@@ -30,8 +30,9 @@
     ...restProps
   }: ModalProps = $props();
 
-  // form, header, footer, body, close
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Modal", { headerClass, bodyClass, footerClass, closeBtnClass }, { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" });
+
   const styling = $derived(classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass });
 
   const theme = getTheme("modal");
@@ -48,6 +49,7 @@
   dismissable={dismissable && !title && !permanent}
   transitionParams={paramsOptions}
   {classes}
+  {permanent}
   {...restProps}
   class={base({ fullscreen, class: clsx(theme?.base, className) })}
 >
@@ -77,7 +79,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1104)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1162)
 ## Props
 @prop children
 @prop header

package/dist/modal/Modal.svelte.d.ts

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

package/dist/navbar/Menu.svelte

@@ -6,8 +6,10 @@
 
   let viewBox: string = $state("0 0 24 24");
   let svgpath: string = $state("");
-  let svgoutline = `<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `;
-  let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+  let svgoutline = $derived(`<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `);
+  let svgsolid = $derived(
+    `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `
+  );
   $effect(() => {
     switch (variation) {
       case "outline":
@@ -33,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1115)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

package/dist/navbar/Menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1115)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -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#L1139)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1197)
 ## Props
 @prop children
 @prop class: className

package/dist/navbar/NavBrand.svelte.d.ts

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

package/dist/navbar/NavContainer.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#L1141)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1199)
 ## Props
 @prop children
 @prop fluid

package/dist/navbar/NavContainer.svelte.d.ts

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

package/dist/navbar/NavHamburger.svelte

@@ -1,24 +1,27 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { getContext } from "svelte";
   import ToolbarButton from "../toolbar/ToolbarButton.svelte";
   import Menu from "./Menu.svelte";
   import { navbarHamburger } from "./theme";
-  import type { NavbarState, NavHamburgerProps, NavbarBreakpoint } from "../types";
+  import type { NavHamburgerProps } from "../types";
   import type { MouseEventHandler } from "svelte/elements";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
 
   let { children, onclick, menuClass, class: className, classes, name = "Open main menu", ...restProps }: NavHamburgerProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("NavHamburger", { menuClass }, { menuClass: "menu" });
+
   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 });
+  const navState = getNavbarStateContext();
+  const navBreakpoint = getNavbarBreakpointContext();
+  const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint ?? "md" });
 
   const toggle: MouseEventHandler<HTMLButtonElement> = () => {
+    if (!navState) return;
     navState.hidden = !navState.hidden;
   };
 </script>
@@ -31,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1145)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1203)
 ## Props
 @prop children
 @prop onclick

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -1,7 +1,7 @@
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1145)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1203)
  * ## Props
  * @prop children
  * @prop onclick

package/dist/navbar/NavLi.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
   import { getTheme } from "../theme/themeUtils";
-  import type { NavbarState, NavLiProps, NavbarBreakpoint } from "../types";
+  import type { NavLiProps } from "../types";
   import clsx from "clsx";
-  import { getContext } from "svelte";
   import { navbarLi } from "./theme";
+  import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
 
-  let navState = getContext<NavbarState>("navState");
-  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
+  let navState = getNavbarStateContext();
+  let navBreakpoint = getNavbarBreakpointContext();
 
   let { children, onclick, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
   const theme = getTheme("navbarLi");
 
-  let active = $derived(navState.activeUrl ? restProps.href === navState.activeUrl : false);
+  let active = $derived(navState?.activeUrl ? restProps.href === navState.activeUrl : false);
   let liClass = $derived(
-    navbarLi({ breakpoint: navBreakpoint, hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) })
+    navbarLi({
+      breakpoint: navBreakpoint ?? "md",
+      hidden: navState?.hidden ?? true,
+      class: clsx(active ? (activeClass ?? navState?.activeClass) : (nonActiveClass ?? navState?.nonActiveClass), theme, className)
+    })
   );
 
   function handleClick(event: MouseEvent) {
     // Close the mobile menu when a link is clicked
-    if (restProps.href !== undefined && !navState.hidden) {
+    if (navState && restProps.href !== undefined && !navState.hidden) {
       navState.hidden = true;
     }
 
@@ -47,7 +51,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1166)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1224)
 ## Props
 @prop children
 @prop onclick

package/dist/navbar/NavLi.svelte.d.ts

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

package/dist/navbar/NavUl.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import type { NavbarState, NavUlProps, NavbarBreakpoint } from "../types";
+  import type { NavUlProps } from "../types";
   import clsx from "clsx";
-  import { getContext } from "svelte";
   import { sineIn } from "svelte/easing";
   import { prefersReducedMotion } from "svelte/motion";
   import { fade, fly, scale, slide } from "svelte/transition";
   import { navbarUl } from "./theme";
+  import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
 
-  let navState = getContext<NavbarState>("navState");
-  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
+  let navState = getNavbarStateContext();
+  let navBreakpoint = getNavbarBreakpointContext();
 
   let {
     children,
@@ -26,7 +26,9 @@
     ...restProps
   }: NavUlProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("NavUl", { ulClass, activeClass, nonActiveClass }, { ulClass: "ul", activeClass: "active", nonActiveClass: "nonActive" });
+
   const styling = $derived(classes ?? { ul: ulClass, active: activeClass, nonActive: nonActiveClass });
 
   const theme = getTheme("navbarUl");
@@ -52,11 +54,12 @@
     return finalParams;
   });
 
-  let hidden: boolean = $derived(navState.hidden ?? true);
+  let hidden: boolean = $derived(navState?.hidden ?? true);
 
-  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint }));
+  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint ?? "md" }));
 
   $effect(() => {
+    if (!navState) return;
     navState.activeClass = active({ class: clsx(theme?.active, styling.active) });
     navState.nonActiveClass = nonActive({ class: clsx(theme?.nonActive, styling.nonActive) });
     navState.activeUrl = activeUrl;
@@ -84,7 +87,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1209)
 ## Props
 @prop children
 @prop activeUrl = $bindable()

package/dist/navbar/NavUl.svelte.d.ts

@@ -2,7 +2,7 @@ import type { NavUlProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1209)
  * ## Props
  * @prop children
  * @prop activeUrl = $bindable()

package/dist/navbar/Navbar.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { setContext } from "svelte";
   import NavContainer from "./NavContainer.svelte";
   import { navbar } from "./theme";
   import type { NavbarState, NavbarProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
+  import { setNavbarStateContext, setNavbarBreakpointContext } from "../context";
 
   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);
+  let navState = $state<NavbarState>({ hidden: true });
+  setNavbarStateContext(navState);
+
+  $effect(() => {
+    setNavbarBreakpointContext(breakpoint);
+  });
 
   // Add reference to the navbar element
   let navbarElement: HTMLElement;
@@ -44,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1131)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1189)
 ## Props
 @prop children
 @prop fluid

package/dist/navbar/Navbar.svelte.d.ts

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

package/dist/pagination/Pagination.svelte

@@ -1,18 +1,30 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import { pagination } from "./theme";
   import PaginationItem from "./PaginationItem.svelte";
-  import type { PaginationProps } from "../types";
+  import type { PaginationProps, PaginationContextType } from "../types";
   import { getTheme } from "../theme/themeUtils";
+  import { setPaginationContext } from "../context";
   import clsx from "clsx";
 
   let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: PaginationProps = $props();
 
   const theme = getTheme("pagination");
 
-  setContext("group", true);
-  setContext("table", table);
-  setContext("size", size);
+  // Create context object
+  const ctx: PaginationContextType = {
+    get group() {
+      return true;
+    },
+    get table() {
+      return table;
+    },
+    get size() {
+      return size;
+    }
+  };
+
+  // Set context during initialization
+  setPaginationContext(ctx);
 
   const paginationCls = $derived(pagination({ table, size, class: clsx(theme) }));
 </script>
@@ -55,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1238)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1296)
 ## Props
 @prop pages = []
 @prop previous

package/dist/pagination/Pagination.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaginationProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1238)
+ * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1296)
  * ## Props
  * @prop pages = []
  * @prop previous

package/dist/pagination/PaginationButton.svelte

@@ -2,35 +2,34 @@
   import clsx from "clsx";
   import { paginationButton } from "./theme";
   import type { PaginationButtonProps } from "../types";
-  import { getContext } from "svelte";
+  import { getPaginationContext } from "../context";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, size, onclick, disabled = false, class: className, href, active = false, ...restProps }: PaginationButtonProps = $props();
 
   const theme = getTheme("paginationButton");
 
-  const group = getContext<boolean>("group");
-  const table = getContext<boolean>("table");
-  const activeClasses = getContext<string>("activeClasses");
+  // Get context - it will be undefined if used outside Pagination
+  const ctx = getPaginationContext();
 
   const paginationCls = $derived.by(() => {
-    if (active && activeClasses) {
+    if (active && ctx?.activeClasses) {
       return paginationButton({
-        size: getContext("size") ?? size,
+        size: ctx?.size ?? size,
         active: false, // Set to false to avoid theme's active styles
-        group,
-        table,
+        group: ctx?.group ?? false,
+        table: ctx?.table ?? false,
         disabled,
-        class: clsx(theme, activeClasses, className)
+        class: clsx(theme, ctx.activeClasses, className)
       });
     }
 
     // Use default theme styles
     return paginationButton({
-      size: getContext("size") ?? size,
+      size: ctx?.size ?? size,
       active: active,
-      group,
-      table,
+      group: ctx?.group ?? false,
+      table: ctx?.table ?? false,
       disabled,
       class: clsx(theme, className)
     });
@@ -63,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1202)
+[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1260)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationButton.svelte.d.ts

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

package/dist/pagination/PaginationItem.svelte

@@ -2,16 +2,25 @@
   import clsx from "clsx";
   import { paginationItem } from "./theme";
   import type { PaginationItemProps } from "../types";
-  import { getContext } from "svelte";
+  import { getPaginationContext } from "../context";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, size, class: className, href, active, ...restProps }: PaginationItemProps = $props();
 
   const theme = getTheme("paginationItem");
 
-  const group = getContext<boolean>("group");
-  const table = getContext<boolean>("table");
-  const paginationCls = $derived(paginationItem({ size: getContext("size") ?? size, active, group, table, class: clsx(theme, className) }));
+  // Get context - it will be undefined if used outside Pagination
+  const ctx = getPaginationContext();
+
+  const paginationCls = $derived(
+    paginationItem({
+      size: ctx?.size ?? size,
+      active,
+      group: ctx?.group ?? false,
+      table: ctx?.table ?? false,
+      class: clsx(theme, className)
+    })
+  );
 </script>
 
 {#if href}
@@ -32,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1234)
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1292)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationItem.svelte.d.ts

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