toc is active

.changeset/tricky-coins-jog.md

@@ -0,0 +1,5 @@
+---
+'@melt-ui/svelte': minor
+---
+
+TOC: isActive helper

src/docs/data/builders/table-of-contents.ts

@@ -80,6 +80,13 @@ const builder: APISchema = {
 			description: 'A writable store that lists all the headings within the specified container.',
 		},
 	],
+	helpers: [
+		{
+			name: 'isActive',
+			type: '(headingId: string) => boolean',
+			description: 'Returns whether the heading with the given id is currently active.',
+		},
+	],
 };
 
 const item = elementSchema('item', {
@@ -94,6 +101,10 @@ const item = elementSchema('item', {
 			name: 'data-id',
 			value: 'The id of the heading element the item links to.',
 		},
+		{
+			name: 'data-active',
+			value: 'Whether the item is currently active.',
+		},
 	],
 	events: tableOfContentsEvents['item'],
 });

src/lib/builders/table-of-contents/create.ts

@@ -8,7 +8,7 @@ import type { Defaults } from '$lib/internal/types';
 
 import { dequal } from 'dequal';
 import { onMount } from 'svelte';
-import { get, writable, type Writable } from 'svelte/store';
+import { derived, get, writable, type Writable } from 'svelte/store';
 
 import type {
 	CreateTableOfContentsArgs,
@@ -378,6 +378,14 @@ export function createTableOfContents(args: CreateTableOfContentsArgs) {
 		},
 	});
 
+	// Helpers
+	const isActive = derived(activeHeadingIdxs, ($activeHeadingIdxs) => {
+		return (headingId: string) => {
+			const idx = headingsList.findIndex((heading) => heading.id === headingId);
+			return $activeHeadingIdxs.includes(idx);
+		};
+	});
+
 	return {
 		elements: {
 			item,
@@ -386,5 +394,8 @@ export function createTableOfContents(args: CreateTableOfContentsArgs) {
 			activeHeadingIdxs,
 			headingsTree,
 		},
+		helpers: {
+			isActive,
+		},
 	};
 }