@sarimarcus/content-sites-ui 0.29.4 → 0.30.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.30.1 (2026-10-07)
+
+- `./editorial`: `StaticProsePage` takes `proseClass`, the variant beside `prose` (default `prose-stone`) and `NotFoundPage` takes `searchBoxClass` (default: the current search-link classes), so a dark theme can pass its own prose variant and input tokens; default output is unchanged (SLA-2989).
+- `./layout`: `ListingShell` takes `contained` (default `true`) and `pagefindIgnore` (default `true`); `false` drops the Container inside `<main>` for a main of full-bleed bands, and keeps a listing's `data-pagefind-body` bands indexed. `mainClass={null}` renders a class-less `<main>`. Default output is unchanged (SLA-2989).
+- `./search`: with `?focus`, `initSearchPage` re-claims input focus every 300 ms for 3 s, stopping at the first pointer or key press, instead of once at 1.7 s and only from `<body>`; the deferred cookie banner moves focus to its own button, which the single reclaim missed. This reaches every site (SLA-2989).
+
+## 0.30.0 (2026-10-07)
+
+- `./affiliate`: `HotelAffiliateCTA` and `AffiliateComparisonTable` links carry `data-track-affiliate-provider` and `data-track-affiliate-placement` so booking clicks are attributed; both take `provider`, `ComparisonRow` takes a per-row one, and without either the provider is read from the link's host (Booking.com links only; any other host is left unattributed) (SLA-2985).
+- `./editorial`: `Interlude` renders a stat-fact `figure` through `renderInline`, so `**80 titles**` is bold and `<20%` is escaped (SLA-2985).
+- `./search`: the load-more button ignores clicks while a page is loading and drops fragments fetched for a superseded query, so a double click no longer repeats 12 results and a new query no longer receives stale ones (SLA-2985).
+
+### Breaking
+
+- `./primitives`: `FeatureList`'s `items` and `footer` are typed `TrustedHtml` (were `string`); wrap plain text with `textAsHtml()` and parsed markdown with `trustedHtml()`. Sites run `scripts/platform/migrations/feature-list-trusted.mjs` (`items` → `.map(textAsHtml)`, `footer` → `trustedHtml(…)`) (SLA-2985).
+
 ## 0.29.4 (2026-10-07)
 
 - `./composed`: `Pagination`'s current page uses `text-primary-foreground` (was `text-white`, 1.8:1 on a light primary) and Previous/Next are named by their visible text; `TableOfContents`' hidden mini bar is `inert`; `CardCarousel`'s arrows use `aria-disabled`, so the focused arrow keeps focus at an edge, and arrows and dots have 44px targets (SLA-2984).

package/README.md

@@ -36,7 +36,7 @@ import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callo
   `rel="noopener noreferrer"`, unless `target` or `rel` is given. Attributes render as `href rel target class`,
   then every other anchor attribute (`data-*`, `aria-*`, `slot`) in the order passed.
 - `Callout`: a boxed note with an icon. `type` is `info` (default), `tip`, `warning` or `success`; `title` is optional.
-- `FeatureList`: a checklist or a row of tags from `items` (rendered with `set:html`). `color` is `primary`
+- `FeatureList`: a checklist or a row of tags from `items` and an optional `footer`, both `TrustedHtml` (rendered with `set:html`; wrap plain text with `textAsHtml()`). `color` is `primary`
   (default), `secondary` or `accent`; `container` boxes it, `compact` tightens it, `headingLevel` sets the heading
   (default `h2`), which renders only for a non-empty `title`; `footer` adds a line under a border.
 - `Blockquote`: a centred pull-quote, `quote` plus an optional `source`.

package/package.json

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

package/src/affiliate/AffiliateComparisonTable.astro

@@ -8,6 +8,7 @@
 import Icon from '../primitives/Icon.astro';
 import Badge from '../primitives/Badge.astro';
 import type { ComparisonRow, ComparisonTableLabels } from './types';
+import { providerFromHref } from './provider';
 
 interface Props {
   rows: ComparisonRow[];
@@ -17,6 +18,7 @@ interface Props {
   priceLabel?: string;
   featureLabel?: string;
   placement?: string;
+  provider?: string;
   labels?: ComparisonTableLabels;
   class?: string;
 }
@@ -29,6 +31,7 @@ const {
   priceLabel = 'Price',
   featureLabel = 'Highlight',
   placement = 'comparison-table',
+  provider,
   labels = {},
   class: className = '',
 } = Astro.props;
@@ -118,6 +121,8 @@ const defaultCta = (external: boolean) => (external ? externalCta : internalCta)
                         data-track-event="affiliate_click"
                         data-track-cta-id={row.trackId}
                         data-track-cta-placement={placement}
+                        data-track-affiliate-provider={row.provider ?? provider ?? providerFromHref(row.href)}
+                        data-track-affiliate-placement={placement}
                         class={ctaAffiliate}
                         aria-label={externalAria(cta, row.name)}
                       >
@@ -188,6 +193,8 @@ const defaultCta = (external: boolean) => (external ? externalCta : internalCta)
                     data-track-event="affiliate_click"
                     data-track-cta-id={row.trackId}
                     data-track-cta-placement={placement}
+                    data-track-affiliate-provider={row.provider ?? provider ?? providerFromHref(row.href)}
+                    data-track-affiliate-placement={placement}
                     class={`${ctaAffiliate} w-full`}
                     aria-label={externalAria(cta, row.name)}
                   >

package/src/affiliate/HotelAffiliateCTA.astro

@@ -13,6 +13,7 @@
 import { isBadgeLength } from '../primitives/badgeText';
 import type { HotelCtaLabels } from './types';
 import { templateLine } from './templateText';
+import { providerFromHref } from './provider';
 
 
 interface Props {
@@ -23,6 +24,7 @@ interface Props {
   entityNoun?: string;
   trackId?: string;
   placement?: string;
+  provider?: string;
   priceText?: string | null;
   priceCompactMax?: number;
   priceNoteSlot?: boolean;
@@ -45,6 +47,7 @@ const {
   entityNoun = 'hotel',
   trackId = 'hotel-affiliate-cta',
   placement,
+  provider,
   priceText = null,
   priceCompactMax,
   priceNoteSlot = false,
@@ -73,6 +76,9 @@ const {
   officialSite = `Visit the ${entityNoun}'s official site`,
 } = labels;
 
+const trackProvider = provider ?? providerFromHref(href);
+const placementAbove = placement ?? 'above-fold';
+const placementBook = placement ?? 'book-section';
 const ctaLabel = isSearchFallback ? searchCta : bookCta;
 const subhead = isSearchFallback ? searchSubhead : bookSubhead;
 const priceIsCompact = priceCompactMax === undefined || isBadgeLength(priceText, priceCompactMax);
@@ -89,7 +95,9 @@ const ctaClasses =
     rel="sponsored noopener noreferrer"
     data-track-event="affiliate_click"
     data-track-cta-id={trackId}
-    data-track-cta-placement={placement ?? 'above-fold'}
+    data-track-cta-placement={placementAbove}
+    data-track-affiliate-provider={trackProvider}
+    data-track-affiliate-placement={placementAbove}
     class:list={[ctaClasses, 'sm:w-auto', className]}
   >
     <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -142,7 +150,9 @@ const ctaClasses =
       rel="sponsored noopener noreferrer"
       data-track-event="affiliate_click"
       data-track-cta-id={trackId}
-      data-track-cta-placement={placement ?? 'book-section'}
+      data-track-cta-placement={placementBook}
+      data-track-affiliate-provider={trackProvider}
+      data-track-affiliate-placement={placementBook}
       class:list={[ctaClasses, 'mt-4']}
     >
       <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

package/src/affiliate/provider.ts

@@ -0,0 +1,6 @@
+/** The affiliate provider a link belongs to, read from its host; undefined for a host no provider is known for. */
+export function providerFromHref(href: string | undefined): string | undefined {
+  const host = /^https?:\/\/([^/?#:]+)/i.exec(href ?? '')?.[1]?.toLowerCase();
+  if (!host) return undefined;
+  return host === 'booking.com' || host.endsWith('.booking.com') ? 'booking' : undefined;
+}

package/src/affiliate/types.ts

@@ -72,6 +72,8 @@ export interface ComparisonRow {
   sponsored?: boolean;
   cta?: string;
   trackId?: string;
+  /** Affiliate provider for click attribution; falls back to the table's `provider`. */
+  provider?: string;
 }
 
 /** AffiliateComparisonTable copy, all with English defaults. */

package/src/editorial/NotFoundPage.astro

@@ -20,9 +20,11 @@ interface Props {
   /** Accessible name of the section links. */
   exploreAriaLabel?: string;
   links: { href: string; label: string }[];
+  /** Classes of the search link; a dark theme passes its own border and background tokens. */
+  searchBoxClass?: string;
 }
 
-const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaLabel, exploreLabel, exploreAriaLabel = 'Explore sections', links } = Astro.props;
+const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaLabel, exploreLabel, exploreAriaLabel = 'Explore sections', links, searchBoxClass = 'group flex items-center gap-3 w-full max-w-sm mx-auto px-4 py-3 rounded-xl border border-foreground/20 bg-white/60 backdrop-blur-sm text-left hover:border-primary/40 hover:bg-white/80 transition-all no-underline' } = Astro.props;
 ---
 
 <main class="relative min-h-[80vh] flex items-center justify-center overflow-hidden bg-muted">
@@ -74,7 +76,7 @@ const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaL
       <a
         href={searchHref}
         data-search-trigger
-        class="group flex items-center gap-3 w-full max-w-sm mx-auto px-4 py-3 rounded-xl border border-foreground/20 bg-white/60 backdrop-blur-sm text-left hover:border-primary/40 hover:bg-white/80 transition-all no-underline"
+        class={searchBoxClass}
         aria-label={searchAriaLabel}
       >
         <Icon name="search" class="w-4 h-4 text-muted-foreground shrink-0" />

package/src/editorial/StaticProsePage.astro

@@ -18,9 +18,11 @@ interface Props {
   eyebrow?: string;
   /** Closing box under the prose: a short line and secondary buttons. */
   cta?: { text: string; links: CtaLink[] };
+  /** Prose variant beside the base `prose` class; a dark theme passes its own. */
+  proseClass?: string;
 }
 
-const { heading, eyebrow, cta } = Astro.props;
+const { heading, eyebrow, cta, proseClass = 'prose-stone' } = Astro.props;
 ---
 
 <main class="py-16 lg:py-24">
@@ -28,7 +30,7 @@ const { heading, eyebrow, cta } = Astro.props;
     {eyebrow && <p class="text-sm font-semibold uppercase tracking-[0.18em] text-primary mb-3">{eyebrow}</p>}
     <h1 class="text-3xl sm:text-4xl font-medium font-display mb-8">{heading}</h1>
 
-    <div class="prose prose-stone max-w-none">
+    <div class:list={['prose', proseClass, 'max-w-none']}>
       <slot />
     </div>
 

package/src/editorial/interludes/Interlude.astro

@@ -37,7 +37,7 @@ const { interlude: il, renderInline: md, labels, author, didYouKnowVariant, didY
   />
 )}
 
-{il.type === 'stat-fact' && <StatFact figure={trustedHtml(il.figure)} caption={md(il.caption)} />}
+{il.type === 'stat-fact' && <StatFact figure={md(il.figure)} caption={md(il.caption)} />}
 
 {il.type === 'evidence-context' && (
   <EvidenceContext

package/src/layout/ListingShell.astro

@@ -1,20 +1,26 @@
 ---
 /**
  * ListingShell — the frame of a listing hub: breadcrumb band, hero, optional full-width bands, <main> with a
- * Container, and trailing bands, all inside one Pagefind-ignore wrapper (listings are not indexed). The route keeps
+ * Container, and trailing bands, all inside one wrapper that is Pagefind-ignored by default (most listings are not
+ * indexed; `pagefindIgnore={false}` keeps a listing's own `data-pagefind-body` bands). The route keeps
  * Layout and passes StructuredData to Layout directly, so its JSON-LD lands in <head>; everything else comes in by slot.
  */
 import BreadcrumbBand from './BreadcrumbBand.astro';
 import Container from './Container.astro';
 
 interface Props {
-  mainClass?: string;
+  /** `null` renders a class-less <main>. */
+  mainClass?: string | null;
+  /** `false` drops the Container inside <main>, for a main made of full-bleed bands that carry their own. */
+  contained?: boolean;
+  /** `false` keeps the page indexable, for a listing whose bands carry `data-pagefind-body` prose. */
+  pagefindIgnore?: boolean;
 }
 
-const { mainClass = 'py-12 lg:py-20' } = Astro.props;
+const { mainClass = 'py-12 lg:py-20', contained = true, pagefindIgnore = true } = Astro.props;
 ---
 
-<div data-pagefind-ignore>
+<div data-pagefind-ignore={pagefindIgnore ? '' : undefined}>
   <BreadcrumbBand ignore={false}>
     <slot name="breadcrumb" />
   </BreadcrumbBand>
@@ -23,9 +29,13 @@ const { mainClass = 'py-12 lg:py-20' } = Astro.props;
   <slot name="before-main" />
 
   <main class={mainClass}>
-    <Container>
+    {contained ? (
+      <Container>
+        <slot />
+      </Container>
+    ) : (
       <slot />
-    </Container>
+    )}
   </main>
 
   <slot name="after-main" />

package/src/primitives/FeatureList.astro

@@ -2,34 +2,31 @@
 /**
  * FeatureList — reusable list display for specialties, ingredients, features.
  *
- * `items[]` and `footer` render with set:html, so callers may pass inline markup
- * (already-parsed markdown from parseMarkdownInline) or plain text. Plain strings
- * are unaffected: at the time of the change the 9,923 item strings in content
- * JSON contained no angle brackets and no entity-like ampersands, and the
- * rendered list output was byte-identical across all 462 list items on the three
- * active sites. Callers passing author-written markdown must parse it first —
- * see the `checklist` branch of the site's interlude dispatcher.
+ * `items[]` and `footer` render with set:html and are typed TrustedHtml: parse author-written
+ * markdown first (see the `checklist` branch of the interlude dispatcher) or wrap plain
+ * text with `textAsHtml()`.
  *
  * The heading renders only for a non-empty `title`.
  *
  * Usage:
  *   <FeatureList title="Specialities" items={bar.specialties} icon="star" />
  *   <FeatureList title="House specialities" items={restaurant.specialties} variant="tags" color="accent" container />
- *   <FeatureList title="Main ingredients" items={dish.mainIngredients} icon="star" color="accent" container footer="<strong>Allergens:</strong> gluten, dairy" />
+ *   <FeatureList title="Main ingredients" items={dish.mainIngredients} icon="star" color="accent" container footer={trustedHtml("<strong>Allergens:</strong> gluten, dairy")} />
  */
 
 import Icon from './Icon.astro';
+import type { TrustedHtml } from '../types';
 
 interface Props {
   title?: string;
-  items: string[];
+  items: TrustedHtml[];
   variant?: 'checklist' | 'tags';
   color?: 'primary' | 'accent' | 'secondary';
   icon?: string;
   container?: boolean;
   /** Tighter padding/margin for space-constrained contexts (e.g. article interludes). */
   compact?: boolean;
-  footer?: string;
+  footer?: TrustedHtml;
   headingLevel?: 'h2' | 'h3' | 'h4';
   class?: string;
 }

package/src/search/searchPage.ts

@@ -294,6 +294,7 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
 
     writeURL(query, typeFilter, audienceFilter);
     const myToken = ++searchToken;
+    loadMoreBtn.disabled = false;
 
     if (!query) {
       updateAudienceCounts(undefined); // back to corpus counts
@@ -514,6 +515,7 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
   });
 
   loadMoreBtn.addEventListener('click', async () => {
+    if (loadMoreBtn.disabled) return;
     if (activeType) {
       // All type-filtered fragments are already in cachedFragments. An audience
       // filter needs no branch here: it narrowed cachedHandles server-side, so
@@ -528,11 +530,20 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
 
     const nextHandles = cachedHandles.slice(renderedCount, renderedCount + pageSize);
     if (nextHandles.length === 0) return;
-    const fragments = await Promise.all(nextHandles.map((h) => h.data()));
-    cachedFragments.push(...fragments);
-    appendResults(listEl, fragments, renderedCount, taxonomy);
-    renderedCount += fragments.length;
-    if (renderedCount >= cachedHandles.length) loadMoreBtn.hidden = true;
+    const myToken = searchToken;
+    loadMoreBtn.disabled = true;
+    try {
+      const fragments = await Promise.all(nextHandles.map((h) => h.data()));
+      if (myToken !== searchToken) return;
+      cachedFragments.push(...fragments);
+      appendResults(listEl, fragments, renderedCount, taxonomy);
+      renderedCount += fragments.length;
+      if (renderedCount >= cachedHandles.length) loadMoreBtn.hidden = true;
+    } catch {
+      // leave the button visible so the click can be retried
+    } finally {
+      loadMoreBtn.disabled = false;
+    }
   });
 
   listEl.addEventListener('click', (e) => {
@@ -580,12 +591,22 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
       }
     };
     requestAnimationFrame(claimFocus);
-    // Cookie consent banner may steal focus ~1.5s after load (deferred init).
-    // Reclaim once if the user hasn't moved focus elsewhere.
+    // The deferred cookie banner can steal focus (to its own button, not <body>) up to ~2s after load. Re-claim it
+    // every 300 ms for 3 s, and stop as soon as the user interacts.
     if (initial.focus) {
-      window.setTimeout(() => {
-        if (document.activeElement === document.body) claimFocus();
-      }, 1700);
+      let tries = 0;
+      const stop = () => {
+        window.clearInterval(reclaim);
+        document.removeEventListener('pointerdown', stop, true);
+        document.removeEventListener('keydown', stop, true);
+      };
+      const reclaim = window.setInterval(() => {
+        tries += 1;
+        if (tries > 10) stop();
+        else claimFocus();
+      }, 300);
+      document.addEventListener('pointerdown', stop, true);
+      document.addEventListener('keydown', stop, true);
     }
   }
 }