@sarimarcus/content-sites-ui 0.30.0 → 0.30.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.30.0",
+  "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.30.0"
+    "@sarimarcus/content-sites-core": "0.30.1"
   }
 }

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/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/search/searchPage.ts

@@ -591,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);
     }
   }
 }