@sarimarcus/content-sites-ui 0.31.6 → 0.32.0

package/src/editorial/ArticleCategoryNav.astro

@@ -3,10 +3,11 @@
  * ArticleCategoryNav — "All" plus one chip per populated topic, each with a count badge. `categories` is the site's
  * category map in display order; a category with no article is left out.
  */
-import { url } from '@sarimarcus/content-sites-core/url';
+import { routePath, url, type SiteRoutes } from '@sarimarcus/content-sites-core/url';
 import Chip from '../primitives/Chip.astro';
 import Badge from '../primitives/Badge.astro';
 import type { ArticleCategoryLink, ArticleCategoryMeta } from './types';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   articles: readonly { data: { category?: string | null } }[];
@@ -14,6 +15,8 @@ interface Props {
   current?: string;
   ariaLabel?: string;
   allLabel?: string;
+  /** Overrides of the article routes (`articles`, `articleTopic`). */
+  routes?: SiteRoutes;
   class?: string;
 }
 
@@ -21,8 +24,9 @@ const {
   articles,
   categories: categoryMeta,
   current,
-  ariaLabel = 'Browse articles by topic',
-  allLabel = 'All',
+  ariaLabel = LABELS.articleCategoryNav.ariaLabel,
+  allLabel = LABELS.articleCategoryNav.allLabel,
+  routes,
   class: className,
 } = Astro.props;
 
@@ -33,13 +37,13 @@ for (const a of articles) {
 const categories: ArticleCategoryLink[] = Object.keys(categoryMeta)
   .filter((slug) => counts.has(slug))
   .map((slug) => ({
-    href: url(`/articles/topic/${slug}`),
+    href: url(routePath('articleTopic', slug, routes)),
     label: categoryMeta[slug].label,
     icon: categoryMeta[slug].icon,
     count: counts.get(slug)!,
     active: current === slug,
   }));
-const all = { href: url('/articles'), label: allLabel, count: articles.length, active: !current };
+const all = { href: url(routePath('articles', undefined, routes)), label: allLabel, count: articles.length, active: !current };
 const countClass = (active: boolean) => (active ? 'bg-overlay-foreground/20' : 'bg-muted');
 ---
 

package/src/editorial/ArticleFeatureCard.astro

@@ -7,6 +7,7 @@ import type { ImageMetadata } from 'astro';
 import ArticleByline from './ArticleByline.astro';
 import Icon from '../primitives/Icon.astro';
 import ResponsivePicture from '../primitives/ResponsivePicture.astro';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   href: string;
@@ -32,7 +33,7 @@ interface Props {
   class?: string;
 }
 
-const { href, title, description, author, label, image, imageAlt = '', dateTime, dateLabel, updated = false, readLabel = 'Read article', updatedLabel = 'Updated', readingLabel, loading = 'eager', headingLevel = 2, pagefindIgnore = false, class: className = 'mb-12' } = Astro.props;
+const { href, title, description, author, label, image, imageAlt = '', dateTime, dateLabel, updated = false, readLabel = LABELS.articleFeatureCard.readLabel, updatedLabel = LABELS.articleFeatureCard.updatedLabel, readingLabel, loading = 'eager', headingLevel = 2, pagefindIgnore = false, class: className = 'mb-12' } = Astro.props;
 const Heading = `h${headingLevel}` as 'h2' | 'h3';
 ---
 

package/src/editorial/ArticleTopicPager.astro

@@ -7,6 +7,7 @@
 import { formatUtcDate } from '@sarimarcus/content-sites-core/dates';
 import { Icon, LinkArrow } from '../primitives/index.ts';
 import type { TopicPagerLink } from './types';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   topic: { label: string; href: string; count?: number };
@@ -15,6 +16,8 @@ interface Props {
   heading?: string;
   newerLabel?: string;
   olderLabel?: string;
+  /** The topic hub link's text. */
+  allLabel?: string;
   class?: string;
 }
 
@@ -22,9 +25,10 @@ const {
   topic,
   newer,
   older,
-  heading = `Next in ${topic.label}`,
-  newerLabel = 'Newer',
-  olderLabel = 'Older',
+  heading = LABELS.articleTopicPager.heading(topic.label),
+  newerLabel = LABELS.articleTopicPager.newerLabel,
+  olderLabel = LABELS.articleTopicPager.olderLabel,
+  allLabel = LABELS.articleTopicPager.allLabel(topic.label, topic.count),
   class: className,
 } = Astro.props;
 
@@ -33,7 +37,6 @@ const sides = [
   newer && { link: newer, label: newerLabel, dir: 'newer' as const },
   older && { link: older, label: olderLabel, dir: 'older' as const },
 ].filter(Boolean) as { link: TopicPagerLink; label: string; dir: 'newer' | 'older' }[];
-const allLabel = topic.count ? `All ${topic.count} ${topic.label} articles` : `All ${topic.label} articles`;
 ---
 
 {sides.length > 0 && (

package/src/editorial/NotFoundPage.astro

@@ -7,6 +7,7 @@
 import Button from '../primitives/Button.astro';
 import LinkArrow from '../primitives/LinkArrow.astro';
 import Icon from '../primitives/Icon.astro';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   tagline: string;
@@ -19,12 +20,14 @@ interface Props {
   exploreLabel: string;
   /** Accessible name of the section links. */
   exploreAriaLabel?: string;
+  /** The shortcut hint beside the search link. */
+  searchShortcut?: 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, 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;
+const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaLabel, exploreLabel, exploreAriaLabel = LABELS.notFoundPage.exploreAriaLabel, searchShortcut = LABELS.notFoundPage.searchShortcut, 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">
@@ -81,7 +84,7 @@ const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaL
       >
         <Icon name="search" class="w-4 h-4 text-muted-foreground shrink-0" />
         <span class="text-muted-foreground text-sm flex-1">{searchLabel}</span>
-        <kbd class="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono border border-border text-muted-foreground/60 bg-muted/50">⌘K</kbd>
+        <kbd class="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono border border-border text-muted-foreground/60 bg-muted/50">{searchShortcut}</kbd>
       </a>
     </div>
 

package/src/editorial/VisitTiming.astro

@@ -4,6 +4,7 @@
  * default top margin (`mt-12`); `labelClass` sets the slot label size.
  */
 import Icon from '../primitives/Icon.astro';
+import { LABELS } from '../internal/labels';
 
 export interface VisitTimingData {
   bestSeason?: string;
@@ -19,26 +20,29 @@ interface Props {
   id?: string;
   class?: string;
   labelClass?: string;
+  /** Row labels; default English. */
+  labels?: { bestSeason: string; quietestHours: string; visitDuration: string };
 }
 
 const {
   visitTiming,
-  title = 'When to Visit',
+  title = LABELS.visitTiming.title,
   id = 'when-to-visit',
   class: className = 'mt-12',
   labelClass = 'text-[0.8125rem]',
+  labels = LABELS.visitTiming,
 } = Astro.props;
 
 const slots = visitTiming
   ? [
       visitTiming.bestSeason
-        ? { icon: 'calendar', label: 'Best season', value: visitTiming.bestSeason }
+        ? { icon: 'calendar', label: labels.bestSeason, value: visitTiming.bestSeason }
         : null,
       visitTiming.quietestHours
-        ? { icon: 'clock', label: 'Quietest hours', value: visitTiming.quietestHours }
+        ? { icon: 'clock', label: labels.quietestHours, value: visitTiming.quietestHours }
         : null,
       visitTiming.visitDuration
-        ? { icon: 'hourglass', label: 'Visit duration', value: visitTiming.visitDuration }
+        ? { icon: 'hourglass', label: labels.visitDuration, value: visitTiming.visitDuration }
         : null,
     ].filter((s): s is { icon: string; label: string; value: string } => s !== null)
   : [];

package/src/editorial/index.ts

@@ -16,7 +16,7 @@ export { default as ArticleCategoryNav } from './ArticleCategoryNav.astro';
 export { default as ArticleTopicPage } from './ArticleTopicPage.astro';
 export { default as ArticleTopicPager } from './ArticleTopicPager.astro';
 export { rankByCount } from './topic';
-export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategoryLink, ArticleCategoryMeta, TopicAuthorCard, TopicPagerLink } from './types';
+export type { AuthorSummary, ArticleSummary, KeyFact, ArticleCategoryLink, ArticleCategoryMeta, TopicAuthorCard, TopicPagerLink } from './types';
 export { default as InsiderTips } from './InsiderTips.astro';
 export type { InsiderTip, InsiderTipAuthor, InsiderTipKinds, InsiderTipTone } from './types';
 export { default as AuthorStrip } from './AuthorStrip.astro';

package/src/editorial/types.ts

@@ -1,6 +1,5 @@
 import type { ImageMetadata } from 'astro';
 import type { BrandTone, TrustedHtml } from '../types';
-import type { SourceInput } from '../seo/types';
 
 /** A person as listed on author strips and cards. The byline shape is ui/seo `ArticleAuthor`. */
 export interface AuthorSummary {
@@ -34,9 +33,6 @@ export interface KeyFact {
   detailHtml?: TrustedHtml;
 }
 
-/** @deprecated Import `SourceInput` from `@sarimarcus/content-sites-ui/seo`. Removed in the next minor (SLA-3020). */
-export type SourceItem = SourceInput;
-
 /** The fields ArticleCategoryNav reads from a site's category map entry. */
 export interface ArticleCategoryMeta {
   label: string;

package/src/internal/labels.ts

@@ -0,0 +1,102 @@
+// The English copy ui components fall back to when the site passes no prop (SLA-2991). A template never writes
+// reader-visible text itself (validate-packages refuses it); it reads a prop whose default is here.
+export const LABELS = {
+  affiliateCard: {
+    pricePrefix: 'From ',
+    bestSeller: 'Best Seller',
+    topRated: 'Top Rated',
+    skipTheLine: 'Skip the line',
+    cta: 'Reserve Your Spot',
+    reviewCount: (n: string) => `(${n} reviews)`,
+  },
+  affiliateCardSection: { title: 'Recommended Tours & Activities' },
+  affiliateCarousel: { heading: 'Recommended tours' },
+  affiliateComparisonTable: {
+    nameLabel: 'Option',
+    priceLabel: 'Price',
+    featureLabel: 'Highlight',
+    caption: 'Comparison of options',
+    ctaColumn: 'Book or view',
+    externalCta: 'Check availability',
+    internalCta: 'View details',
+    externalAria: (cta: string, name: string) => `${cta}: ${name} (opens in a new tab)`,
+    internalAria: (cta: string, name: string) => `${cta}: ${name}`,
+    rated: (rating: number, count?: number) => `Rated ${rating} out of 5${count ? ` from ${count} reviews` : ''}`,
+  },
+  amazonProductCard: { ctaLabel: 'View on Amazon' },
+  amazonProductSection: { title: 'Recommended reading' },
+  hotelAffiliateCTA: {
+    headline: (name: string) => `Find the best rate for ${name}`,
+    bookCta: (noun: string) => `Book this ${noun}`,
+    searchCta: 'Check prices & availability',
+    bookSubhead: 'Check current availability and rates.',
+    searchSubhead: (noun: string) => `Search current prices and availability for this ${noun}.`,
+    from: 'from ',
+    perNight: ' / night',
+    reviews: (n: string) => `(${n} reviews)`,
+    ratingOn: (source: string) => `on ${source}`,
+    freeToSearch: 'Free to search · No sign-up needed',
+    officialSite: (noun: string) => `Visit the ${noun}'s official site`,
+  },
+  inlineAffiliateCTA: { cta: 'See tours' },
+  stickyCTA: {
+    label: 'Reserve Your Spot',
+    note: 'Found the right tour? Reserve your spot before it fills.',
+    dismissLabel: 'Dismiss',
+  },
+  travelpayoutsWidget: {
+    hotel: 'Hotel search',
+    activity: 'Activity search',
+    train: 'Train and bus search',
+    car: 'Car rental search',
+  },
+  cardCarousel: {
+    viewAllLabel: 'View all',
+    regionLabel: 'Carousel',
+    previousLabel: (name: string | undefined) => `Previous, ${name ?? 'carousel'}`,
+    nextLabel: (name: string | undefined) => `Next, ${name ?? 'carousel'}`,
+  },
+  faq: { title: 'Frequently asked questions' },
+  pagination: {
+    ariaLabel: 'Pagination',
+    previousLabel: 'Previous',
+    nextLabel: 'Next',
+    pageLabel: (page: number) => `Go to page ${page}`,
+    currentPageLabel: (page: number) => `Page ${page}, current page`,
+  },
+  tableOfContents: {
+    ariaLabel: 'Table of contents',
+    jumpLabel: 'Jump to a section',
+    stickyLabel: (name: string) => `${name} (sticky)`,
+  },
+  alsoExplore: { eyebrow: 'Also explore' },
+  articleCategoryNav: { ariaLabel: 'Browse articles by topic', allLabel: 'All' },
+  articleFeatureCard: { readLabel: 'Read article', updatedLabel: 'Updated' },
+  articleTopicPager: {
+    heading: (topic: string) => `Next in ${topic}`,
+    newerLabel: 'Newer',
+    olderLabel: 'Older',
+    allLabel: (topic: string, count?: number) => (count ? `All ${count} ${topic} articles` : `All ${topic} articles`),
+  },
+  notFoundPage: { exploreAriaLabel: 'Explore sections', searchShortcut: '⌘K' },
+  visitTiming: { title: 'When to Visit', bestSeason: 'Best season', quietestHours: 'Quietest hours', visitDuration: 'Visit duration' },
+  articlesNavMenu: { latestHeading: 'Latest' },
+  siteFooter: { cookieLabel: 'Cookie preferences', rightsLabel: 'All rights reserved.', legalAriaLabel: 'Legal' },
+  siteHeader: { label: 'Main navigation', openLabel: 'Open menu', closeLabel: 'Close menu' },
+  articleMetadata: {
+    writtenByLabel: 'Written by',
+    portraitLabel: 'Portrait of',
+    updatedLabel: 'Updated',
+    publishedLabel: 'Published',
+    ariaLabel: 'Article information',
+  },
+  authoritativeSources: {
+    title: 'Sources',
+    eyebrow: 'Further reading',
+    countLabel: 'references',
+    showLabel: 'Show',
+    hideLabel: 'Hide',
+    newTabLabel: '(opens in a new tab)',
+  },
+  breadcrumb: { homeLabel: 'Home', ariaLabel: 'Breadcrumb navigation' },
+};

package/src/layout/BreadcrumbBand.astro

@@ -1,18 +1,19 @@
 ---
 /**
  * BreadcrumbBand — the muted strip under the fixed header that holds a page's breadcrumb trail (default slot).
- * `ignore` keeps it out of the Pagefind body.
+ * `ignore` keeps it out of the Pagefind body. `class` replaces the band's own classes (keep `pt-16`, the header offset).
  */
 import Container from './Container.astro';
 
 interface Props {
   ignore?: boolean;
+  class?: string;
 }
 
-const { ignore = true } = Astro.props;
+const { ignore = true, class: className = 'pt-16 bg-muted/50 border-b border-border' } = Astro.props;
 ---
 
-<div class="pt-16 bg-muted/50 border-b border-border" data-pagefind-ignore={ignore ? '' : undefined}>
+<div class={className} data-pagefind-ignore={ignore ? '' : undefined}>
   <Container class="py-3">
     <slot />
   </Container>

package/src/layout/EntityDetailShell.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * EntityDetailShell — the frame of an entity detail page: breadcrumb band, a Pagefind body wrapper around the hero
+ * (`data-pagefind-meta="type:<pagefindType>"`, with one sr-only `audience:<a>` filter span per `audiences` entry
+ * before the hero), then <main> holding the column (default slot), `after-column` and the `closer` Container.
+ * The route keeps Layout, StructuredData (a direct Layout child), the data, the hero and every body block.
+ *
+ * - `pagefindType` omitted: no wrapper; a route that indexes its body puts its own wrapper in the default slot.
+ * - `pagefindScope="page"`: the wrapper also holds <main>, for a page whose whole body is indexed.
+ * - `column={false}`: the default slot goes into <main> as is, for a body that leaves the column.
+ * - `closer`: renders the `closer` slot in a default Container; it defaults to whether that slot was passed.
+ */
+import BreadcrumbBand from './BreadcrumbBand.astro';
+import Container from './Container.astro';
+
+interface Props {
+  pagefindType?: string;
+  pagefindScope?: 'hero' | 'page';
+  audiences?: readonly string[];
+  /** `false` keeps the breadcrumb band in the Pagefind body. */
+  breadcrumbIgnore?: boolean;
+  mainClass?: string;
+  column?: 'measure' | 'content' | false;
+  closer?: boolean;
+}
+
+const {
+  pagefindType,
+  pagefindScope = 'hero',
+  audiences = [],
+  breadcrumbIgnore = true,
+  mainClass = 'pt-6 pb-12 lg:pt-8 lg:pb-20',
+  column = 'measure',
+  closer = Astro.slots.has('closer'),
+} = Astro.props;
+const meta = `type:${pagefindType}`;
+const wrapsPage = Boolean(pagefindType) && pagefindScope === 'page';
+---
+
+<BreadcrumbBand ignore={breadcrumbIgnore}><slot name="breadcrumb" /></BreadcrumbBand>
+
+{/* <main> is spelled out per branch: a dynamic wrapper tag buffers its children and moved hoisted scripts above it. */}
+{wrapsPage ? (
+  <div data-pagefind-body data-pagefind-meta={meta}>
+    {audiences.map((a) => <span class="sr-only" data-pagefind-filter={`audience:${a}`}>{a}</span>)}
+    <slot name="hero" />
+    <main class={mainClass}>
+      {column ? (
+        <Container size={column}><slot /></Container>
+      ) : (
+        <slot />
+      )}
+      <slot name="after-column" />
+      {closer && (
+        <Container><slot name="closer" /></Container>
+      )}
+    </main>
+  </div>
+) : (
+  <Fragment>
+    {pagefindType ? (
+      <div data-pagefind-body data-pagefind-meta={meta}>
+        {audiences.map((a) => <span class="sr-only" data-pagefind-filter={`audience:${a}`}>{a}</span>)}
+        <slot name="hero" />
+      </div>
+    ) : (
+      <Fragment>
+        {audiences.map((a) => <span class="sr-only" data-pagefind-filter={`audience:${a}`}>{a}</span>)}
+        <slot name="hero" />
+      </Fragment>
+    )}
+    <main class={mainClass}>
+      {column ? (
+        <Container size={column}><slot /></Container>
+      ) : (
+        <slot />
+      )}
+      <slot name="after-column" />
+      {closer && (
+        <Container><slot name="closer" /></Container>
+      )}
+    </main>
+  </Fragment>
+)}

package/src/layout/ListingShell.astro

@@ -15,13 +15,15 @@ interface Props {
   contained?: boolean;
   /** `false` keeps the page indexable, for a listing whose bands carry `data-pagefind-body` prose. */
   pagefindIgnore?: boolean;
+  /** Replaces the breadcrumb band's own classes, for a hub whose band takes the hero's colour. */
+  breadcrumbClass?: string;
 }
 
-const { mainClass = 'py-12 lg:py-20', contained = true, pagefindIgnore = true } = Astro.props;
+const { mainClass = 'py-12 lg:py-20', contained = true, pagefindIgnore = true, breadcrumbClass } = Astro.props;
 ---
 
 <div data-pagefind-ignore={pagefindIgnore ? '' : undefined}>
-  <BreadcrumbBand ignore={false}>
+  <BreadcrumbBand ignore={false} class={breadcrumbClass}>
     <slot name="breadcrumb" />
   </BreadcrumbBand>
 

package/src/layout/analytics.ts

@@ -22,8 +22,6 @@ export function track(eventName: string, params: Record<string, unknown> = {}):
   window.dataLayer.push({ event: eventName, page_path: window.location.pathname, ...params });
 }
 
-export { pageTypeOf };
-
 // Param key derived from the data-track-* attribute name where the
 // event-specific prefix (e.g. 'cta_', 'affiliate_', 'link_') has been stripped.
 const HREF_DESTINATION_KEYS: Record<string, string> = {

package/src/layout/index.ts

@@ -2,10 +2,11 @@
 export { default as Container } from './Container.astro';
 export { default as BreadcrumbBand } from './BreadcrumbBand.astro';
 export { default as ListingShell } from './ListingShell.astro';
+export { default as EntityDetailShell } from './EntityDetailShell.astro';
 export { default as AsyncStylesheet } from './AsyncStylesheet.astro';
 export { default as DocumentShell } from './DocumentShell.astro';
 export { default as ConsentAnalytics } from './ConsentAnalytics.astro';
 export type { ConsentType } from './ConsentAnalytics.astro';
 export { shellResources, GTM_ORIGIN, SILKTIDE_BASE, SILKTIDE_STYLESHEET } from './resources.ts';
-export { track, pageTypeOf, setupDelegatedTracking, setupFaqTracking, setupScrollDepthTracking, setupAnalytics } from './analytics.ts';
+export { track, setupDelegatedTracking, setupFaqTracking, setupScrollDepthTracking, setupAnalytics } from './analytics.ts';
 export type { AnalyticsOptions } from './analytics.ts';

package/src/navigation/ArticlesNavMenu.astro

@@ -15,6 +15,7 @@ import MobileNavLink from './MobileNavLink.astro';
 import { isActivePath } from './activePath.ts';
 import { TONES } from './tones.ts';
 import type { ArticlesNavProps } from './types.ts';
+import { LABELS } from '../internal/labels';
 
 type Props = ArticlesNavProps;
 
@@ -26,7 +27,7 @@ const {
   tone = 'primary',
   topicsHeading,
   topics,
-  latestHeading = 'Latest',
+  latestHeading = LABELS.articlesNavMenu.latestHeading,
   latest = [],
   all,
   iconStyle = 'plain',

package/src/navigation/SiteFooter.astro

@@ -7,12 +7,17 @@
  */
 import { Icon } from '../primitives/index.ts';
 import type { FooterSection, NavLink, SiteIdentity } from './types.ts';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   identity: SiteIdentity;
   sections?: FooterSection[];
   legal?: NavLink[];
   cookieLabel?: string;
+  /** Follows the copyright line's site name. */
+  rightsLabel?: string;
+  /** Accessible name of the legal links. */
+  legalAriaLabel?: string;
   /** Shown between legal items (aria-hidden), e.g. `|`. */
   separator?: string;
   year?: number;
@@ -34,7 +39,9 @@ const {
   identity,
   sections = [],
   legal = [],
-  cookieLabel = 'Cookie preferences',
+  cookieLabel = LABELS.siteFooter.cookieLabel,
+  rightsLabel = LABELS.siteFooter.rightsLabel,
+  legalAriaLabel = LABELS.siteFooter.legalAriaLabel,
   separator,
   year = new Date().getFullYear(),
   class: className = 'bg-inverse text-inverse-muted',
@@ -81,9 +88,8 @@ const legalItemClass = `${smallClass} inline-flex min-h-11 items-center hover:te
       <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">
+          &copy; {year} {identity.name}. {`${rightsLabel}\n`}</p>
+        <nav class:list={['flex flex-wrap items-center justify-center sm:justify-end', legalClass]} aria-label={legalAriaLabel}>
           {legal.map((link) => (
             <>
               <a href={link.href} class={legalItemClass}>{link.label}</a>

package/src/navigation/SiteHeader.astro

@@ -12,6 +12,7 @@
  * `<nav>`, so it carries its own `data-pagefind-ignore`.
  */
 import { Icon } from '../primitives/index.ts';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   label?: string;
@@ -29,12 +30,12 @@ interface Props {
 }
 
 const {
-  label = 'Main navigation',
+  label = LABELS.siteHeader.label,
   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',
+  openLabel = LABELS.siteHeader.openLabel,
+  closeLabel = LABELS.siteHeader.closeLabel,
   searchPath,
   id = 'main-nav',
   panelId = 'mobile-menu',

package/src/primitives/index.ts

@@ -3,6 +3,7 @@ export { default as Icon } from './Icon.astro';
 export { default as Badge } from './Badge.astro';
 export { default as Chip } from './Chip.astro';
 export { default as ArrowLabel } from './ArrowLabel.astro';
+export { default as ArrowGlyph } from './ArrowGlyph.astro';
 export { default as RatingStars } from './RatingStars.astro';
 export { default as SectionDivider } from './SectionDivider.astro';
 export { default as LinkArrow } from './LinkArrow.astro';

package/src/seo/ArticleMetadata.astro

@@ -15,6 +15,7 @@
  */
 import { Image } from 'astro:assets';
 import type { ArticleAuthor } from './types';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   author?: ArticleAuthor | null;
@@ -42,11 +43,11 @@ const {
   dateModified,
   timeZone = 'UTC',
   locale = 'en-GB',
-  writtenByLabel = 'Written by',
-  portraitLabel = 'Portrait of',
-  updatedLabel = 'Updated',
-  publishedLabel = 'Published',
-  ariaLabel = 'Article information',
+  writtenByLabel = LABELS.articleMetadata.writtenByLabel,
+  portraitLabel = LABELS.articleMetadata.portraitLabel,
+  updatedLabel = LABELS.articleMetadata.updatedLabel,
+  publishedLabel = LABELS.articleMetadata.publishedLabel,
+  ariaLabel = LABELS.articleMetadata.ariaLabel,
   placeholderClass = 'bg-gradient-to-br from-primary/20 to-accent/20',
   updatedIconClass = 'text-primary',
   bylineWhitespace = 'flat',

package/src/seo/AuthoritativeSources.astro

@@ -17,6 +17,7 @@
  */
 import { outboundClassifier } from '@sarimarcus/content-sites-core/url';
 import type { SourceInput, DomainClassifier } from './types';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   sources: SourceInput[];
@@ -39,18 +40,18 @@ interface Props {
 
 const {
   sources,
-  title = 'Sources',
+  title = LABELS.authoritativeSources.title,
   class: className = '',
-  eyebrow = 'Further reading',
+  eyebrow = LABELS.authoritativeSources.eyebrow,
   eyebrowClass = 'text-xs font-semibold uppercase tracking-[0.18em] text-primary',
   domainLabels = {},
   domainClass = {},
   disambiguate = false,
   disambiguationSeparator = ' — ',
-  countLabel = 'references',
-  showLabel = 'Show',
-  hideLabel = 'Hide',
-  newTabLabel = '(opens in a new tab)',
+  countLabel = LABELS.authoritativeSources.countLabel,
+  showLabel = LABELS.authoritativeSources.showLabel,
+  hideLabel = LABELS.authoritativeSources.hideLabel,
+  newTabLabel = LABELS.authoritativeSources.newTabLabel,
   toggleSizeClass = 'text-sm',
 } = Astro.props;
 

package/src/seo/Breadcrumb.astro

@@ -13,6 +13,7 @@
 import { url } from '@sarimarcus/content-sites-core/url';
 import Icon from '../primitives/Icon.astro';
 import type { BreadcrumbItem } from './types';
+import { LABELS } from '../internal/labels';
 
 interface Props {
   items: BreadcrumbItem[];
@@ -36,9 +37,9 @@ const {
   compactMobile = false,
   separator = 'chevron',
   tapTargets = true,
-  homeLabel = 'Home',
+  homeLabel = LABELS.breadcrumb.homeLabel,
   homeHref = '/',
-  ariaLabel = 'Breadcrumb navigation',
+  ariaLabel = LABELS.breadcrumb.ariaLabel,
   basePath = '/',
 } = Astro.props;