@sarimarcus/content-sites-ui 0.29.3 → 0.30.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 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).
+- `./seo`: `ArticleMetadata`'s byline is a labelled `group`, no longer a second `contentinfo` landmark inside `<main>` (SLA-2984).
+- `./navigation`: `NavDropdown` opens only through `aria-expanded` (no `:focus-within`), so Escape and click-to-close stay closed while focus is inside, and drops `aria-haspopup`; the mobile menu closes and releases the body scroll lock when the viewport crosses `lg`; `SiteFooter`'s legal links are 44px tall (SLA-2984).
+
 ## 0.29.3 (2026-10-07)
 
 - `./layout`: `ConsentAnalytics` builds the absolute `gtm.js` URL at render time and passes it to the inline script, which no longer holds a relative `'/gtm.js?id='` literal that Googlebot crawled as a 404 on each site (SLA-3001).

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.3",
+  "version": "0.30.0",
   "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.3"
+    "@sarimarcus/content-sites-core": "0.30.0"
   }
 }

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/composed/CardCarousel.astro

@@ -51,6 +51,9 @@ const HeadingTag = headingTag;
 // Ids must be unique per page AND stable across builds.
 const containerId = deterministicId('cc', Astro.url.pathname, id, ariaLabel ?? heading);
 const trackId = `${containerId}-t`;
+// The ::before grows the 36px circle into a 44px touch target.
+const arrowClass =
+  'relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card transition-colors before:absolute before:-inset-1 hover:border-primary/40 hover:bg-primary/10 aria-disabled:pointer-events-none aria-disabled:opacity-25';
 ---
 
 <div id={id} data-carousel={containerId} class:list={['scroll-mt-28', className]}>
@@ -80,8 +83,8 @@ const trackId = `${containerId}-t`;
           data-carousel-prev
           type="button"
           aria-label={`Previous, ${ariaLabel ?? heading ?? 'carousel'}`}
-          disabled
-          class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card transition-colors hover:border-primary/40 hover:bg-primary/10 disabled:pointer-events-none disabled:opacity-25"
+          aria-disabled="true"
+          class={arrowClass}
         >
           <Icon name="chevron-left" class="h-4 w-4" aria-hidden="true" />
         </button>
@@ -89,7 +92,7 @@ const trackId = `${containerId}-t`;
           data-carousel-next
           type="button"
           aria-label={`Next, ${ariaLabel ?? heading ?? 'carousel'}`}
-          class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card transition-colors hover:border-primary/40 hover:bg-primary/10 disabled:pointer-events-none disabled:opacity-25"
+          class={arrowClass}
         >
           <Icon name="chevron-right" class="h-4 w-4" aria-hidden="true" />
         </button>
@@ -106,7 +109,7 @@ const trackId = `${containerId}-t`;
   >
     <slot />
   </div>
-  <div data-carousel-dots class="mt-4 hidden justify-center gap-2"></div>
+  <div data-carousel-dots class="mt-4 hidden justify-center"></div>
 </div>
 
 <style is:global>

package/src/composed/Pagination.astro

@@ -44,7 +44,7 @@ const edgeBase = `${linkBase} px-3`;
 {totalPages > 1 && (
   <nav aria-label="Pagination" class="mt-14 flex items-center justify-center gap-2 flex-wrap">
     {prevPage ? (
-      <a href={href(prevPage)} rel="prev" aria-label={`Go to page ${prevPage}`} class={edgeBase}>
+      <a href={href(prevPage)} rel="prev" class={edgeBase}>
         <Icon name="arrow-left" class="w-3.5 h-3.5" />
         <span>Previous</span>
       </a>
@@ -65,7 +65,7 @@ const edgeBase = `${linkBase} px-3`;
               <span
                 aria-current="page"
                 aria-label={`Page ${item}, current page`}
-                class={`${numberBase} border-primary bg-primary text-white hover:text-white`}
+                class={`${numberBase} border-primary bg-primary text-primary-foreground hover:text-primary-foreground`}
               >
                 {item}
               </span>
@@ -82,7 +82,7 @@ const edgeBase = `${linkBase} px-3`;
     </div>
 
     {nextPage ? (
-      <a href={href(nextPage)} rel="next" aria-label={`Go to page ${nextPage}`} class={edgeBase}>
+      <a href={href(nextPage)} rel="next" class={edgeBase}>
         <span>Next</span>
         <Icon name="arrow-right" class="w-3.5 h-3.5" />
       </a>

package/src/composed/TableOfContents.astro

@@ -71,6 +71,7 @@ const showMini = variant === 'card';
     data-toc-section-selector={sectionSelector}
     class="fixed top-16 left-0 right-0 z-40 translate-y-[-100%] opacity-0 pointer-events-none transition-[transform,opacity] duration-300 ease-out bg-background/95 backdrop-blur-sm border-b border-border shadow-sm"
     aria-hidden="true"
+    inert
   >
     <div class="mx-auto max-w-shell px-4 sm:px-6 lg:px-8 py-2.5">
       <nav class="flex gap-2 overflow-x-auto scrollbar-hide" aria-label={`${ariaLabel} (sticky)`}>

package/src/composed/carousel.ts

@@ -17,18 +17,26 @@ function initCarousel(section: HTMLElement): void {
   const dotsWrap = section.querySelector<HTMLElement>('[data-carousel-dots]');
   let currentIndex = 0;
 
+  // Each dot is a 44px hit area around its 6px pill; the negative margin keeps the row 6px tall.
   const dots: HTMLButtonElement[] = [];
+  const pills: HTMLElement[] = [];
   if (dotsWrap) {
     cards.forEach((_, i) => {
       const dot = document.createElement('button');
       dot.type = 'button';
       dot.setAttribute('aria-label', `Go to item ${i + 1}`);
       dot.style.cssText =
-        'height:0.375rem;border-radius:9999px;transition:all 0.2s;border:0;cursor:pointer;padding:0;' +
+        'display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;' +
+        'margin:-1.1875rem 0;border:0;padding:0;background:transparent;cursor:pointer;';
+      const pill = document.createElement('span');
+      pill.style.cssText =
+        'display:block;height:0.375rem;border-radius:9999px;transition:all 0.2s;' +
         (i === 0 ? `width:1rem;background:${ACTIVE};` : `width:0.375rem;background:${INACTIVE};`);
+      dot.appendChild(pill);
       dot.addEventListener('click', () => scrollToIndex(i));
       dotsWrap.appendChild(dot);
       dots.push(dot);
+      pills.push(pill);
     });
   }
 
@@ -43,14 +51,17 @@ function initCarousel(section: HTMLElement): void {
     currentIndex = Math.max(0, Math.min(idx, cards.length - 1));
     // Disabled state comes from the scroll position, not the card index: with several cards per view the track hits
     // max scroll while currentIndex is still mid-list.
-    if (prevBtn) prevBtn.disabled = startEdge;
-    if (nextBtn) nextBtn.disabled = endEdge;
+    // aria-disabled, not disabled: disabling the focused arrow would drop focus to body.
+    prevBtn?.setAttribute('aria-disabled', String(startEdge));
+    nextBtn?.setAttribute('aria-disabled', String(endEdge));
     // At the extremes the dot shows the first or last card, otherwise the trailing dots could never light up.
     const dotIndex = endEdge ? cards.length - 1 : startEdge ? 0 : currentIndex;
     dots.forEach((dot, i) => {
       const active = i === dotIndex;
-      dot.style.width = active ? '1rem' : '0.375rem';
-      dot.style.background = active ? ACTIVE : INACTIVE;
+      pills[i].style.width = active ? '1rem' : '0.375rem';
+      pills[i].style.background = active ? ACTIVE : INACTIVE;
+      if (active) dot.setAttribute('aria-current', 'true');
+      else dot.removeAttribute('aria-current');
     });
   }
 
@@ -81,8 +92,9 @@ function initCarousel(section: HTMLElement): void {
     });
   }, { passive: true });
 
-  prevBtn?.addEventListener('click', () => scrollToIndex(currentIndex - 1));
-  nextBtn?.addEventListener('click', () => scrollToIndex(currentIndex + 1));
+  const enabled = (btn: HTMLButtonElement) => btn.getAttribute('aria-disabled') !== 'true';
+  prevBtn?.addEventListener('click', () => enabled(prevBtn) && scrollToIndex(currentIndex - 1));
+  nextBtn?.addEventListener('click', () => enabled(nextBtn) && scrollToIndex(currentIndex + 1));
 
   // Controls show only when the track overflows; re-checked whenever the track resizes.
   function syncControls(): void {

package/src/composed/toc.ts

@@ -12,6 +12,7 @@ function setMiniVisible(mini: Element, visible: boolean): void {
   mini.classList.toggle('opacity-100', visible);
   mini.classList.toggle('pointer-events-auto', visible);
   mini.setAttribute('aria-hidden', visible ? 'false' : 'true');
+  mini.toggleAttribute('inert', !visible);
   document.dispatchEvent(new CustomEvent('toc:mini-visibility-change', { detail: { visible } }));
 }
 

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/navigation/ArticlesNavMenu.astro

@@ -125,16 +125,14 @@ const featureStyle = featureBg
 )}
 
 <style>
-  /* data-opened is set on the first open and kept; :focus-within covers a keyboard visit before any script runs. */
-  :global([data-nav-dropdown][data-opened]) .articles-nav-feature,
-  :global(.nav-dropdown:focus-within) .articles-nav-feature {
+  /* data-opened is set on the first open and kept, so the image never unpaints mid-fade. */
+  :global([data-nav-dropdown][data-opened]) .articles-nav-feature {
     background-image: var(--articles-nav-feature, none);
   }
 
   /* A var() holding an unsupported image-set() computes to none, so older engines get the 1x file instead. */
   @supports not (background-image: image-set(url('x.webp') 1x)) {
-    :global([data-nav-dropdown][data-opened]) .articles-nav-feature,
-    :global(.nav-dropdown:focus-within) .articles-nav-feature {
+    :global([data-nav-dropdown][data-opened]) .articles-nav-feature {
       background-image: var(--articles-nav-feature-1x, none);
     }
   }

package/src/navigation/NavDropdown.astro

@@ -1,7 +1,7 @@
 ---
 /**
- * A desktop dropdown: the trigger button (aria-expanded/haspopup/controls) and the panel the site fills through the
- * default slot. The panel opens on click, hover (closing after a short delay), ArrowDown and keyboard focus; the
+ * A desktop dropdown: the trigger button (aria-expanded/controls) and the panel the site fills through the
+ * default slot. The panel opens on click, hover (closing after a short delay) and ArrowDown, never on focus alone; the
  * SiteHeader controller drives it. `buttonClass` replaces the default trigger styling, which `tone` tints.
  */
 import { Icon } from '../primitives/index.ts';
@@ -37,7 +37,6 @@ const triggerClass = buttonClass ?? [
     class:list={['nav-dropdown-btn', triggerClass]}
     aria-current={current ? 'page' : undefined}
     aria-expanded="false"
-    aria-haspopup="true"
     aria-controls={id}
     data-nav-dropdown-button
   >
@@ -61,16 +60,16 @@ const triggerClass = buttonClass ?? [
     pointer-events: none;
   }
 
-  .nav-dropdown-btn[aria-expanded='true'] + .dropdown-menu,
-  .nav-dropdown:focus-within .dropdown-menu {
+  /* visibility flips at once on open, so ArrowDown can focus a link in the same tick; closing still fades. */
+  .nav-dropdown-btn[aria-expanded='true'] + .dropdown-menu {
+    transition: opacity 200ms, visibility 0s, transform 200ms;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     pointer-events: auto;
   }
 
-  .nav-dropdown-btn[aria-expanded='true'] :global(.dropdown-chevron),
-  .nav-dropdown:focus-within :global(.dropdown-chevron) {
+  .nav-dropdown-btn[aria-expanded='true'] :global(.dropdown-chevron) {
     transform: rotate(180deg);
   }
 

package/src/navigation/SiteFooter.astro

@@ -49,7 +49,8 @@ const {
   ringClass = 'rounded focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-inverse',
 } = Astro.props;
 
-const legalItemClass = `${smallClass} hover:text-inverse-foreground transition-colors ${ringClass}`;
+// A real 44px box, not an overflowing hit area: wrapped rows would overlap and steal each other's taps.
+const legalItemClass = `${smallClass} inline-flex min-h-11 items-center hover:text-inverse-foreground transition-colors ${ringClass}`;
 ---
 
 <footer class={className}>

package/src/navigation/navigation.ts

@@ -113,6 +113,13 @@ function searchPathOf(root: HTMLElement): string | null {
   return (window.location.pathname.indexOf(compiled) === 0 ? compiled : '') + path;
 }
 
+function closeOpenMobileMenus(refocus: boolean): void {
+  roots().forEach((root) => {
+    const toggle = root.querySelector<HTMLButtonElement>('[data-mobile-menu-toggle]');
+    if (toggle?.getAttribute('aria-expanded') === 'true') setMobileMenu(root, toggle, false, refocus);
+  });
+}
+
 function bindDocument(): void {
   if (documentBound) return;
   documentBound = true;
@@ -125,10 +132,7 @@ function bindDocument(): void {
 
   document.addEventListener('keydown', (event) => {
     if (event.key === 'Escape') {
-      roots().forEach((root) => {
-        const toggle = root.querySelector<HTMLButtonElement>('[data-mobile-menu-toggle]');
-        if (toggle?.getAttribute('aria-expanded') === 'true') setMobileMenu(root, toggle, false, true);
-      });
+      closeOpenMobileMenus(true);
       return;
     }
     if (!(event.metaKey || event.ctrlKey) || event.key !== 'k') return;
@@ -140,6 +144,11 @@ function bindDocument(): void {
     event.preventDefault();
     window.location.assign(`${searchPath}?focus=1`);
   });
+
+  // Tailwind's lg: the panel hides itself past it, so the body scroll lock must go with it.
+  window.matchMedia('(min-width: 64rem)').addEventListener('change', (event) => {
+    if (event.matches) closeOpenMobileMenus(false);
+  });
 }
 
 export function initNavigation(): void {

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) => {

package/src/seo/ArticleMetadata.astro

@@ -84,7 +84,7 @@ const grouped = bylineWhitespace === 'grouped';
 const bylineLead = author ? (grouped ? '  ' : ' ') : (grouped ? '' : ' ');
 ---
 
-<address class="not-italic mb-5" role="contentinfo" aria-label={ariaLabel}>
+<address class="not-italic mb-5" role="group" aria-label={ariaLabel}>
   <div class="flex items-start gap-3">
     {author && (author.image ? (
       <Image