ui-svelte 0.2.16 → 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/display/Section.svelte

@@ -20,6 +20,7 @@
 			| 'surface'
 			| 'background';
 		variant?: 'solid' | 'soft' | 'ghost';
+		id?: string;
 		isBoxed?: boolean;
 	};
 
@@ -32,6 +33,7 @@
 		color = 'background',
 		variant = 'solid',
 		children,
+		id,
 		isBoxed
 	}: Props = $props();
 
@@ -54,7 +56,7 @@
 	};
 </script>
 
-<section class={cn('section', variants[variant], colors[color], rootClass)}>
+<section {id} class={cn('section', variants[variant], colors[color], rootClass)}>
 	{#if cover}
 		<img src={cover} alt="cover" class={cn('section-cover', coverClass)} />
 		<div class={cn('section-overlay', overlayClass)}></div>

package/dist/display/Section.svelte.d.ts

@@ -8,6 +8,7 @@ type Props = {
     cover?: string;
     color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft' | 'ghost';
+    id?: string;
     isBoxed?: boolean;
 };
 declare const Section: import("svelte").Component<Props, {}, "">;

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.16",
+	"version": "0.2.18",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"