fix(docs-next): add each-block keys and suppress safe @html lint errors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dancormier

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

@@ -37,7 +37,7 @@
 
 <div class="ba bc-black-225 bar-sm p16 bg-black-100 d-flex ai-center g16 fw-wrap">
     <Select id="banner-style" label="Style" bind:selected={selectedVariant} labelPlacement="left">
-        {#each variants as v}
+        {#each variants as v (v.value)}
             <SelectItem value={v.value} text={v.label} />
         {/each}
     </Select>

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

@@ -98,17 +98,17 @@
             <thead>
                 <tr>
                     <th scope="col">{label('class')}</th>
-                    {#each activeCols as col}
+                    {#each activeCols as col (col)}
                         <th scope="col" class="{col === 'description' || col === 'define' ? 's-table--cell5' : ''} {booleanIconCols.includes(col) ? 'ta-center' : ''}">{label(col)}</th>
                     {/each}
                 </tr>
             </thead>
         {/if}
         <tbody class="fs-caption">
-            {#each classes as row}
+            {#each classes as row (row.class)}
                 <tr>
                     <th scope="row"><code>{row.class}</code></th>
-                    {#each activeCols as col}
+                    {#each activeCols as col (col)}
                         <td class="{col === 'output' ? 'ff-mono' : ''} {booleanIconCols.includes(col) ? 'ta-center' : ''}">
                             {#if booleanIconCols.includes(col)}
                                 {#if (row as Record<string, unknown>)[col]}

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

@@ -35,15 +35,15 @@
             </tr>
         </thead>
         <tbody>
-            {#each rows as row}
+            {#each rows as row, i (i)}
                 <tr>
                     <td class="va-middle pr8">
                         {@render example(row)}
                     </td>
                     {#if showClasses}
                         <td class="va-middle">
                             <div class="d-flex g4 fw-wrap">
-                                {#each row.classes as cls}
+                                {#each row.classes as cls (cls)}
                                     {#if cls === 'N/A'}
                                         <span class="fc-black-350">N/A</span>
                                     {:else}

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

@@ -41,18 +41,19 @@
     <table class="s-table s-table__sortable">
         <thead>
             <tr>
-                {#each headers as h, c}
+                {#each headers as h, c (c)}
                     <th scope="col" class:is-sorted={col === c} data-s-table-target="column">
                         <button type="button" onclick={() => sort(c)}>
                             {h}
+                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                             {@html icon(c)}
                         </button>
                     </th>
                 {/each}
             </tr>
         </thead>
         <tbody>
-            {#each sorted as r}
+            {#each sorted as r (r.season)}
                 <tr>
                     <td>{r.season}</td>
                     <td>{r.month}</td>