ui-svelte 0.2.17 → 0.2.18

package/dist/css/base.css

@@ -1,4 +1,7 @@
 @layer base {
+	html {
+		scroll-behavior: smooth;
+	}
 	body {
 		@apply h-dvh flex flex-col relative;
 		@apply bg-background text-on-background;

package/dist/navigation/NavMenu.svelte

@@ -48,6 +48,8 @@
 	let openSubmenuIndex = $state<number | null>(null);
 	let triggerElements = $state<Record<number, HTMLElement>>({});
 	let popoverElement = $state<HTMLElement>();
+	let activeHash = $state<string | null>(null);
+	let sectionObserver: IntersectionObserver | null = null;
 	let position = $state({
 		top: 0,
 		left: 0,
@@ -84,6 +86,11 @@
 
 	function isItemActive(href?: string): boolean {
 		if (!href) return false;
+
+		if (href.startsWith('#')) {
+			return activeHash === href;
+		}
+
 		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
 	}
 
@@ -191,7 +198,38 @@
 	}
 
 	onMount(() => {
-		return () => stopEventListeners();
+		const hashLinks = items
+			.flatMap((item) => [item.href, ...(item.subitems?.map((s) => s.href) || [])])
+			.filter((href): href is string => !!href && href.startsWith('#'))
+			.map((href) => href.slice(1));
+
+		if (hashLinks.length > 0) {
+			sectionObserver = new IntersectionObserver(
+				(entries) => {
+					const visibleEntries = entries.filter((e) => e.isIntersecting);
+					if (visibleEntries.length > 0) {
+						const mostVisible = visibleEntries.reduce((prev, curr) =>
+							curr.intersectionRatio > prev.intersectionRatio ? curr : prev
+						);
+						activeHash = '#' + mostVisible.target.id;
+					}
+				},
+				{
+					threshold: [0.1, 0.5, 0.9],
+					rootMargin: '-10% 0px -10% 0px'
+				}
+			);
+
+			hashLinks.forEach((id) => {
+				const el = document.getElementById(id);
+				if (el) sectionObserver!.observe(el);
+			});
+		}
+
+		return () => {
+			sectionObserver?.disconnect();
+			stopEventListeners();
+		};
 	});
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.17",
+	"version": "0.2.18",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"