@contentrain/astro-kit 0.1.1 → 0.3.0

package/components/embed/embed.ts

@@ -0,0 +1,106 @@
+// What an embed URL becomes: the player/map address the iframe loads after a
+// click, the page a plain link opens without JavaScript, and the provider.
+// Only known providers get an iframe; anything else stays a link, so a page
+// can never frame an arbitrary address that came in with the content.
+
+export type EmbedProvider = 'youtube' | 'vimeo' | 'google-maps' | 'openstreetmap' | 'spotify' | 'soundcloud' | 'calendly' | 'typeform' | 'loom' | 'wistia'
+
+export interface EmbedTarget {
+  provider: EmbedProvider
+  /** Loaded into the iframe on activation (autoplays where the provider allows it: the click was the consent). */
+  src: string
+  /** Opened by the plain link: the provider's own page. */
+  href: string
+  kind: 'video' | 'map' | 'audio' | 'widget'
+  /** YouTube Shorts and other vertical players. */
+  portrait?: boolean
+}
+
+const https = (value: string): URL | null => {
+  try {
+    const url = new URL(value.trim())
+    return url.protocol === 'https:' || url.protocol === 'http:' ? url : null
+  }
+  catch { return null }
+}
+
+const YOUTUBE_ID = /^[\w-]{11}$/
+/** `t=1m30s`, `t=90`, `start=90` → seconds. */
+const seconds = (value: string | null): number => {
+  if (!value) return 0
+  if (/^\d+$/.test(value)) return Number(value)
+  const m = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(value)
+  return m ? Number(m[1] ?? 0) * 3600 + Number(m[2] ?? 0) * 60 + Number(m[3] ?? 0) : 0
+}
+
+function youtube(url: URL): EmbedTarget | null {
+  const host = url.hostname.replace(/^(?:www|m)\./, '')
+  let id: string | null = null
+  let portrait = false
+  if (host === 'youtu.be') id = url.pathname.slice(1).split('/')[0] ?? null
+  else if (host === 'youtube.com' || host === 'youtube-nocookie.com') {
+    const [first, second] = url.pathname.split('/').filter(Boolean)
+    if (first === 'watch') id = url.searchParams.get('v')
+    else if (first === 'embed' || first === 'live' || first === 'v') id = second ?? null
+    else if (first === 'shorts') { id = second ?? null; portrait = true }
+  }
+  if (!id || !YOUTUBE_ID.test(id)) return null
+  const start = seconds(url.searchParams.get('t') ?? url.searchParams.get('start'))
+  const query = new URLSearchParams({ autoplay: '1', rel: '0' })
+  if (start) query.set('start', String(start))
+  return {
+    provider: 'youtube',
+    kind: 'video',
+    src: `https://www.youtube-nocookie.com/embed/${id}?${query}`,
+    href: portrait ? `https://www.youtube.com/shorts/${id}` : `https://www.youtube.com/watch?v=${id}${start ? `&t=${start}s` : ''}`,
+    ...(portrait ? { portrait } : {}),
+  }
+}
+
+function vimeo(url: URL): EmbedTarget | null {
+  const host = url.hostname.replace(/^www\./, '')
+  if (host !== 'vimeo.com' && host !== 'player.vimeo.com') return null
+  const parts = url.pathname.split('/').filter(Boolean)
+  const at = parts[0] === 'video' ? 1 : parts.findIndex(p => /^\d+$/.test(p))
+  const id = parts[at]
+  if (!id || !/^\d+$/.test(id)) return null
+  // Unlisted videos carry a hash: `vimeo.com/123/abcdef` or `?h=abcdef`.
+  const hash = url.searchParams.get('h') ?? (parts[at + 1] && /^[\da-f]+$/i.test(parts[at + 1]!) ? parts[at + 1]! : null)
+  const query = new URLSearchParams({ autoplay: '1', dnt: '1' })
+  if (hash) query.set('h', hash)
+  return { provider: 'vimeo', kind: 'video', src: `https://player.vimeo.com/video/${id}?${query}`, href: `https://vimeo.com/${id}${hash ? `/${hash}` : ''}` }
+}
+
+const GOOGLE = new Set(['www.google.com', 'google.com'])
+
+/** Framed as given: the host is known to serve an embeddable page at that address. */
+const FRAMED: Array<[EmbedProvider, EmbedTarget['kind'], (url: URL) => boolean]> = [
+  // Exact hosts only: a pattern over Google's country domains also admits look-alikes (`google.com.evil.example`).
+  ['google-maps', 'map', u => (GOOGLE.has(u.hostname) && u.pathname.startsWith('/maps/embed')) || (u.hostname === 'maps.google.com' && u.searchParams.get('output') === 'embed')],
+  ['openstreetmap', 'map', u => u.hostname === 'www.openstreetmap.org' && u.pathname === '/export/embed.html'],
+  ['spotify', 'audio', u => u.hostname === 'open.spotify.com' && u.pathname.startsWith('/embed/')],
+  ['soundcloud', 'audio', u => u.hostname === 'w.soundcloud.com' && u.pathname.startsWith('/player')],
+  ['calendly', 'widget', u => u.hostname === 'calendly.com'],
+  ['typeform', 'widget', u => /^[\w-]+\.typeform\.com$/.test(u.hostname) && u.pathname.startsWith('/to/')],
+  ['loom', 'video', u => /^(?:www\.)?loom\.com$/.test(u.hostname) && u.pathname.startsWith('/embed/')],
+  ['wistia', 'video', u => u.hostname === 'fast.wistia.net' && u.pathname.startsWith('/embed/')],
+]
+
+/** A video page or player URL, or a known provider's embed address. `null` = not embeddable. */
+export function embedTarget(value: string): EmbedTarget | null {
+  const url = https(value)
+  if (!url) return null
+  const found = youtube(url) ?? vimeo(url)
+  if (found) return found
+  url.protocol = 'https:'
+  for (const [provider, kind, test] of FRAMED) if (test(url)) return { provider, kind, src: url.href, href: url.href }
+  return null
+}
+
+/** A Google map of a place or address (what Elementor's and Divi's map widgets store). */
+export function mapTarget(address: string): EmbedTarget | null {
+  const q = address.trim()
+  if (!q) return null
+  const query = encodeURIComponent(q)
+  return { provider: 'google-maps', kind: 'map', src: `https://www.google.com/maps?q=${query}&output=embed`, href: `https://www.google.com/maps/search/?api=1&query=${query}` }
+}

package/components/embed/fixtures.json

@@ -0,0 +1,34 @@
+[
+  {
+    "name": "youtube-poster",
+    "props": { "url": "https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=1m5s", "title": "A walk through the new studio", "caption": "Filmed in spring, four minutes.", "poster": { "src": "/kit-fixtures/photo-2.svg", "alt": "", "width": 1200, "height": 800 } }
+  },
+  {
+    "name": "vimeo-plain-page",
+    "props": { "url": "https://vimeo.com/76979871", "title": "The making of the journal", "width": "page", "aspect": "video" }
+  },
+  {
+    "name": "shorts-auto-portrait",
+    "props": { "url": "https://youtube.com/shorts/aqz-KE-bpKQ", "title": "One-minute tip" }
+  },
+  {
+    "name": "forced-square",
+    "props": { "url": "https://youtu.be/aqz-KE-bpKQ", "title": "Square cut", "aspect": "square" }
+  },
+  {
+    "name": "forced-portrait",
+    "props": { "url": "https://youtu.be/aqz-KE-bpKQ", "title": "Vertical cut", "aspect": "portrait" }
+  },
+  {
+    "name": "map-address",
+    "props": { "address": "Rua Augusta 100, Lisbon", "title": "Our office", "showLabel": "Show map", "aspect": "map" }
+  },
+  {
+    "name": "spotify-strip",
+    "props": { "url": "https://open.spotify.com/embed/episode/7makk4oTQel546B0PZlDM5", "title": "Episode 12 — Slow travel" }
+  },
+  {
+    "name": "unknown-provider-link",
+    "props": { "url": "https://example.com/widget/42", "title": "Booking calendar" }
+  }
+]

package/components/embed/meta.json

@@ -0,0 +1,32 @@
+{
+  "id": "embed",
+  "name": "Embed",
+  "description": "A video, map or player from another site (YouTube, Vimeo, Google Maps, OpenStreetMap, Spotify, SoundCloud, Calendly, Typeform, Loom, Wistia), loaded only on click: until then a poster link to the provider's page, with no iframe, no third-party request and no cookie (YouTube through youtube-nocookie.com). Unknown providers are never framed; they stay a plain link.",
+  "category": "content",
+  "uses": [],
+  "shared": ["KitImage.astro", "types.ts"],
+  "variants": {
+    "aspect": { "options": ["auto", "video", "portrait", "square", "map"], "default": "auto", "description": "auto: 16:9 for videos, 9:16 for YouTube Shorts, 4:3 (16:9 wide) for maps, a fixed strip for audio players. The others force a ratio." },
+    "width": { "options": ["prose", "page"], "default": "prose", "description": "prose: as wide as the reading column. page: the full page frame." }
+  },
+  "props": {
+    "url": { "type": "url", "description": "A video page (youtube.com/watch, youtu.be, /shorts/, vimeo.com/<id>) or a known provider's embed address (google.com/maps/embed, open.spotify.com/embed, w.soundcloud.com/player, calendly.com, *.typeform.com/to, loom.com/embed, fast.wistia.net/embed)." },
+    "address": { "type": "string", "description": "A place or address shown on a Google map when there is no url (Elementor google_maps address, Divi map address)." },
+    "title": { "type": "string", "description": "What it is: the player's accessible name and the poster's text." },
+    "caption": { "type": "string", "description": "A line under the embed." },
+    "poster": { "type": "object", "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } }, "description": "Local poster image (an ImageInput; its alt is not used, the link names the embed). Without one the poster is a plain dark panel. Never a provider thumbnail URL: that would be a third-party request before the click." },
+    "playLabel": { "type": "string", "description": "Poster action for a video or audio player (ui-strings embed.play)." },
+    "showLabel": { "type": "string", "description": "Poster action for a map or widget (ui-strings embed.show)." },
+    "id": { "type": "string", "description": "Element id." }
+  },
+  "slots": {},
+  "js": "vanilla",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": ["core/embed"],
+    "elementor": ["elementor/video", "elementor/google_maps"],
+    "divi": ["divi/et_pb_video", "divi/et_pb_map"],
+    "classic": ["classic/youtube", "classic/vimeo", "classic/google-maps"]
+  },
+  "a11y": "The poster is one link named '<action>: <title>' that opens the provider's page without script. With script, Enter or a click puts the iframe in its place with the title as its accessible name and moves focus into it. Modified clicks (new tab) keep the link behaviour. The play icon is decorative."
+}

package/components/faq/Faq.astro

@@ -14,10 +14,10 @@ export interface FaqItem {
 
 const faq = tv({
   slots: {
-    heading: 'mb-8 text-2xl font-bold tracking-tight text-balance md:text-3xl',
+    heading: 'mb-8 text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
     list: 'flex flex-col',
     item: 'group',
-    summary: 'flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    summary: 'flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg [font-weight:var(--font-weight-heading,600)] [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
     marker: 'size-5 shrink-0 transition-transform duration-200 group-open:rotate-45',
     answer: 'prose-site prose max-w-none pb-5 text-current',
   },
@@ -25,6 +25,8 @@ const faq = tv({
     style: {
       lines: { list: 'divide-y divide-line border-y border-line' },
       cards: { list: 'gap-3', item: 'rounded-card border border-line px-5', summary: 'py-5' },
+      // WordPress's details block: the browser's own disclosure triangle, no rules or box.
+      plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-base [font-weight:inherit] [&::-webkit-details-marker]:inline', marker: 'hidden', answer: 'pt-2 pl-5' },
     },
     tone: { default: {}, muted: { item: 'bg-surface' }, inverse: { answer: 'prose-invert' }, accent: { answer: 'prose-invert' } },
   },
@@ -37,7 +39,7 @@ const faq = tv({
 interface Props {
   items: FaqItem[]
   heading?: string | undefined
-  style?: 'lines' | 'cards' | undefined
+  style?: 'lines' | 'cards' | 'plain' | undefined
   /** One answer open at a time (`<details name>`). */
   exclusive?: boolean | undefined
   /** Open the first answer. */

package/components/faq/fixtures.json

@@ -32,5 +32,9 @@
   {
     "name": "cards-accent",
     "props": { "style": "cards", "tone": "accent", "id": "faq-accent", "items": [{ "question": "How do I cancel my membership?", "answer": "<p>From your account page, at any time.</p>" }] }
+  },
+  {
+    "name": "plain",
+    "props": { "style": "plain", "id": "faq-plain", "items": [{ "question": "Do you accept guest essays?", "answer": "<p>Yes, send a short pitch first.</p>" }, { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month.</p>" }] }
   }
 ]

package/components/faq/meta.json

@@ -6,7 +6,7 @@
   "uses": [],
   "shared": ["Section.astro"],
   "variants": {
-    "style": { "options": ["lines", "cards"], "default": "lines", "description": "lines: rows divided by rules. cards: each question in a rounded box." },
+    "style": { "options": ["lines", "cards", "plain"], "default": "lines", "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes (WordPress's details block)." },
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background." }
   },
   "props": {

package/components/footer/Footer.astro

@@ -29,7 +29,7 @@ interface Props {
   siteName: string
   tagline?: string | undefined
   /** Link groups for the `columns` layout. */
-  columns?: Array<{ title: string, links: LinkInput[] }> | undefined
+  columns?: Array<{ title?: string | undefined, label?: string | undefined, links: LinkInput[] }> | undefined
   /** A single row of links (the footer menu). */
   links?: LinkInput[] | undefined
   social?: LinkInput[] | undefined
@@ -54,8 +54,8 @@ const line = copyright ?? `© ${new Date().getFullYear()} ${siteName}`
     </div>
     {layout === 'columns'
       ? columns.map(column => (
-        <nav aria-label={column.title}>
-          <p class="mb-3 font-semibold">{column.title}</p>
+        <nav aria-label={column.label ?? column.title} data-cr-part="nav-footer">
+          {column.title && <p class="mb-3 font-semibold">{column.title}</p>}
           <ul class="flex flex-col gap-2">
             {column.links.map(item => <li><a href={item.href} class={link()}>{item.label}</a></li>)}
           </ul>
@@ -69,7 +69,7 @@ const line = copyright ?? `© ${new Date().getFullYear()} ${siteName}`
             </ul>
           )}
           {links.length > 0 && (
-            <nav aria-label={navLabel}>
+            <nav aria-label={navLabel} data-cr-part="nav-footer">
               <ul class="flex flex-wrap gap-x-6 gap-y-2">
                 {links.map(item => <li><a href={item.href} class={link()}>{item.label}</a></li>)}
               </ul>

package/components/footer/meta.json

@@ -4,28 +4,121 @@
   "description": "Site footer: brand and tagline, link columns or one row of links, social links and the copyright line.",
   "category": "chrome",
   "uses": [],
-  "shared": ["types.ts"],
+  "shared": [
+    "types.ts"
+  ],
   "variants": {
-    "layout": { "options": ["simple", "columns"], "default": "simple", "description": "simple: brand left, links and copyright right. columns: brand column plus one column per link group." },
-    "tone": { "options": ["default", "muted", "inverse"], "default": "default", "description": "Surface with a top border, muted surface, or dark (ink) background." }
+    "layout": {
+      "options": [
+        "simple",
+        "columns"
+      ],
+      "default": "simple",
+      "description": "simple: brand left, links and copyright right. columns: brand column plus one column per link group."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse"
+      ],
+      "default": "default",
+      "description": "Surface with a top border, muted surface, or dark (ink) background."
+    }
   },
   "props": {
-    "siteName": { "type": "string", "required": true, "description": "Site title (site.title or site.organization)." },
-    "tagline": { "type": "string", "description": "One line under the name (site.tagline)." },
-    "columns": { "type": "array", "items": { "type": "object", "fields": { "title": { "type": "string", "required": true }, "links": { "type": "array", "required": true } } }, "description": "Link groups for the columns layout; each footer menu or widget area becomes one." },
-    "links": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } } }, "description": "One row of links (the footer menu) for the simple layout." },
-    "social": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } } }, "description": "Social profile links (site.same_as)." },
-    "copyright": { "type": "string", "description": "Copyright line; defaults to © <year> <siteName>." },
-    "navLabel": { "type": "string", "description": "Accessible name of the footer navigation (ui-strings nav.footer)." }
+    "siteName": {
+      "type": "string",
+      "required": true,
+      "description": "Site title (site.title or site.organization)."
+    },
+    "tagline": {
+      "type": "string",
+      "description": "One line under the name (site.tagline)."
+    },
+    "columns": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "fields": {
+          "title": {
+            "type": "string",
+            "description": "Heading shown above the links; leave out when the source shows none."
+          },
+          "label": {
+            "type": "string",
+            "description": "Accessible name of the column navigation (the menu name); defaults to the title."
+          },
+          "links": {
+            "type": "array",
+            "required": true
+          }
+        }
+      },
+      "description": "Link groups for the columns layout; each footer menu or widget area becomes one."
+    },
+    "links": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          }
+        }
+      },
+      "description": "One row of links (the footer menu) for the simple layout."
+    },
+    "social": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          }
+        }
+      },
+      "description": "Social profile links (site.same_as)."
+    },
+    "copyright": {
+      "type": "string",
+      "description": "Copyright line; defaults to © <year> <siteName>."
+    },
+    "navLabel": {
+      "type": "string",
+      "description": "Accessible name of the footer navigation (ui-strings nav.footer)."
+    }
   },
   "slots": {},
   "js": "none",
   "dependencies": {},
   "sources": {
-    "gutenberg": ["core/template-part:footer", "core/social-links"],
-    "elementor": ["elementor/social-icons", "elementor/icon-list"],
-    "divi": ["divi/et_pb_social_media_follow"],
-    "classic": ["classic/footer", "classic/widget-area"]
+    "gutenberg": [
+      "core/template-part:footer",
+      "core/social-links"
+    ],
+    "elementor": [
+      "elementor/social-icons",
+      "elementor/icon-list"
+    ],
+    "divi": [
+      "divi/et_pb_social_media_follow"
+    ],
+    "classic": [
+      "classic/footer",
+      "classic/widget-area"
+    ]
   },
   "a11y": "One <footer> landmark; each link group is a <nav> named by its title. Social links open in a new tab with rel=me."
 }

package/components/gallery/Gallery.astro

@@ -14,10 +14,10 @@ export interface GalleryItem {
 
 const gallery = tv({
   slots: {
-    heading: 'mb-8 text-2xl font-bold tracking-tight md:text-3xl',
+    heading: 'mb-8 text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight md:text-3xl',
     list: 'gap-3 md:gap-4',
     item: 'm-0',
-    frame: 'block w-full cursor-zoom-in overflow-hidden rounded-card focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    frame: 'block w-full cursor-zoom-in overflow-hidden rounded-[var(--radius-image,var(--radius-card))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
     thumb: 'h-full w-full object-cover transition-transform duration-300 hover:scale-[1.02]',
     caption: 'mt-2 text-sm opacity-75',
     viewer: 'm-auto max-h-[92vh] max-w-[92vw] bg-transparent p-0 backdrop:bg-ink/85',
@@ -74,7 +74,7 @@ const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 2
             {open === 'popover' && (
               <div id={viewer} popover class={s.viewer()}>
                 <figure class="m-0 flex flex-col items-center gap-3">
-                  <KitImage image={item.image} sizes="92vw" class="max-h-[80vh] w-auto rounded-card object-contain" />
+                  <KitImage image={item.image} sizes="92vw" class="max-h-[80vh] w-auto rounded-[var(--radius-image,var(--radius-card))] object-contain" />
                   {item.caption && <figcaption class="text-sm text-surface">{item.caption}</figcaption>}
                   <button type="button" popovertarget={viewer} popovertargetaction="hide" class="rounded-md border border-surface/40 px-4 py-2 text-sm text-surface hover:bg-surface/10">{closeLabel}</button>
                 </figure>

package/components/header/Header.astro

@@ -55,7 +55,7 @@ const { root, inner, brand } = header({ layout, tone, position })
       {showName && <span>{siteName}</span>}
     </a>
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto']}>
-      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} align={layout === 'centered' ? 'center' : 'end'} />
+      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
     </div>
   </div>

package/components/hero/Hero.astro

@@ -12,10 +12,10 @@ const hero = tv({
     grid: 'grid items-center gap-10',
     copy: 'flex flex-col gap-5',
     eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
-    heading: 'text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-6xl',
+    heading: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-5xl lg:text-6xl',
     lead: 'max-w-2xl text-lg text-pretty opacity-85 md:text-xl',
     actions: 'flex flex-wrap gap-3 pt-2',
-    media: 'overflow-hidden rounded-card',
+    media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
   },
   variants: {
     layout: {
@@ -25,8 +25,13 @@ const hero = tv({
     },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
     tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'opacity-100', lead: 'opacity-100' } },
+    // Where a cover sets its text over the image. WordPress covers centre it unless told otherwise.
+    align: { start: {}, center: {} },
   },
-  defaultVariants: { layout: 'split', tone: 'default' },
+  compoundVariants: [
+    { layout: 'cover', align: 'center', class: { grid: 'justify-items-center', copy: 'mx-auto items-center text-center', lead: 'mx-auto', actions: 'justify-center' } },
+  ],
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center' },
 })
 
 interface Props {
@@ -38,12 +43,14 @@ interface Props {
   actions?: ActionInput[] | undefined
   image?: ImageInput | undefined
   layout?: 'split' | 'centered' | 'cover' | undefined
+  /** Text position over a cover image; other layouts ignore it. */
+  align?: 'start' | 'center' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
 }
 
-const { heading, level = 1, eyebrow, lead, actions = [], image, layout = 'split', tone, id } = Astro.props
-const s = hero({ layout, tone })
+const { heading, level = 1, eyebrow, lead, actions = [], image, layout = 'split', align, tone, id } = Astro.props
+const s = hero({ layout, align, tone })
 const Heading = level === 1 ? 'h1' : 'h2'
 const headingId = id ? `${id}-title` : undefined
 const cover = layout === 'cover' && image
@@ -58,7 +65,7 @@ const cover = layout === 'cover' && image
           <div class={s.copy()}>
             {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
             <Heading id={headingId} class={s.heading()}>{heading}</Heading>
-            {lead && <p class={s.lead()}>{lead}</p>}
+            {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
             {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
           </div>
         </div>
@@ -71,7 +78,7 @@ const cover = layout === 'cover' && image
         <div class={s.copy()}>
           {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
           <Heading id={headingId} class={s.heading()}>{heading}</Heading>
-          {lead && <p class={s.lead()}>{lead}</p>}
+          {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
           {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
         </div>
         {image && (

package/components/hero/fixtures.json

@@ -66,6 +66,27 @@
       }
     }
   },
+  {
+    "name": "cover-start",
+    "props": {
+      "heading": "The long way round",
+      "lead": "A year of trains across Europe, one station at a time.",
+      "layout": "cover",
+      "actions": [
+        {
+          "label": "Read the series",
+          "href": "/series/long-way/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-3.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 900
+      },
+      "align": "start"
+    }
+  },
   {
     "name": "inverse-text-only",
     "props": {

package/components/hero/meta.json

@@ -29,6 +29,14 @@
       ],
       "default": "default",
       "description": "Section background (ignored by cover, which is always light text on the image)."
+    },
+    "align": {
+      "options": [
+        "start",
+        "center"
+      ],
+      "default": "center",
+      "description": "Text position over a cover image (layout cover only): centred, as WordPress covers default to, or at the start edge."
     }
   },
   "props": {

package/components/nav/Nav.astro

@@ -34,15 +34,17 @@ interface Props {
   density?: 'compact' | 'comfortable' | undefined
   /** Unique per page when a page has two navigations. */
   id?: string | undefined
+  /** What the navigation is, for checks that find a page's parts (`data-cr-part`, e.g. "nav-header"). */
+  part?: string | undefined
 }
 
-const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', align, density, id = 'site-nav' } = Astro.props
+const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', align, density, id = 'site-nav', part } = Astro.props
 const { list, link, sub, toggle } = nav({ align, density })
 const current = Astro.url.pathname
 const drawer = `${id}-drawer`
 ---
 {items.length > 0 && (
-  <nav aria-label={label} class="relative">
+  <nav aria-label={label} data-cr-part={part} class="relative">
     <ul class={list()}>
       {items.map(item => (
         <li class="group relative">