From 2f917a1c5863ce45c9964227e465c66899864733 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Mon, 28 Aug 2023 12:41:42 -0500
Subject: [PATCH 1/4] ToC Prefix and Suffix params added

---
 .../routes/(inner)/elements/chat/+page.svelte    |  3 ++-
 .../utilities/table-of-contents/+page.svelte     | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
index 9ec67b5b85..695933a08e 100644
--- a/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
@@ -473,7 +473,8 @@ let messageFeed = [
 		</section>
 
 		<section class="space-y-4">
-			<h2 class="h2">Prompt</h2>
+			<!-- NOTE: id provided to avoid ToC conflict -->
+			<h2 class="h2" id="prompt-field">Prompt</h2>
 			<p>
 				We can utilize a Skeleton <a class="anchor" href="/elements/forms">Input Group</a> to create a custom text prompt.
 			</p>
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
index 52b2d76217..0c5e377091 100644
--- a/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
@@ -79,10 +79,24 @@
 				code={`
 <!-- Before: -->
 <h2 class="h2">Title One</h2>
-<h2 class="h2" id="toc-my-custom-id">Title Two</h2>\n
+<h2 class="h2" id="my-custom-id">Title Two</h2>\n
 <!-- After: -->
 <h2 class="h2" id="title-one">Title One</h2>
 <h2 class="h2" id="my-custom-id">Title Two</h2>
+			`}
+			/>
+			<!-- Prefixes and Suffixes -->
+			<h3 class="h3">Prefixes and Suffixes</h3>
+			<!-- prettier-ignore -->
+			<p>
+				We recommend setting a custom heading (per the instruction above) if a conflict is found within your page. However, you may also hardcode a <code class="code">prefix</code> or <code class="code">suffix</code> to all generated IDs as follows:
+			</p>
+			<CodeBlock
+				language="html"
+				code={`
+<div use:tocCrawler={{ mode: 'generate', prefix: 'foo', suffix: 'bar' }}>\n
+<!-- Ex: foo-title-one-bar -->
+<!-- Ex: foo-title-two-bar -->
 			`}
 			/>
 			<!-- Ignore Headings -->

From bbd303a1e2a49c4fe42749e6e8df02d5001b9908 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Mon, 28 Aug 2023 12:41:48 -0500
Subject: [PATCH 2/4] ToC Prefix and Suffix params added

---
 .../skeleton/src/lib/utilities/TableOfContents/crawler.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts b/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
index 996f1c3f5c..f9600b9eac 100644
--- a/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
+++ b/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
@@ -12,6 +12,10 @@ interface TOCCrawlerArgs {
 	scrollTarget?: string;
 	/** Reload the action when this key value changes. */
 	key?: unknown;
+	/* Provide a prefix for ToC links, to help keep them unique. */
+	prefix?: string;
+	/* Provide a suffix for ToC links, to help keep them unique. */
+	suffix?: string;
 }
 
 export function tocCrawler(node: HTMLElement, args?: TOCCrawlerArgs) {
@@ -44,7 +48,9 @@ export function tocCrawler(node: HTMLElement, args?: TOCCrawlerArgs) {
 					.replaceAll(/[^a-zA-Z0-9 ]/g, '')
 					.replaceAll(' ', '-')
 					.toLowerCase();
-				elemHeading.id = `toc-${newHeadingId}`;
+				const prefix = args.prefix ? `${args.prefix}-` : '';
+				const suffix = args.suffix ? `${args.suffix}-` : '';
+				elemHeading.id = prefix + newHeadingId + suffix;
 			}
 			// Push heading data to the permalink array
 			permalinks.push({

From a0cb58ad4fcc61b09b24c1adc35e343d4d70e777 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Mon, 28 Aug 2023 12:59:34 -0500
Subject: [PATCH 3/4] Changeset added

---
 .changeset/tall-jobs-wait.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tall-jobs-wait.md

diff --git a/.changeset/tall-jobs-wait.md b/.changeset/tall-jobs-wait.md
new file mode 100644
index 0000000000..3f54711a5a
--- /dev/null
+++ b/.changeset/tall-jobs-wait.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Update Table of Contents to include optional `prefix` and `suffix` parameters

From 9c98d16389e63d739c3b2195e73329d1124093b7 Mon Sep 17 00:00:00 2001
From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
Date: Mon, 28 Aug 2023 14:11:23 -0400
Subject: [PATCH 4/4] fixed `-` placement for suffix

---
 packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts b/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
index f9600b9eac..dfee9b4c52 100644
--- a/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
+++ b/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
@@ -49,7 +49,7 @@ export function tocCrawler(node: HTMLElement, args?: TOCCrawlerArgs) {
 					.replaceAll(' ', '-')
 					.toLowerCase();
 				const prefix = args.prefix ? `${args.prefix}-` : '';
-				const suffix = args.suffix ? `${args.suffix}-` : '';
+				const suffix = args.suffix ? `-${args.suffix}` : '';
 				elemHeading.id = prefix + newHeadingId + suffix;
 			}
 			// Push heading data to the permalink array