From 6f0b800da4595ffce170a79cd17a9402deb3574a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 16 Mar 2026 13:38:39 +0000
Subject: [PATCH] feat(TableOfContents): Adding onLinkClick callback prop

Adds an optional onLinkClick callback to TableOfContentsProps that is
invoked when a TOC link is clicked, allowing consumers to close a
sidebar or drawer on navigation.

https://claude.ai/code/session_01TaD4iZDnbNnQqNr9TJGdRX
---
 .changeset/add-toc-click-handler.md                        | 5 +++++
 .../sveltekit-helper/src/components/TableOfContents.svelte | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/add-toc-click-handler.md

diff --git a/.changeset/add-toc-click-handler.md b/.changeset/add-toc-click-handler.md
new file mode 100644
index 00000000..a3eff939
--- /dev/null
+++ b/.changeset/add-toc-click-handler.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": patch
+---
+
+feat(TableOfContents): Adding onLinkClick callback prop for click events on TOC links.
diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte
index 730495c4..871289fa 100644
--- a/packages/sveltekit-helper/src/components/TableOfContents.svelte
+++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte
@@ -36,6 +36,11 @@ export type TableOfContentsProps = {
 	 * @default 80
 	 */
 	scrollOffset?: number;
+	/**
+	 * Optional callback invoked when a TOC link is clicked.
+	 * Useful for closing a sidebar or drawer on navigation.
+	 */
+	onLinkClick?: (event: MouseEvent, item: TOCItem) => void;
 };
 </script>
 
@@ -49,6 +54,7 @@ export type TableOfContentsProps = {
 		contentSelector = '[data-sidebar-content="true"]',
 		headingSelector,
 		scrollOffset = 80,
+		onLinkClick,
 	}: TableOfContentsProps = $props()
 
 	let activeId = $state<string | null>(null)
@@ -146,6 +152,7 @@ export type TableOfContentsProps = {
 					class:toc__link--active={activeId ===
 						(item.href.startsWith('#') ? item.href.slice(1) : item.href)}
 					href="#{item.href}"
+					onclick={(e) => onLinkClick?.(e, item)}
 				>
 					<small>{item.label}</small>
 				</a>