@sarimarcus/content-sites-ui 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.16.0 (2026-10-01)
+
+- New `./navigation`: `SiteHeader` (fixed header, labelled main `<nav>`, logo/desktop/actions/mobile slots, mobile toggle, mobile panel after the header with `data-pagefind-ignore`, `surfaceClass`, Ctrl/Cmd+K → `searchPath?focus=1`), `NavDropdown` (click, hover with a 150 ms close delay, ArrowDown/ArrowUp/Escape, outside click, focus leaving; a click on a hover-opened dropdown keeps it open), `MobileNavSection` (single-open accordion, `aria-controls`), `NavMenuLink` / `MobileNavLink` (panel rows by `NavTone`), `SiteFooter` (sections, `<nav aria-label="Legal">`, cookie-preferences button through `data-cookie-preferences`, no inline handler), `isActivePath`, and the `SiteIdentity` / `NavLink` / `NavGroup` / `FooterSection` / `NavTone` contracts. One bundled controller, idempotent on `astro:page-load`, any number of headers per page; the toggle and chevron icons now switch state (SLA-2735).
+- New `./search`: `appendResults` (Pagefind result cards from the site's type taxonomy; the excerpt sanitiser's `DOMParser` is created on first use, so the entry point is safe to import during SSR) and `SearchSuggestions` (SLA-2735).
+- New `./search.css` and `./consent.css`: the search page and Silktide consent styles on theme roles, tuned per site by optional `--search-*` / `--consent-*` custom properties. Folds in the consent modal type hierarchy and toggle contrast (Dark Skies 5d13f8a), the SLA-2290 mobile banner compaction, and `.search-filters[hidden]` (SLA-2735).
+- `./layout`: `AsyncStylesheet` (non-render-blocking sheet with a `<noscript>` fallback) (SLA-2735).
+- `theme.css`: `inverse`, `inverse-foreground`, `inverse-muted` roles for the footer surface; sites must set them (SLA-2735).
+
+## 0.15.1 (2026-10-01)
+
+- `selectActivities` accepts activities without an `id` (the sites' activity type has it optional); 0.15.0 failed site type checks (SLA-2736).
+
 ## 0.15.0 (2026-10-01)
 
 - New `./affiliate`: `AffiliateDisclosure` (provider key required, texts from the site), `AffiliateLink`, `InlineAffiliateCTA`, `StickyCTA` (inert when hidden, tracked, several bars per page, safe with blocked storage), `AmazonProductCard`/`Section`, `TravelpayoutsWidget` (hotel, activity, train, car), `AffiliateCard`, `AffiliateCardSection`, `AffiliateCarousel`, `AffiliateComparisonTable`, `HotelAffiliateCTA`. Links and widget sources arrive built by the site. `resources.ts` declares the hosts each widget kind loads (SLA-2736).

package/README.md

@@ -1,7 +1,7 @@
 # @sarimarcus/content-sites-ui
 
 Universal Astro UI shared by every content site. Named entry points, one per folder: `primitives`,
-`composed`, `editorial`, `affiliate`, `seo`, `layout`, `navigation` and `types`. For example,
+`composed`, `editorial`, `affiliate`, `seo`, `layout`, `navigation`, `search` and `types`. For example,
 `import { Container } from '@sarimarcus/content-sites-ui/layout'`. `src/internal` is never exported,
 and `src/styles` holds the Tailwind entry.
 
@@ -48,6 +48,50 @@ import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callo
 Chip colour only through theme roles, including `-tint`, `-emphasis` and the `badge-on-image` / `chip-on-image`
 roles, which each site sets to its own values.
 
+## Navigation and search
+
+```ts
+import { SiteHeader, NavDropdown, MobileNavSection, SiteFooter, type NavLink, type FooterSection } from '@sarimarcus/content-sites-ui/navigation';
+import { SearchSuggestions, appendResults } from '@sarimarcus/content-sites-ui/search';
+```
+
+Shells for site chrome. The site composes every link, panel, logo and label; the shells own the landmarks, the ARIA
+state and one bundled controller (idempotent on `astro:page-load`, any number of headers per page).
+
+- `SiteHeader`: the fixed `<header>` with a labelled `<nav>`, slots `logo`, `desktop`, `actions`, `mobile-actions`
+  and `mobile`, the mobile-menu toggle, and the mobile panel rendered after the header (with `data-pagefind-ignore`).
+  `searchPath` turns on Ctrl/Cmd+K → `<searchPath>?focus=1`. `surfaceClass` sets the bar's and the panel's
+  background. Ids default to `main-nav`, `mobile-menu`, `mobile-menu-btn`.
+- `NavDropdown`: trigger plus panel (default slot). Click, hover with a 150 ms close delay, ArrowDown/ArrowUp/Escape,
+  outside click and focus leaving. `tone` tints the default trigger; `buttonClass` replaces it.
+- `MobileNavSection`: one section of the mobile panel's single-open accordion (its button's `aria-controls` names
+  its content).
+- `NavMenuLink` / `MobileNavLink`: one row of a dropdown panel / of the mobile panel, from a `NavLink`, tinted by a
+  `NavTone`. `active` marks the row `aria-current="page"`; `emphasis` paints hub links in the tone.
+- `isActivePath(currentPath, href)`: the page or a page below it, on a path-segment boundary.
+- `SiteFooter`: brand slot, one column per `FooterSection`, a `bottom` slot, the copyright line and a
+  `<nav aria-label="Legal">` ending with the cookie-preferences button, which calls `window.openCookiePreferences()`
+  (the site's consent loader defines it). Defaults paint the `inverse` roles; class props restyle each part.
+- `appendResults` renders Pagefind result cards from the site's type taxonomy; `SearchSuggestions` renders the
+  empty-state chips. The search page, its copy and its index stay in the site.
+
+## Search and consent styles
+
+`@sarimarcus/content-sites-ui/search.css` styles the search page markup (`appendResults`, `SearchSuggestions` and
+the page's form, filters and states); `@sarimarcus/content-sites-ui/consent.css` styles the Silktide consent banner
+and modal. Both read the theme roles, and optional `--search-*` / `--consent-*` custom properties, listed at the top
+of each file, tune what differs per site. Load them as non-critical sheets with `AsyncStylesheet` (ui/layout):
+
+```astro
+---
+import searchCssUrl from '@sarimarcus/content-sites-ui/search.css?url';
+import { AsyncStylesheet } from '@sarimarcus/content-sites-ui/layout';
+---
+<AsyncStylesheet href={searchCssUrl} />
+```
+
+A site's own additions to a sheet load after it.
+
 ## Tailwind
 
 Tailwind v4 does not scan `node_modules`, so a site must import the package's source entry next to Tailwind:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -33,15 +33,18 @@
     "./seo": "./src/seo/index.ts",
     "./layout": "./src/layout/index.ts",
     "./navigation": "./src/navigation/index.ts",
+    "./search": "./src/search/index.ts",
     "./types": "./src/types/index.ts",
     "./tailwind.css": "./src/styles/tailwind.css",
     "./widths.css": "./src/styles/widths.css",
-    "./theme.css": "./src/styles/theme.css"
+    "./theme.css": "./src/styles/theme.css",
+    "./consent.css": "./src/styles/consent.css",
+    "./search.css": "./src/styles/search.css"
   },
   "peerDependencies": {
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.15.0"
+    "@sarimarcus/content-sites-core": "0.16.0"
   }
 }

package/src/affiliate/select.ts

@@ -1,6 +1,6 @@
 /** An activity a card band can order: a provider id ("gyg-N" or N) and its review count. */
 export interface SelectableActivity {
-  id: string | number;
+  id?: string | number;
   reviewCount?: number;
 }
 

package/src/layout/AsyncStylesheet.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * A non-critical stylesheet that does not block rendering: loaded as `media="print"` and switched to `all` once it
+ * arrives, with a `<noscript>` fallback. Pass a URL from a `?url` import.
+ */
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<link rel="stylesheet" href={href} media="print" onload="this.media='all'" />
+<noscript><link rel="stylesheet" href={href} /></noscript>

package/src/layout/index.ts

@@ -1,3 +1,4 @@
 // Public surface of @sarimarcus/content-sites-ui/layout.
 export { default as Container } from './Container.astro';
 export { default as BreadcrumbBand } from './BreadcrumbBand.astro';
+export { default as AsyncStylesheet } from './AsyncStylesheet.astro';

package/src/navigation/MobileNavLink.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * One link of the mobile panel. `emphasis` paints it in the tone (hub links); the icon is dimmed unless `iconStrong`
+ * or `emphasis`. The `leading` slot replaces the icon (a day-count badge, for instance).
+ */
+import { Icon } from '../primitives/index.ts';
+import { TONES } from './tones.ts';
+import type { NavLink, NavTone } from './types.ts';
+
+interface Props {
+  link: NavLink;
+  tone?: NavTone;
+  active?: boolean;
+  emphasis?: 'medium' | 'semibold';
+  iconStrong?: boolean;
+  class?: string;
+}
+
+const { link, tone = 'primary', active = false, emphasis, iconStrong = Boolean(emphasis), class: className } = Astro.props;
+const t = TONES[tone];
+const WEIGHT = { medium: 'font-medium', semibold: 'font-semibold' } as const;
+const look = emphasis
+  ? `${WEIGHT[emphasis]} ${t.text} ${t.strongHover}`
+  : `text-muted-foreground ${t.hoverText}`;
+---
+
+<a
+  href={link.href}
+  aria-current={active ? 'page' : undefined}
+  class:list={[
+    `flex items-center gap-3 px-4 py-2.5 text-sm ${look} hover:bg-muted transition-colors focus-visible:ring-2 ${t.ring} focus-visible:ring-offset-2`,
+    active && !emphasis && `${t.text} font-medium`,
+    className,
+  ]}
+>
+  <slot name="leading">{link.icon && <Icon name={link.icon} class={`w-4 h-4 ${iconStrong ? t.icon : t.iconDim}`} />}</slot>
+  {link.label}
+</a>

package/src/navigation/MobileNavSection.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * One section of the mobile menu's single-open accordion: a full-width button and the content the site fills
+ * through the default slot (its id, from deterministicId, is the button's aria-controls). Opening a section closes
+ * the others in the same panel (SiteHeader controller).
+ */
+import { deterministicId } from '@sarimarcus/content-sites-core/dom';
+import { Icon } from '../primitives/index.ts';
+
+interface Props {
+  label: string;
+  icon?: string;
+  /** Classes of the leading icon (its colour, typically). */
+  iconClass?: string;
+  class?: string;
+  buttonClass?: string;
+  /** Mark the section button as the current page section (aria-current). */
+  current?: boolean;
+}
+
+const {
+  label,
+  icon,
+  iconClass = 'w-4 h-4 text-primary',
+  class: className,
+  buttonClass = 'flex items-center justify-between w-full px-4 py-3 text-base font-medium text-foreground hover:bg-muted transition-colors cursor-pointer',
+  current = false,
+} = Astro.props;
+const contentId = deterministicId('mobile-nav', Astro.url.pathname, label);
+---
+
+<div class:list={['mobile-section', className]} data-mobile-section>
+  <button
+    type="button"
+    class:list={['mobile-section-btn', buttonClass]}
+    aria-current={current ? 'page' : undefined}
+    aria-expanded="false"
+    aria-controls={contentId}
+    data-mobile-section-button
+  >
+    <span class="flex items-center gap-2">
+      {icon && <Icon name={icon} class={iconClass} />}
+      {label}
+    </span>
+    <Icon name="chevron-down" class="w-4 h-4 transition-transform section-chevron" />
+  </button>
+  <div id={contentId} class="mobile-section-content hidden" data-mobile-section-content>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .mobile-section-btn[aria-expanded='true'] :global(.section-chevron) {
+    transform: rotate(180deg);
+  }
+
+  .mobile-section-content {
+    display: block;
+    padding-bottom: 0.5rem;
+  }
+
+  .mobile-section-content.hidden {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mobile-section :global(.section-chevron),
+    .mobile-section-content {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+</style>

package/src/navigation/NavDropdown.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * 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
+ * SiteHeader controller drives it. `buttonClass` replaces the default trigger styling, which `tone` tints.
+ */
+import { Icon } from '../primitives/index.ts';
+import type { NavTone } from './types.ts';
+import { TONES } from './tones.ts';
+
+interface Props {
+  /** Id of the panel, referenced by the button's aria-controls. */
+  id: string;
+  label: string;
+  icon?: string;
+  tone?: NavTone;
+  active?: boolean;
+  align?: 'left' | 'center' | 'right';
+  buttonClass?: string;
+  /** Mark the trigger itself as the current page section (aria-current). */
+  current?: boolean;
+}
+
+const { id, label, icon, tone = 'primary', active = false, align = 'left', buttonClass, current = false } = Astro.props;
+
+const t = TONES[tone];
+const ALIGN = { left: 'left-0', center: 'left-1/2 -translate-x-1/2', right: 'right-0' } as const;
+const triggerClass = buttonClass ?? [
+  `flex items-center gap-1.5 px-3 xl:gap-2 xl:px-4 py-2 text-base font-medium rounded-lg transition-colors hover:bg-muted focus-visible:ring-2 ${t.ring} focus-visible:ring-offset-2 cursor-pointer`,
+  active ? t.text : `text-muted-foreground ${t.hoverText}`,
+].join(' ');
+---
+
+<div class="nav-dropdown relative" data-nav-dropdown>
+  <button
+    type="button"
+    class:list={['nav-dropdown-btn', triggerClass]}
+    aria-current={current ? 'page' : undefined}
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-controls={id}
+    data-nav-dropdown-button
+  >
+    {icon && <Icon name={icon} class="hidden xl:block w-4 h-4" />}
+    {label}
+    <Icon name="chevron-down" class="w-3 h-3 transition-transform dropdown-chevron" />
+  </button>
+
+  <div id={id} class:list={['dropdown-menu absolute top-full mt-0 pt-2', ALIGN[align]]}>
+    <slot />
+  </div>
+</div>
+
+<style>
+  /* Opened by the controller through aria-expanded, never by :hover, so crossing the gap does not flicker. */
+  .dropdown-menu {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(4px);
+    transition: opacity 200ms, visibility 200ms, transform 200ms;
+    pointer-events: none;
+  }
+
+  .nav-dropdown-btn[aria-expanded='true'] + .dropdown-menu,
+  .nav-dropdown:focus-within .dropdown-menu {
+    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) {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dropdown-menu,
+    .nav-dropdown :global(.dropdown-chevron) {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+</style>

package/src/navigation/NavMenuLink.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * One row of a desktop dropdown panel. With an icon: an icon box, the label and an optional description; without:
+ * a compact label clamped to two lines. `emphasis` paints the label in the tone (hub links such as "All guides");
+ * `iconStyle="tile"` sets the icon on a tinted square. The row marks itself aria-current when `active`.
+ */
+import { Icon } from '../primitives/index.ts';
+import { TONES } from './tones.ts';
+import type { NavLink, NavTone } from './types.ts';
+
+interface Props {
+  link: NavLink;
+  tone?: NavTone;
+  active?: boolean;
+  size?: 'md' | 'sm';
+  align?: 'start' | 'center';
+  emphasis?: boolean;
+  iconStyle?: 'plain' | 'tile';
+}
+
+const { link, tone = 'primary', active = false, size = 'md', align = 'start', emphasis = false, iconStyle = 'plain' } = Astro.props;
+const t = TONES[tone];
+const hasIcon = Boolean(link.icon);
+const ring = `focus-visible:ring-2 ${t.ring} focus-visible:ring-offset-2`;
+const rowClass = hasIcon
+  ? `flex ${align === 'center' ? 'items-center' : 'items-start'} gap-3 ${size === 'sm' ? 'p-2.5' : 'p-3'} rounded-lg hover:bg-muted transition-colors group ${ring}`
+  : `block p-2.5 rounded-lg hover:bg-muted transition-colors group ${ring}`;
+const boxClass = iconStyle === 'tile'
+  ? `w-8 h-8 rounded-lg ${t.tile} flex items-center justify-center shrink-0 transition-colors`
+  : `${size === 'sm' ? 'w-5 h-5' : 'w-6 h-6'} flex items-center justify-center shrink-0${size === 'sm' && align === 'start' ? ' mt-0.5' : ''}`;
+const iconClass = `${size === 'sm' && iconStyle === 'plain' ? 'w-3.5 h-3.5' : 'w-4 h-4'} ${t.icon}`;
+const labelClass = [
+  emphasis ? `font-semibold ${t.text} ${t.groupStrongHover}` : `font-medium text-foreground ${t.groupHoverText}`,
+  'transition-colors block text-sm',
+  hasIcon ? '' : 'leading-snug line-clamp-2',
+].join(' ').trim();
+---
+
+<a href={link.href} aria-current={active ? 'page' : undefined} class:list={[rowClass, active && `bg-muted font-semibold ${t.text}`]}>
+  {hasIcon && (
+    <div class={boxClass}>
+      <Icon name={link.icon!} class={iconClass} />
+    </div>
+  )}
+  {hasIcon ? (
+    <div>
+      <span class={labelClass}>{link.label}</span>
+      {link.description && <span class="text-xs text-muted-foreground">{link.description}</span>}
+    </div>
+  ) : (
+    <span class={labelClass}>{link.label}</span>
+  )}
+</a>

package/src/navigation/SiteFooter.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * The site footer shell: a brand slot, one column per FooterSection, an optional `bottom` slot, then the copyright
+ * line and the labelled Legal `<nav>` closing with the cookie-preferences button. The button carries
+ * `data-cookie-preferences` instead of an inline handler; footer.ts calls `window.openCookiePreferences()`, which
+ * the site's consent loader defines. Defaults paint the `inverse` surface; the class props restyle each part.
+ */
+import { Icon } from '../primitives/index.ts';
+import type { FooterSection, NavLink, SiteIdentity } from './types.ts';
+
+interface Props {
+  identity: SiteIdentity;
+  sections?: FooterSection[];
+  legal?: NavLink[];
+  cookieLabel?: string;
+  /** Shown between legal items (aria-hidden), e.g. `|`. */
+  separator?: string;
+  year?: number;
+  class?: string;
+  gridClass?: string;
+  brandClass?: string;
+  headingClass?: string;
+  listClass?: string;
+  linkClass?: string;
+  /** Copyright and legal text. */
+  smallClass?: string;
+  dividerClass?: string;
+  legalClass?: string;
+  /** Focus ring shared by every footer control. */
+  ringClass?: string;
+}
+
+const {
+  identity,
+  sections = [],
+  legal = [],
+  cookieLabel = 'Cookie preferences',
+  separator,
+  year = new Date().getFullYear(),
+  class: className = 'bg-inverse text-inverse-muted',
+  gridClass = 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-8 lg:gap-10',
+  brandClass = 'col-span-2 lg:col-span-2',
+  headingClass = 'flex items-center gap-2 text-sm font-medium text-inverse-foreground uppercase tracking-wider mb-4',
+  listClass,
+  linkClass = 'block py-3 text-sm text-inverse-muted/80 hover:text-inverse-foreground transition-colors',
+  smallClass = 'text-xs text-inverse-muted/60',
+  dividerClass = 'border-inverse-muted/10',
+  legalClass = 'gap-x-5 gap-y-2',
+  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}`;
+---
+
+<footer class={className}>
+  <div class="mx-auto max-w-shell px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
+    <div class={gridClass}>
+      <div class={brandClass}>
+        <slot name="brand" />
+      </div>
+
+      {sections.map((section) => (
+        <div>
+          <h3 class={headingClass}>
+            {section.icon && <Icon name={section.icon} class="w-4 h-4" />}
+            {section.title}
+          </h3>
+          <ul class={listClass}>
+            {section.links.map((link) => (
+              <li>
+                <a href={link.href} class={`${linkClass} ${ringClass}`}>{link.label}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+
+    <div class:list={['mt-12 pt-8 border-t', dividerClass]}>
+      <slot name="bottom" />
+      <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
+        <p class={smallClass}>
+          &copy; {year} {identity.name}. All rights reserved.
+        </p>
+        <nav class:list={['flex flex-wrap items-center justify-center sm:justify-end', legalClass]} aria-label="Legal">
+          {legal.map((link) => (
+            <>
+              <a href={link.href} class={legalItemClass}>{link.label}</a>
+              {separator && <span class={`${smallClass} opacity-40`} aria-hidden="true">{separator}</span>}
+            </>
+          ))}
+          <button type="button" class={`${legalItemClass} cursor-pointer bg-transparent border-0 p-0`} data-cookie-preferences>
+            {cookieLabel}
+          </button>
+        </nav>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<script>
+  import { initCookiePreferences } from './footer.ts';
+
+  initCookiePreferences();
+</script>

package/src/navigation/SiteHeader.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * The site header shell: a fixed `<header>` holding the labelled main `<nav>`, a logo slot, the desktop and mobile
+ * action slots and the mobile-menu toggle, then the mobile panel as a sibling of the header (the header's
+ * backdrop-blur would otherwise become the containing block of the fixed panel). The site composes every link,
+ * panel and logo; this component owns the landmarks, the toggle's ARIA and the controller.
+ *
+ * Slots: `logo`, `desktop` (inside the `lg:flex` bar), `actions` (after the desktop bar, every viewport),
+ * `mobile-actions` (before the toggle, below `lg`), `mobile` (the panel content).
+ * `searchPath` (site-relative, e.g. `/search`) turns on the Ctrl/Cmd+K shortcut to `<searchPath>?focus=1`.
+ * The ids default to the ones the sites reserve (`main-nav`, `mobile-menu`, `mobile-menu-btn`). The panel sits outside
+ * `<nav>`, so it carries its own `data-pagefind-ignore`.
+ */
+import { Icon } from '../primitives/index.ts';
+
+interface Props {
+  label?: string;
+  /** Background of the header bar and the mobile panel. */
+  surfaceClass?: string;
+  /** Replaces the header's whole class list (layout included); prefer surfaceClass. */
+  class?: string;
+  toggleClass?: string;
+  openLabel?: string;
+  closeLabel?: string;
+  searchPath?: string;
+  id?: string;
+  panelId?: string;
+  toggleId?: string;
+}
+
+const {
+  label = 'Main navigation',
+  surfaceClass = 'bg-background/95 backdrop-blur-md',
+  class: className = `fixed top-0 left-0 right-0 z-50 transition-[background-color,backdrop-filter,border-color,box-shadow] duration-300 border-b border-border ${surfaceClass}`,
+  toggleClass = 'p-2 min-h-[44px] min-w-[44px] flex items-center justify-center rounded-lg transition-colors text-foreground hover:bg-muted cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+  openLabel = 'Open menu',
+  closeLabel = 'Close menu',
+  searchPath,
+  id = 'main-nav',
+  panelId = 'mobile-menu',
+  toggleId = 'mobile-menu-btn',
+} = Astro.props;
+---
+
+<header
+  id={id}
+  class:list={['site-header', className]}
+  data-site-nav
+  data-search-path={searchPath}
+  data-search-base={searchPath ? import.meta.env.BASE_URL : undefined}
+>
+  <nav class="mx-auto max-w-shell px-4 sm:px-6 lg:px-8" aria-label={label}>
+    <div class="flex h-16 items-center justify-between">
+      <slot name="logo" />
+      <div class="hidden lg:flex items-center gap-1">
+        <slot name="desktop" />
+      </div>
+      <slot name="actions" />
+      <div class="lg:hidden flex items-center gap-1">
+        <slot name="mobile-actions" />
+        <button
+          type="button"
+          id={toggleId}
+          class:list={['site-header-toggle', toggleClass]}
+          aria-label={openLabel}
+          aria-expanded="false"
+          aria-controls={panelId}
+          data-mobile-menu-toggle
+          data-open-label={openLabel}
+          data-close-label={closeLabel}
+        >
+          <Icon name="menu" class="w-6 h-6 menu-open-icon" />
+          <Icon name="x" class="w-6 h-6 menu-close-icon" />
+        </button>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<div id={panelId} class:list={['lg:hidden hidden fixed inset-x-0 top-16 bottom-0 z-50 overflow-y-auto overscroll-contain', surfaceClass]} data-pagefind-ignore>
+  <div class="flex flex-col pt-2 pb-12 border-t border-border relative">
+    <slot name="mobile" />
+  </div>
+</div>
+
+<style>
+  .site-header {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  }
+
+  .site-header:global(.mobile-menu-open) {
+    box-shadow: none;
+  }
+
+  :global(body.mobile-menu-open) {
+    overflow: hidden;
+  }
+
+  /* The icons are Icon components, which scoped selectors do not reach. */
+  .site-header-toggle :global(.menu-close-icon),
+  .site-header-toggle[aria-expanded='true'] :global(.menu-open-icon) {
+    display: none;
+  }
+
+  .site-header-toggle[aria-expanded='true'] :global(.menu-close-icon) {
+    display: block;
+  }
+</style>
+
+<script>
+  import { initNavigation } from './navigation.ts';
+
+  initNavigation();
+  document.addEventListener('astro:page-load', initNavigation);
+</script>

package/src/navigation/activePath.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether `href` is the current section: the page itself or a page below it, on a path-segment boundary
+ * (`/plan` matches `/plan` and `/plan/x`, not `/planning`). The home page matches only itself.
+ * Both sides are normalised page paths (core/url normalizePagePath, url()).
+ */
+export function isActivePath(currentPath: string, href: string): boolean {
+  const target = href.replace(/\/+$/, '');
+  const current = currentPath.replace(/\/+$/, '');
+  if (target === '') return current === '';
+  return current === target || current.startsWith(`${target}/`);
+}

package/src/navigation/footer.ts

@@ -0,0 +1,19 @@
+// The footer's cookie-preferences button. One delegated listener per page, so any number of buttons work and a
+// re-run binds nothing twice. The consent loader owns window.openCookiePreferences.
+
+declare global {
+  interface Window {
+    openCookiePreferences?: () => void;
+  }
+}
+
+let bound = false;
+
+export function initCookiePreferences(): void {
+  if (bound) return;
+  bound = true;
+  document.addEventListener('click', (event) => {
+    const target = event.target;
+    if (target instanceof Element && target.closest('[data-cookie-preferences]')) window.openCookiePreferences?.();
+  });
+}

package/src/navigation/index.ts

@@ -1,2 +1,10 @@
-// Public surface of @sarimarcus/content-sites-ui/navigation. Components land here from SLA-2742 on.
-export {};
+// Public surface of @sarimarcus/content-sites-ui/navigation: site chrome shells. Sites compose every link, panel and
+// logo; these own landmarks, ARIA state and the bundled controllers.
+export { default as SiteHeader } from './SiteHeader.astro';
+export { default as NavDropdown } from './NavDropdown.astro';
+export { default as MobileNavSection } from './MobileNavSection.astro';
+export { default as SiteFooter } from './SiteFooter.astro';
+export { default as NavMenuLink } from './NavMenuLink.astro';
+export { default as MobileNavLink } from './MobileNavLink.astro';
+export { isActivePath } from './activePath.ts';
+export type { SiteIdentity, NavLink, NavGroup, FooterSection, NavTone } from './types.ts';