flowbite-svelte 1.22.0 → 1.24.0

package/dist/scroll-spy/ScrollSpy.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+  import { scrollspy } from "./theme";
+  import type { ScrollSpyProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let {
+    items,
+    position = "top",
+    offset = 0,
+    sticky = true,
+    activeClass = "",
+    inactiveClass = "",
+    class: className = "",
+    smoothScroll = true,
+    scrollContainer,
+    onActiveChange,
+    onNavigate,
+    classes,
+    ...restProps
+  }: ScrollSpyProps = $props();
+
+  const browser = typeof window !== "undefined";
+  const styles = getTheme("scrollspy");
+  const INTERSECTION_RATIO_EPSILON = 0.01;
+  // Bottom margin determines how far up the viewport a section must scroll before becoming inactive
+  const ROOT_MARGIN_BOTTOM = "-40%";
+
+  let activeId = $state<string>(items.length > 0 ? items[0].id : "");
+  let isSticky = $state(false);
+  let navElement: HTMLElement | null = $state(null);
+  let scrollElement: Window | HTMLElement | null = $state(browser ? window : null);
+
+  // Track intersecting sections and their IntersectionObserverEntries
+  let intersectingSections = $state<Map<string, IntersectionObserverEntry>>(new Map());
+
+  const theme = $derived.by(() => {
+    const { base, container, list, li } = scrollspy({
+      position,
+      sticky,
+      isSticky
+    });
+
+    const { link: activeLink } = scrollspy({ active: true });
+    const { link: inactiveLink } = scrollspy({ active: false });
+
+    return {
+      base: base({ class: clsx(styles?.base, className) }),
+      container: container({ class: clsx(styles?.container, classes?.container) }),
+      list: list({ class: clsx(styles?.list, classes?.list) }),
+      activeLink: activeLink({ class: clsx(styles?.link, classes?.link) }),
+      inactiveLink: inactiveLink({ class: clsx(styles?.link, classes?.link) }),
+      li: li({ class: clsx(styles?.li, classes?.li) })
+    };
+  });
+
+  function getItemClass(itemId: string): string {
+    const isActive = activeId === itemId;
+    const link = isActive ? theme.activeLink : theme.inactiveLink;
+
+    const customClass = isActive ? activeClass : inactiveClass;
+
+    return clsx(link, customClass);
+  }
+
+  function scrollToSection(itemId: string, event?: MouseEvent) {
+    if (!browser) return;
+
+    if (event) event.preventDefault();
+
+    const element = document.getElementById(itemId);
+    if (!element) {
+      console.warn(`ScrollSpy: Element with id "${itemId}" not found`);
+      return;
+    }
+
+    const container = !scrollElement || scrollElement === window ? window : scrollElement;
+    const isWindow = container === window;
+
+    const elementRect = element.getBoundingClientRect();
+    let targetPosition: number;
+
+    if (isWindow) {
+      const currentScrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
+      targetPosition = elementRect.top + currentScrollY - offset;
+    } else {
+      const currentScrollTop = (container as HTMLElement).scrollTop; // Type assertion
+      const containerRect = (container as HTMLElement).getBoundingClientRect(); // Type assertion
+      targetPosition = elementRect.top - containerRect.top + currentScrollTop - offset;
+    }
+
+    try {
+      if (isWindow) {
+        window.scrollTo({
+          top: targetPosition,
+          behavior: smoothScroll ? "smooth" : "auto"
+        });
+      } else {
+        (container as HTMLElement).scrollTo({
+          // Type assertion
+          top: targetPosition,
+          behavior: smoothScroll ? "smooth" : "auto"
+        });
+      }
+    } catch (error) {
+      console.error("Scroll error:", error);
+    }
+
+    activeId = itemId;
+    onNavigate?.(itemId);
+  }
+
+  function handleKeydown(event: KeyboardEvent, itemId: string) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      scrollToSection(itemId);
+    }
+  }
+
+  function updateActiveSection() {
+    if (intersectingSections.size === 0) {
+      // No sections visible — highlight first item
+      if (activeId !== items[0]?.id) {
+        activeId = items[0]?.id || "";
+        onActiveChange?.(activeId);
+      }
+      return;
+    }
+
+    // Sort by intersection ratio descending, then by items order ascending
+    const itemIndexMap = new Map(items.map((item, index) => [item.id, index]));
+    const sorted = Array.from(intersectingSections.entries()).sort((a, b) => {
+      const ratioA = a[1].intersectionRatio;
+      const ratioB = b[1].intersectionRatio;
+
+      if (Math.abs(ratioA - ratioB) > INTERSECTION_RATIO_EPSILON) {
+        return ratioB - ratioA;
+      }
+
+      const indexA = itemIndexMap.get(a[0]) ?? -1;
+      const indexB = itemIndexMap.get(b[0]) ?? -1;
+      return indexA - indexB;
+    });
+
+    const [newActiveId] = sorted[0];
+
+    if (activeId !== newActiveId) {
+      activeId = newActiveId;
+      onActiveChange?.(newActiveId);
+    }
+  }
+
+  function setupIntersectionObserver() {
+    if (!browser) return { disconnect: () => {} };
+
+    const root = scrollContainer ? document.querySelector(scrollContainer) : null;
+    if (scrollContainer && !root) {
+      console.warn("ScrollSpy: Scroll container not found:", scrollContainer);
+    }
+
+    const rootMargin = `-${offset}px 0px ${ROOT_MARGIN_BOTTOM} 0px`;
+    // Use threshold range 0.0 → 1.0 in 0.1 steps for smooth updates with better performance
+    const thresholds = Array.from({ length: 11 }, (_, i) => i / 10);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const id = entry.target.id;
+          if (entry.isIntersecting) {
+            intersectingSections.set(id, entry);
+          } else {
+            intersectingSections.delete(id);
+          }
+        });
+        updateActiveSection();
+      },
+      {
+        root,
+        rootMargin,
+        threshold: thresholds
+      }
+    );
+
+    items.forEach((item) => {
+      const element = document.getElementById(item.id);
+      if (element) observer.observe(element);
+      else console.warn(`ScrollSpy: Section with id "${item.id}" not found in DOM`);
+    });
+
+    return observer;
+  }
+
+  function handleScroll() {
+    if (!browser || !navElement || !sticky || !scrollElement) return;
+
+    const container = scrollElement instanceof Window ? window : scrollElement;
+    const isWindow = container === window;
+
+    const scrollPosition = isWindow ? window.scrollY : (container as HTMLElement).scrollTop; // Type assertion here
+
+    isSticky = scrollPosition > 0;
+    updateActiveSection();
+  }
+
+  $effect(() => {
+    if (!browser) return;
+
+    if (scrollContainer) {
+      const container = document.querySelector(scrollContainer);
+      if (container instanceof HTMLElement) scrollElement = container;
+      else {
+        console.warn("ScrollSpy: Scroll container not found:", scrollContainer);
+        scrollElement = window;
+      }
+    } else {
+      scrollElement = window;
+    }
+
+    const observer = setupIntersectionObserver();
+
+    const container = scrollElement instanceof Window ? window : scrollElement;
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("scroll", handleScroll);
+    };
+  });
+</script>
+
+<nav {...restProps} bind:this={navElement} class={theme.base} aria-label="Scroll spy navigation">
+  <div class={theme.container}>
+    <ul class={theme.list} role="list">
+      {#each items as item (item.id)}
+        <li class={theme.li}>
+          <a
+            href={item.href || `#${item.id}`}
+            class={getItemClass(item.id)}
+            aria-current={activeId === item.id ? "location" : undefined}
+            onclick={(e) => {
+              scrollToSection(item.id, e);
+            }}
+            onkeydown={(e) => handleKeydown(e, item.id)}
+          >
+            {item.label}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2204)
+## Props
+@prop items
+@prop position = "top"
+@prop offset = 0
+@prop sticky = true
+@prop activeClass = ""
+@prop inactiveClass = ""
+@prop class: className = ""
+@prop smoothScroll = true
+@prop scrollContainer
+@prop onActiveChange
+@prop onNavigate
+@prop classes
+@prop ...restProps
+-->

package/dist/scroll-spy/ScrollSpy.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ScrollSpyProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2204)
+ * ## Props
+ * @prop items
+ * @prop position = "top"
+ * @prop offset = 0
+ * @prop sticky = true
+ * @prop activeClass = ""
+ * @prop inactiveClass = ""
+ * @prop class: className = ""
+ * @prop smoothScroll = true
+ * @prop scrollContainer
+ * @prop onActiveChange
+ * @prop onNavigate
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const ScrollSpy: import("svelte").Component<ScrollSpyProps, {}, "">;
+type ScrollSpy = ReturnType<typeof ScrollSpy>;
+export default ScrollSpy;

package/dist/scroll-spy/index.d.ts

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

package/dist/scroll-spy/index.js

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

package/dist/scroll-spy/theme.d.ts

@@ -0,0 +1,148 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type ScrollSpyVariants = VariantProps<typeof scrollspy> & Classes<typeof scrollspy>;
+export declare const scrollspy: import("tailwind-variants").TVReturnType<{
+    position: {
+        top: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        left: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        right: {
+            base: string;
+            container: string;
+            list: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isSticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    list: string;
+    link: string;
+    li: string;
+}, undefined, {
+    position: {
+        top: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        left: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        right: {
+            base: string;
+            container: string;
+            list: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isSticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    list: string;
+    link: string;
+    li: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        top: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        left: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        right: {
+            base: string;
+            container: string;
+            list: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isSticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    list: string;
+    link: string;
+    li: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/scroll-spy/theme.js

@@ -0,0 +1,66 @@
+import { tv } from "tailwind-variants";
+export const scrollspy = tv({
+    slots: {
+        base: "bg-white dark:bg-gray-900 p-2 transition-all duration-300 z-40 border-b border-gray-200 dark:border-gray-700",
+        container: "",
+        list: "",
+        link: "px-4 py-2.5 transition-all duration-200 cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900",
+        li: "p-2 m-1"
+    },
+    variants: {
+        position: {
+            top: {
+                base: "top-0 left-0 right-0 w-full",
+                container: "container mx-auto px-4",
+                list: "flex space-x-1 overflow-x-auto scrollbar-none"
+            },
+            left: {
+                base: "fixed left-0 top-0 bottom-0 h-full w-64 overflow-y-auto",
+                container: "px-4 py-4",
+                list: "flex flex-col space-y-1"
+            },
+            right: {
+                base: "fixed right-0 top-0 bottom-0 h-full w-64 overflow-y-auto",
+                container: "px-4 py-4",
+                list: "flex flex-col space-y-1"
+            }
+        },
+        sticky: {
+            true: {
+                base: ""
+            },
+            false: {
+                base: ""
+            }
+        },
+        isSticky: {
+            true: {
+                base: "shadow-lg"
+            },
+            false: {
+                base: ""
+            }
+        },
+        active: {
+            true: {
+                link: "text-primary-700 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30 font-semibold focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900"
+            },
+            false: {
+                link: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
+            }
+        }
+    },
+    defaultVariants: {
+        position: "top",
+        sticky: true,
+        isSticky: false,
+        active: false
+    },
+    compoundVariants: [
+        {
+            position: "top",
+            sticky: true,
+            class: { base: "sticky" }
+        }
+    ]
+});

package/dist/sidebar/Sidebar.svelte

@@ -127,7 +127,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1387)
+[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1389)
 ## Props
 @prop children
 @prop isOpen = false

package/dist/sidebar/Sidebar.svelte.d.ts

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

package/dist/sidebar/SidebarBrand.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1424)
+[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1426)
 ## Props
 @prop children
 @prop site

package/dist/sidebar/SidebarBrand.svelte.d.ts

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

package/dist/sidebar/SidebarButton.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1406)
+[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1408)
 ## Props
 @prop breakpoint = "md"
 @prop class: className

package/dist/sidebar/SidebarButton.svelte.d.ts

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

package/dist/sidebar/SidebarCta.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1411)
+[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1413)
 ## Props
 @prop children
 @prop icon

package/dist/sidebar/SidebarCta.svelte.d.ts

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

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -111,7 +111,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
+[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1432)
 ## Props
 @prop children
 @prop arrowup

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

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

package/dist/sidebar/SidebarGroup.svelte

@@ -13,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1447)
+[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1449)
 ## Props
 @prop children
 @prop class: className = "space-y-2"

package/dist/sidebar/SidebarGroup.svelte.d.ts

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

package/dist/sidebar/SidebarItem.svelte

@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1453)
+[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1455)
 ## Props
 @prop icon
 @prop subtext

package/dist/sidebar/SidebarItem.svelte.d.ts

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

package/dist/skeleton/CardPlaceholder.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1465)
+[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1467)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/CardPlaceholder.svelte.d.ts

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