@sarimarcus/content-sites-ui 0.41.0 → 0.41.1

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 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.1",
   "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.1"
   }
 }

package/src/editorial/ChronologyTimeline.astro

@@ -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);
 
@@ -53,15 +61,15 @@ 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">
+      <ol class="-m-1 flex gap-2 overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {fullEras.map((era) => (
-          <li><Chip href={`#${era.anchor}`} tone="outlineQuiet" accent="primary">{era.label}</Chip></li>
+          <li class="shrink-0"><Chip href={`#${era.anchor}`} tone="outlineQuiet" accent="primary" class="whitespace-nowrap">{era.label}</Chip></li>
         ))}
       </ol>
     </nav>
   )}
   <ol class="grid">
-    {rows.map(({ era, entries, full }) => full ? (
+    {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}>
         <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>
@@ -70,9 +78,11 @@ const thumbSizes = '(min-width: 640px) 128px, 64px';
         <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 +109,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>

package/src/internal/labels.ts

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