fix lint errors

Author: dancormier

package-lock.json

@@ -16,6 +16,7 @@
         "init-private-content": "GIT_SSH_COMMAND=\"ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no\" git submodule update --init --remote"
     },
     "devDependencies": {
+        "@eslint/compat": "^2.0.4",
         "@sveltejs/adapter-netlify": "^5.0.0",
         "@sveltejs/kit": "^2.22.0",
         "@sveltejs/vite-plugin-svelte": "^6.0.0",

packages/stacks-docs-next/package.json

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { SvelteMap } from 'svelte/reactivity';
   import { Icon } from '@stackoverflow/stacks-svelte';
   import { IconChevron16Down, IconChevron16Up } from '@stackoverflow/stacks-icons'
 
@@ -15,7 +16,7 @@
   let indicatorTop = $state(0);
   let indicatorHeight = $state(0);
   let navElement: HTMLElement | null = null;
-  let linkElements: Map<string, HTMLElement> = new Map();
+  let linkElements: Map<string, HTMLElement> = new SvelteMap();
   let isOpen = $state(false);
 
   // Flatten toc to get all items including children
@@ -150,7 +151,7 @@
         ></div>
 
         <ul class="s-navigation s-navigation__vertical">
-          {#each toc as item, index}
+          {#each toc as item, index (item.id)}
             <li>
               <a
                 href="#{item.id}"
@@ -164,7 +165,7 @@
               </a>
               {#if item.children && item.children.length > 0}
                 <ul class="s-navigation s-navigation__vertical">
-                  {#each item.children as child}
+                  {#each item.children as child (child.id)}
                     <li>
                       <a
                         href="#{child.id}"

packages/stacks-docs-next/src/components/Contents.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <Navigation class="ws-nowrap" label="Font weight" overflow="scroll">
-  {#each controls as item, i}
+  {#each controls as item, i (i)}
     <NavigationItem
       text={item}
       selected={index === i}

packages/stacks-docs-next/src/components/Gallery.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
+  import { resolve } from '$app/paths';
   import { slide } from 'svelte/transition';
 
   import { Icon } from '@stackoverflow/stacks-svelte';
@@ -15,7 +16,8 @@
   let subsectionSlug = $derived(segments[2] ?? '');
 </script>
 
-{#snippet dropdown(isSelected: boolean, level: number = 1)}
+<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+{#snippet dropdown(isSelected: boolean, _level: number = 1)}
   <span
     style:display="inline-block"
     style:transform="rotate({!isSelected
@@ -32,20 +34,20 @@
     <li>
       <a
         class="s-navigation--item mb1"
-        href="/"
+        href={resolve('/')}
         class:is-selected={!categorySlug}
       >
         <span>Home</span>
       </a>
     </li>
-    {#each navigation as category}
+    {#each navigation as category (category.slug)}
       {@const isSelected = category.slug === categorySlug}
 
       <li>
         <a
           class="s-navigation--item jc-space-between mb1"
           class:is-selected={isSelected}
-          href={`/${category.slug}/`}
+          href={resolve(`/${category.slug}/`)}
           data-sveltekit-reload={category.private ? true : undefined}
         >
           <span>{category.title}</span>
@@ -57,12 +59,12 @@
         {#if category.items && isSelected}
           <div transition:slide={{ duration: 200 }}>
             <ul class="s-navigation s-navigation__vertical pl24">
-              {#each category.items as subsection}
+              {#each category.items as subsection (subsection.slug)}
                 <li>
                   <a
                     class="s-navigation--item jc-space-between mb1"
                     class:is-selected={sectionSlug === subsection.slug || subsectionSlug === subsection.slug}
-                    href={subsection.externalUrl || `/${category.slug}/${subsection.slug}/${subsection?.items ? subsection?.items[0]?.slug : ''}`}
+                    href={resolve(subsection.externalUrl || `/${category.slug}/${subsection.slug}/${subsection?.items ? subsection?.items[0]?.slug : ''}`)}
                     data-sveltekit-reload={subsection.private ? true : undefined}
                   >
                     <span>{subsection.title}</span>
@@ -87,12 +89,12 @@
                   {#if subsection?.items && sectionSlug === subsection.slug}
                     <div transition:slide={{ duration: 200 }}>
                       <ul class="s-navigation s-navigation__vertical ml24">
-                        {#each subsection?.items as item}
+                        {#each subsection?.items as item (item.slug)}
                           <li>
                             <a
                               class="s-navigation--item jc-space-between mb1"
                               class:is-selected={subsectionSlug === item.slug}
-                              href={item.externalUrl || `/${category.slug}/${subsection.slug}/${item.slug}/`}
+                              href={resolve(item.externalUrl || `/${category.slug}/${subsection.slug}/${item.slug}/`)}
                               data-sveltekit-reload={item.private ? true : undefined}
                             >
                               <span>{item.title}</span>

packages/stacks-docs-next/src/components/Navigation.svelte

@@ -8,7 +8,6 @@
 	import { Button, Icon } from '@stackoverflow/stacks-svelte';
 	import { IconSearch } from '@stackoverflow/stacks-icons';
 
-	let hiddenContainer = $state();
 	let docSearchButton = $state();
 
 	// Check if all required env vars are available
@@ -21,7 +20,7 @@
 		container.style.display = 'none';
 		document.body.appendChild(container);
 
-		hiddenContainer = container;
+		_hiddenContainer = container;
 
 		try {
 			docsearch({

packages/stacks-docs-next/src/components/Search.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  let { extraClasses, children } = $props();
+  let { children } = $props();
 
   const gallery = getContext('gallery');
 

packages/stacks-docs-next/src/components/Slide.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { browser } from '$app/environment';
-  import { Popover, PopoverReference, PopoverContent, Button, Icon } from '@stackoverflow/stacks-svelte';
-  import { IconArrowUpRight } from '@stackoverflow/stacks-icons'
+  import { Popover, PopoverReference, PopoverContent, Button } from '@stackoverflow/stacks-svelte';
 
   // State for theme toggles
   let darkMode = $state(false);

packages/stacks-docs-next/src/components/ThemeToggle.svelte

@@ -144,7 +144,7 @@
   </GridColumn>
   <GridColumn padding={false} extraClasses="bg-white mbn12">
     <div class="d-flex gs12 ff-row-wrap h100 ">
-      {#each backgroundColors as color, index}
+      {#each backgroundColors as color, index (color.cssVar)}
         <ColorSwatch
           {color}
           showHex={true}

packages/stacks-docs-next/src/docs/public/brand/color/ColorBackgrounds.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="colors overflow-auto">
-  {#each colors as color}
+  {#each colors as color (color.cssVar)}
     <ColorSwatch
       {color}
       showHex={true}