@sarimarcus/content-sites-ui 0.41.0 → 0.41.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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).
+
 ## 0.41.0 (2026-10-20)
 
 - `editorial`: new `EraChip`, a Chip link from an article or monument to its era's section on the chronology page (`eraHref`), rendering nothing without an era; new `ChronologyTimeline`, a vertical rail of a site's eras (heading anchor, range, intro, dated entry rows, related dossiers, compact one-line markers for empty eras), with `groupByEra` and the `TimelineItem` type. No change to existing components' markup (SLA-3251).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.41.0",
+  "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.0"
+    "@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';
@@ -20,6 +20,8 @@ interface Props {
   indexLabel?: string;
   dossiersLabel?: string;
   emptyLabel?: string;
+  /** Heads the entries without a `yearLabel` when an era also has dated ones, which then render first (order kept within each run); '' keeps one run in the given order. */
+  undatedLabel?: string;
   class?: string;
 }
 
@@ -31,13 +33,19 @@ const {
   indexLabel = LABELS.chronologyTimeline.indexLabel,
   dossiersLabel = LABELS.chronologyTimeline.dossiersLabel,
   emptyLabel = LABELS.chronologyTimeline.emptyLabel,
+  undatedLabel = LABELS.chronologyTimeline.undatedLabel,
   class: className,
 } = Astro.props;
 
 const ordered = [...eras].sort((a, b) => a.startYear - b.startYear);
 const rows = ordered.map((era) => {
   const entries = items[era.id] ?? [];
-  return { era, entries, full: entries.length > 0 || emptyEra === 'show' };
+  const dated = entries.filter((item) => item.yearLabel);
+  const undated = entries.filter((item) => !item.yearLabel);
+  const runs = undatedLabel && dated.length && undated.length
+    ? [{ entries: dated, label: '' }, { entries: undated, label: undatedLabel }]
+    : [{ entries, label: '' }];
+  return { era, runs, full: entries.length > 0 || emptyEra === 'show' };
 });
 const fullEras = rows.filter((r) => r.full).map((r) => r.era);
 
@@ -52,27 +60,30 @@ 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="flex flex-wrap gap-2">
-        {fullEras.map((era) => (
-          <li><Chip href={`#${era.anchor}`} tone="outlineQuiet" accent="primary">{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, entries, 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}>
+    {rows.map(({ era, runs, full }) => full ? (
+      <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>
-          {entries.length > 0 && (
-            <ol class="mt-8 divide-y divide-border border-y border-border">
-              {entries.map((item) => (
+          {runs.map((run) => run.entries.length > 0 && (
+            <>
+            {run.label && <p id={`${era.anchor}-undated`} class="mt-8 text-sm font-semibold text-muted-foreground">{run.label}</p>}
+            <ol aria-labelledby={run.label ? `${era.anchor}-undated` : undefined} class:list={[run.label ? 'mt-3' : 'mt-8', 'divide-y divide-border border-y border-border']}>
+              {run.entries.map((item) => (
                 <li class="group/entry relative flex items-start gap-3 py-5 sm:gap-6">
                   <div class="min-w-0 flex-1">
                     <h3 class="text-lg font-semibold leading-snug text-foreground text-pretty">
@@ -99,7 +110,8 @@ const thumbSizes = '(min-width: 640px) 128px, 64px';
                 </li>
               ))}
             </ol>
-          )}
+            </>
+          ))}
           {era.dossiers && era.dossiers.length > 0 && (
             <div class="mt-8">
               <p id={`${era.anchor}-dossiers`} class="text-sm font-semibold text-foreground">{dossiersLabel}</p>
@@ -113,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>

package/src/internal/labels.ts

@@ -104,5 +104,6 @@ export const LABELS = {
     indexLabel: 'Eras',
     dossiersLabel: 'Go deeper',
     emptyLabel: '',
+    undatedLabel: 'Undated',
   },
 };