@sarimarcus/content-sites-ui 0.41.1 → 0.41.2

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.41.2 (2026-10-21)
+
+- `editorial`: `ChronologyTimeline`'s era index is now `TableOfContents` (card variant) instead of a row of chips: a collapsed jump list on mobile, a sticky bar once the index scrolls away, and the era in view marked with `data-active` / `aria-current`. The era anchor ids move from the era heading to its `<li>`, so the scrollspy follows the whole era and the sticky bar hides after the last one. Its markup changes on every page that renders the timeline (SLA-3274).
+
 ## 0.41.1 (2026-10-21)
 
 - `editorial`: `ChronologyTimeline` heads an era's entries without a `yearLabel` with a quiet "Undated" label (new `undatedLabel` prop, `LABELS.chronologyTimeline.undatedLabel`) and renders them after the dated ones; an era with only dated or only undated entries keeps its markup, and `undatedLabel=""` keeps one run. The era index is now a single-row, horizontally scrolling strip instead of wrapping chips (SLA-3274).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.41.1",
+  "version": "0.41.2",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -50,6 +50,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.41.1"
+    "@sarimarcus/content-sites-core": "0.41.2"
   }
 }

package/src/editorial/ChronologyTimeline.astro

@@ -4,7 +4,7 @@
  * so eraHref() links never dead-end; 'show' renders every era in full.
  */
 import type { EraDefinition } from '@sarimarcus/content-sites-core/eras';
-import Chip from '../primitives/Chip.astro';
+import TableOfContents from '../composed/TableOfContents.astro';
 import LinkArrow from '../primitives/LinkArrow.astro';
 import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 import { LABELS } from '../internal/labels';
@@ -60,21 +60,22 @@ const thumbSizes = '(min-width: 640px) 128px, 64px';
 
 <div class:list={['w-full', className]} data-chronology>
   {index && fullEras.length > 1 && (
-    <nav aria-label={indexLabel} class="mb-12 md:mb-16">
-      <ol class="-m-1 flex gap-2 overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {fullEras.map((era) => (
-          <li class="shrink-0"><Chip href={`#${era.anchor}`} tone="outlineQuiet" accent="primary" class="whitespace-nowrap">{era.label}</Chip></li>
-        ))}
-      </ol>
-    </nav>
+    <TableOfContents
+      class="mb-12 md:mb-16"
+      showHeader={false}
+      ariaLabel={indexLabel}
+      items={fullEras.map((era) => ({ label: era.label, href: `#${era.anchor}` }))}
+      sectionSelector="[data-chronology-era]"
+      hideMiniPastLastSection
+    />
   )}
   <ol class="grid">
     {rows.map(({ era, runs, full }) => full ? (
-      <li class="group/era grid grid-cols-[1.25rem_minmax(0,1fr)] grid-rows-[auto_auto_1fr] gap-x-4 md:grid-cols-[10rem_1.25rem_minmax(0,1fr)] md:grid-rows-[auto_1fr] md:gap-x-6" data-chronology-era={era.id}>
+      <li class="scroll-mt-28 group/era grid grid-cols-[1.25rem_minmax(0,1fr)] grid-rows-[auto_auto_1fr] gap-x-4 md:grid-cols-[10rem_1.25rem_minmax(0,1fr)] md:grid-rows-[auto_1fr] md:gap-x-6" id={era.anchor} data-chronology-era={era.id}>
         <div class="relative col-start-1 row-span-3 flex justify-center md:col-start-2 md:row-span-2 before:absolute before:inset-y-0 before:left-1/2 before:w-0.5 before:-translate-x-1/2 before:bg-foreground/15 group-first/era:before:top-3 md:group-first/era:before:top-4" aria-hidden="true">
           <span class="relative mt-3 size-3 rotate-45 bg-primary ring-4 ring-background md:mt-4 md:size-3.5"></span>
         </div>
-        <h2 id={era.anchor} class="col-start-2 row-start-1 scroll-mt-28 font-display text-3xl leading-tight text-balance text-foreground md:col-start-3 md:text-4xl">{era.label}</h2>
+        <h2 class="col-start-2 row-start-1 font-display text-3xl leading-tight text-balance text-foreground md:col-start-3 md:text-4xl">{era.label}</h2>
         <p class="col-start-2 row-start-2 mt-1 font-display text-lg tabular-nums text-secondary md:col-start-1 md:row-start-1 md:row-span-2 md:mt-4 md:self-start md:sticky md:top-28 md:text-right md:text-xl md:leading-snug">{era.rangeLabel}</p>
         <div class="col-start-2 row-start-3 pb-16 md:col-start-3 md:row-start-2 md:pb-24 group-last/era:pb-0">
           <p class="mt-4 max-w-measure text-lg leading-relaxed text-foreground">{era.intro}</p>
@@ -124,11 +125,11 @@ const thumbSizes = '(min-width: 640px) 128px, 64px';
         </div>
       </li>
     ) : (
-      <li class="group/era grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4 md:grid-cols-[10rem_1.25rem_minmax(0,1fr)] md:gap-x-6" data-chronology-era={era.id} data-chronology-empty>
+      <li class="scroll-mt-28 group/era grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4 md:grid-cols-[10rem_1.25rem_minmax(0,1fr)] md:gap-x-6" id={era.anchor} data-chronology-era={era.id} data-chronology-empty>
         <div class="relative col-start-1 flex justify-center md:col-start-2 before:absolute before:inset-y-0 before:left-1/2 before:w-0.5 before:-translate-x-1/2 before:bg-foreground/15 group-first/era:before:top-2" aria-hidden="true">
           <span class="relative mt-2 size-2 rotate-45 border border-muted-foreground bg-background"></span>
         </div>
-        <p id={era.anchor} class="col-start-2 flex scroll-mt-28 flex-wrap items-baseline gap-x-2 pb-10 text-sm text-muted-foreground md:col-start-3 group-last/era:pb-0">
+        <p class="col-start-2 flex flex-wrap items-baseline gap-x-2 pb-10 text-sm text-muted-foreground md:col-start-3 group-last/era:pb-0">
           <span class="font-display text-base text-foreground">{era.label}</span>
           <span aria-hidden="true">·</span>
           <span class="tabular-nums">{era.rangeLabel}</span>