@contentrain/astro-kit 0.1.0 → 0.2.0

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',
   },

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

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">

package/components/nav/meta.json

@@ -4,27 +4,100 @@
   "description": "Site navigation: an inline list with hover/focus submenus on wide screens and a toggle on narrow ones that opens a native popover drawer or a <details> dropdown. No JavaScript.",
   "category": "chrome",
   "uses": [],
-  "shared": ["types.ts"],
+  "shared": [
+    "types.ts"
+  ],
   "variants": {
-    "mobile": { "options": ["popover", "details"], "default": "popover", "description": "Narrow-screen menu: a side drawer (Popover API) or a dropdown under the toggle." },
-    "align": { "options": ["start", "end", "center"], "default": "end", "description": "Horizontal alignment of the inline list." },
-    "density": { "options": ["compact", "comfortable"], "default": "compact", "description": "Gap and text size of the inline list." }
+    "mobile": {
+      "options": [
+        "popover",
+        "details"
+      ],
+      "default": "popover",
+      "description": "Narrow-screen menu: a side drawer (Popover API) or a dropdown under the toggle."
+    },
+    "align": {
+      "options": [
+        "start",
+        "end",
+        "center"
+      ],
+      "default": "end",
+      "description": "Horizontal alignment of the inline list."
+    },
+    "density": {
+      "options": [
+        "compact",
+        "comfortable"
+      ],
+      "default": "compact",
+      "description": "Gap and text size of the inline list."
+    }
   },
   "props": {
-    "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "children": { "type": "array" } } }, "description": "Menu entries; one level of children is shown." },
-    "label": { "type": "string", "description": "Accessible name of the navigation landmark (ui-strings nav.label)." },
-    "menuLabel": { "type": "string", "description": "Text of the narrow-screen toggle (ui-strings nav.menu)." },
-    "closeLabel": { "type": "string", "description": "Text of the drawer's close button (ui-strings nav.close)." },
-    "id": { "type": "string", "description": "Unique id when a page renders two navigations." }
+    "items": {
+      "type": "array",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "newTab": {
+            "type": "boolean"
+          },
+          "children": {
+            "type": "array"
+          }
+        }
+      },
+      "description": "Menu entries; one level of children is shown."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name of the navigation landmark (ui-strings nav.label)."
+    },
+    "menuLabel": {
+      "type": "string",
+      "description": "Text of the narrow-screen toggle (ui-strings nav.menu)."
+    },
+    "closeLabel": {
+      "type": "string",
+      "description": "Text of the drawer's close button (ui-strings nav.close)."
+    },
+    "id": {
+      "type": "string",
+      "description": "Unique id when a page renders two navigations."
+    },
+    "part": {
+      "type": "string",
+      "description": "What the navigation is, for checks that find a page's parts (data-cr-part), e.g. \"nav-header\"."
+    }
   },
   "slots": {},
   "js": "none",
   "dependencies": {},
   "sources": {
-    "gutenberg": ["core/navigation", "core/page-list"],
-    "elementor": ["elementor/nav-menu"],
-    "divi": ["divi/et_pb_menu", "divi/et_pb_fullwidth_menu"],
-    "classic": ["classic/nav-menu"]
+    "gutenberg": [
+      "core/navigation",
+      "core/page-list"
+    ],
+    "elementor": [
+      "elementor/nav-menu"
+    ],
+    "divi": [
+      "divi/et_pb_menu",
+      "divi/et_pb_fullwidth_menu"
+    ],
+    "classic": [
+      "classic/nav-menu"
+    ]
   },
   "a11y": "A <nav> landmark with a label; the current page carries aria-current. Submenus open on :focus-within as well as hover. The drawer is a native popover: Escape and light dismiss close it and focus returns to the toggle."
 }

package/components/newsletter/Newsletter.astro

@@ -0,0 +1,110 @@
+---
+// A newsletter sign-up that posts straight to the list provider's hosted form
+// endpoint (Mailchimp, Kit, MailerLite, Brevo, Buttondown): a plain HTML form,
+// no script, no server of ours. The provider shows its own confirmation page,
+// in a new tab by default so the reader keeps the site. The action must be
+// the named provider's hosted endpoint (exact host and path) — a WordPress-side
+// handler (MC4WP, Divi signup, Jetpack) is dead on a static site — or, for
+// `other`, an https address off the site's own origin. Otherwise the section
+// renders nothing; the migration plan lists such a sign-up for review instead
+// of placing it.
+import { tv } from 'tailwind-variants'
+import Section from '../_shared/Section.astro'
+import { newsletterForm } from './newsletter'
+
+const newsletter = tv({
+  slots: {
+    box: 'flex flex-col gap-6',
+    copy: 'flex flex-col gap-3',
+    heading: 'text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
+    intro: 'max-w-xl text-pretty opacity-85',
+    form: 'flex flex-col gap-3',
+    field: 'flex min-w-0 flex-col gap-1.5',
+    label: 'text-sm font-semibold',
+    input: 'min-h-11 w-full rounded-[var(--radius-control,var(--radius-md))] border border-line bg-surface px-3 py-2 text-base text-ink placeholder:text-ink-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    submit: 'inline-flex min-h-11 items-center justify-center rounded-[var(--radius-control,var(--radius-md))] px-5 py-2.5 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 bg-accent text-accent-ink hover:bg-ink hover:text-surface',
+    note: 'text-sm opacity-75',
+  },
+  variants: {
+    layout: {
+      inline: { box: 'md:flex-row md:items-end md:justify-between md:gap-12', copy: 'md:max-w-md', form: 'md:flex-row md:items-end md:shrink-0' },
+      stacked: { box: 'mx-auto max-w-xl items-stretch text-center', intro: 'mx-auto', form: 'text-start' },
+    },
+    // 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: { submit: 'hover:bg-surface hover:text-ink' },
+      accent: { intro: 'opacity-100', note: 'opacity-100', submit: 'bg-ink text-surface hover:bg-surface hover:text-ink' },
+    },
+  },
+  defaultVariants: { layout: 'inline', tone: 'muted' },
+})
+
+interface Props {
+  /** The provider's form endpoint (Mailchimp `https://….list-manage.com/subscribe/post?u=…&id=…`, Kit `https://app.kit.com/forms/<id>/subscriptions`, …). */
+  action: string
+  provider?: 'mailchimp' | 'kit' | 'mailerlite' | 'brevo' | 'buttondown' | 'other' | undefined
+  /** Field name for the address when the provider is `other` or names it differently. */
+  emailName?: string | undefined
+  /** Ask for a first name too (when the provider takes one). */
+  askName?: boolean | undefined
+  heading?: string | undefined
+  intro?: string | undefined
+  /** Small print under the form (privacy, frequency). */
+  note?: string | undefined
+  /** ui-strings newsletter.email */
+  emailLabel?: string | undefined
+  /** ui-strings newsletter.name */
+  nameLabel?: string | undefined
+  /** ui-strings newsletter.submit */
+  submitLabel?: string | undefined
+  /** Open the provider's confirmation page in a new tab. */
+  newTab?: boolean | undefined
+  layout?: 'inline' | 'stacked' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  id?: string | undefined
+}
+
+const {
+  action, provider = 'mailchimp', emailName, askName = false, heading, intro, note,
+  emailLabel = 'Email address', nameLabel = 'First name', submitLabel = 'Subscribe', newTab = true,
+  layout, tone = 'muted', id = 'newsletter',
+} = Astro.props
+const form = newsletterForm(provider, action, { email: emailName }, Astro.site)
+const s = newsletter({ layout, tone })
+const headingId = heading ? `${id}-title` : undefined
+// `rel` on a form is HTML (the provider's page gets no opener and no referrer) but not in Astro's form attribute types.
+const formRel: Record<string, string> = newTab ? { rel: 'noopener noreferrer' } : {}
+---
+{form && (
+  <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+    <div class={s.box()}>
+      {(heading || intro) && (
+        <div class={s.copy()}>
+          {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+          {intro && <p class={s.intro()}>{intro}</p>}
+        </div>
+      )}
+      <div class="flex flex-col gap-2">
+        <form method="post" action={form.action} target={newTab ? '_blank' : undefined} {...formRel} class={s.form()} aria-labelledby={headingId} aria-label={headingId ? undefined : submitLabel}>
+          {askName && form.name && (
+            <div class={s.field()}>
+              <label for={`${id}-name`} class={s.label()}>{nameLabel}</label>
+              <input id={`${id}-name`} name={form.name} type="text" autocomplete="given-name" class={s.input()} />
+            </div>
+          )}
+          <div class={s.field({ class: 'md:min-w-72' })}>
+            <label for={`${id}-email`} class={s.label()}>{emailLabel}</label>
+            <input id={`${id}-email`} name={form.email} type="email" required autocomplete="email" inputmode="email" class={s.input()} />
+          </div>
+          {form.hidden.map(field => (
+            <div aria-hidden="true" class="absolute -left-[5000px]"><input type="text" name={field.name} value={field.value} tabindex="-1" autocomplete="off" /></div>
+          ))}
+          <button type="submit" class={s.submit()}>{submitLabel}</button>
+        </form>
+        {note && <p class={s.note()}>{note}</p>}
+      </div>
+    </div>
+  </Section>
+)}

package/components/newsletter/fixtures.json

@@ -0,0 +1,6 @@
+[
+  {"name": "mailchimp-inline-muted", "props": {"action": "https://example.us21.list-manage.com/subscribe/post?u=0a1b2c3d&id=9f8e7d", "heading": "Letters from the field", "intro": "One long read a month, nothing else.", "note": "Unsubscribe any time. We never share your address.", "id": "newsletter-mailchimp"}},
+  {"name": "kit-stacked-name", "props": {"action": "https://app.kit.com/forms/1234567/subscriptions", "provider": "kit", "askName": true, "layout": "stacked", "tone": "default", "heading": "Join the journal", "submitLabel": "Sign me up", "id": "newsletter-kit"}},
+  {"name": "brevo-inverse", "props": {"action": "https://a1b2c3d4.sibforms.com/serve/MUIFAB", "provider": "brevo", "tone": "inverse", "heading": "News from the studio", "id": "newsletter-brevo"}},
+  {"name": "other-accent", "props": {"action": "https://buttondown.com/api/emails/embed-subscribe/journal", "provider": "buttondown", "tone": "accent", "id": "newsletter-accent"}}
+]