refactor(docs): use navigation components for contents

Author: dancormier

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

@@ -81,18 +81,15 @@
         class="layout-toc fl-shrink0 w30 wmn2 wmx3 ff-stack-sans-headline md:d-none"
     >
         <div class="ps-sticky t0 mt6 py24 px32 overflow-auto hmx-screen">
-            <nav
-                id={contentsNavId}
-                aria-labelledby={contentsHeadingId}
-                class="bg-white"
-            >
+            <div id={contentsNavId} class="bg-white">
                 <ContentsList
                     {toc}
                     {activeId}
                     headingId={contentsHeadingId}
+                    label="Contents"
                     onSelect={handleLinkClick}
                 />
-            </nav>
+            </div>
         </div>
     </aside>
 
@@ -112,18 +109,18 @@
         </Button>
 
         {#if isMobileTocOpen}
-            <nav
+            <div
                 id={mobileContentsNavId}
-                aria-label="Contents"
                 class="contents-mobile-popover bg-white bar-md bs-md overflow-auto p12 w100"
             >
                 <ContentsList
                     {toc}
                     {activeId}
+                    label="Contents"
                     onSelect={handleLinkClick}
                     showHeading={false}
                 />
-            </nav>
+            </div>
         {/if}
     </div>
 {/if}

packages/stacks-docs/src/components/ContentsList.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+    import { Navigation, NavigationItem } from "@stackoverflow/stacks-svelte";
+
     type Props = {
         toc: DocsTocItem[];
         activeId: string | null;
         headingId?: string;
+        label?: string;
         onSelect: (id: string) => void;
         showHeading?: boolean;
     };
@@ -11,9 +14,11 @@
         toc,
         activeId,
         headingId,
+        label = "Contents",
         onSelect,
         showHeading = true,
     }: Props = $props();
+
 </script>
 
 {#if showHeading && headingId}
@@ -22,39 +27,55 @@
     </h2>
 {/if}
 
-<ul class="s-navigation s-navigation__vertical">
+<Navigation {label} orientation="vertical" listClass="contents-list">
     {#each toc as item, index (item.id)}
-        <li>
-            <a
-                href="#{item.id}"
-                onclick={() => onSelect(item.id)}
-                class="s-navigation--item fs-caption bar0 fw-bold fc-black ai-start"
-                class:bg-black-100={activeId === item.id}
-                class:is-active={activeId === item.id}
-            >
-                <span class="fl-shrink0 w24 d-flex ai-center fc-theme-primary">
-                    {(index + 1).toString().padStart(2, "0")}
-                </span>
-                <span class="truncate">{item.value}</span>
-            </a>
-
-            {#if item.children && item.children.length > 0}
-                <ul class="s-navigation s-navigation__vertical">
+        <NavigationItem
+            href="#{item.id}"
+            text={item.value}
+            selected={activeId === item.id}
+            onclick={() => onSelect(item.id)}
+            class={`contents-primary-item fs-caption bar0 fw-bold fc-black ai-start ${activeId === item.id ? "bg-black-100" : ""}`}
+        />
+
+        {#if item.children && item.children.length > 0}
+            <li>
+                <Navigation
+                    label={`${item.value} sections`}
+                    orientation="vertical"
+                >
                     {#each item.children as child (child.id)}
-                        <li>
-                            <a
-                                href="#{child.id}"
-                                onclick={() => onSelect(child.id)}
-                                class="s-navigation--item fs-caption bar0"
-                                class:bg-black-100={activeId === child.id}
-                                class:is-active={activeId === child.id}
-                            >
-                                {child.value}
-                            </a>
-                        </li>
+                        <NavigationItem
+                            href="#{child.id}"
+                            text={child.value}
+                            selected={activeId === child.id}
+                            onclick={() => onSelect(child.id)}
+                            class={`fs-caption bar0 ${activeId === child.id ? "bg-black-100" : ""}`}
+                        />
                     {/each}
-                </ul>
-            {/if}
-        </li>
+                </Navigation>
+            </li>
+        {/if}
     {/each}
-</ul>
+</Navigation>
+
+<style>
+    :global(.contents-list) {
+        counter-reset: contents-section;
+    }
+
+    :global(.contents-primary-item .s-navigation--item-text) {
+        flex-direction: row;
+    }
+
+    :global(.contents-primary-item .s-navigation--item-text::before) {
+        color: var(--theme-primary);
+        content: counter(contents-section, decimal-leading-zero);
+        counter-increment: contents-section;
+        flex-shrink: 0;
+        font-weight: var(--fw-bold);
+        height: auto;
+        margin-right: var(--su8);
+        visibility: visible;
+        width: var(--su24);
+    }
+</style>