@contentrain/astro-kit 0.4.0 → 0.6.0

package/components/contact-form/ContactForm.astro

@@ -4,11 +4,14 @@
 // StudioForm): its fields, spam protection and notifications live in Studio,
 // and submissions arrive there for review — no form plugin, no mail server.
 // Until the site is bound to a Studio project the form renders nothing and the
-// contact details still show.
+// contact details still show. When the owner chose another home for forms at
+// migration (site.config.ts `features.forms`), the same place holds a form
+// that posts to their form service, an address to write to, or a link to the
+// form on WordPress.
 import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
 import StudioForm from '../../studio/StudioForm.astro'
-import { siteConfig } from '../../../site.config'
+import { formHome } from '../../../lib/features'
 
 export interface ContactDetail {
   label: string
@@ -26,6 +29,8 @@ const contact = tv({
     details: 'mt-2 flex flex-col gap-4',
     term: 'text-sm font-semibold opacity-75',
     value: 'text-current',
+    formColumn: 'flex flex-col gap-4',
+    formHeading: 'text-xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-2xl',
     form: 'rounded-card',
   },
   variants: {
@@ -44,17 +49,21 @@ interface Props {
   model: string
   heading?: string | undefined
   intro?: string | undefined
+  /** The form's own heading, above the form ("Tell us about your project"). */
+  formHeading?: string | undefined
   details?: ContactDetail[] | undefined
   layout?: 'split' | 'stacked' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
 }
 
-const { model, heading, intro, details = [], layout, tone, id = 'contact' } = Astro.props
-// No Studio project bound: no form renders, so a split would leave an empty column — the details stand alone.
-const formShown = Boolean(siteConfig.studio)
+const { model, heading, intro, formHeading, details = [], layout, tone, id = 'contact' } = Astro.props
+// Nothing to render (Studio not bound yet): a split would leave an empty column — the details stand alone.
+const formShown = formHome(model) !== null
 const s = contact({ layout: formShown ? layout : 'stacked', tone })
 const headingId = heading ? `${id}-title` : undefined
+// One level under the section heading, or the section's heading when there is none.
+const FormHeading = heading ? 'h3' : 'h2'
 ---
 <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
   <div class={s.grid()}>
@@ -74,6 +83,13 @@ const headingId = heading ? `${id}-title` : undefined
         )}
       </div>
     )}
-    {formShown && <StudioForm model={model} class={s.form()} />}
+    {formShown && (formHeading
+      ? (
+          <div class={s.formColumn()}>
+            <FormHeading class={s.formHeading()}>{formHeading}</FormHeading>
+            <StudioForm model={model} class={s.form()} />
+          </div>
+        )
+      : <StudioForm model={model} class={s.form()} />)}
   </div>
 </Section>

package/components/contact-form/fixtures.json

@@ -14,5 +14,6 @@
   },
   { "name": "stacked-muted", "props": { "model": "contact-submissions", "heading": "Write to us", "layout": "stacked", "tone": "muted", "id": "write" } },
   { "name": "split-inverse", "props": { "model": "contact-submissions", "heading": "Press", "tone": "inverse", "id": "press", "details": [{ "label": "Press office", "value": "press@northwind.example", "href": "mailto:press@northwind.example" }] } },
-  { "name": "stacked-accent", "props": { "model": "newsletter-requests", "heading": "Request a print copy", "layout": "stacked", "tone": "accent", "id": "print" } }
+  { "name": "stacked-accent", "props": { "model": "newsletter-requests", "heading": "Request a print copy", "layout": "stacked", "tone": "accent", "id": "print" } },
+  { "name": "form-heading", "props": { "model": "contact-submissions", "heading": "Contact", "intro": "Tell us where you are and what you need.", "formHeading": "Tell us about your project", "details": [{ "label": "Address", "value": "12 Harbour Street, Leith" }] } }
 ]

package/components/contact-form/meta.json

@@ -1,7 +1,7 @@
 {
   "id": "contact-form",
   "name": "Contact form",
-  "description": "The contact section: heading, introduction, contact details (email, phone, address) and a Contentrain Studio form — fields, spam protection and notifications set in Studio, submissions reviewed there. Replaces form plugins; renders the details alone until the site is bound to a Studio project.",
+  "description": "The contact section: heading, introduction, contact details (email, phone, address) and a Contentrain Studio form — fields, spam protection and notifications set in Studio, submissions reviewed there. Replaces form plugins; renders the details alone until the site is bound to a Studio project. When the owner chose another home at migration (site.config.ts `features.forms`) the form posts to their form service, or the section shows an address to write to or a link to the form on WordPress.",
   "category": "section",
   "uses": [],
   "shared": ["Section.astro"],
@@ -10,11 +10,12 @@
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background; the form always sits on a surface card." }
   },
   "props": {
-    "model": { "type": "string", "required": true, "description": "The Studio model submissions are saved to — the form's fields are that model's form settings (from the plugin form's fields at migration)." },
-    "heading": { "type": "string", "description": "Section heading." },
-    "intro": { "type": "text", "description": "A line or two above the details." },
-    "details": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "value": { "type": "string", "required": true }, "href": { "type": "url" } } }, "description": "Ways to reach you, in order (Email → mailto:, Phone → tel:, Address → map link)." },
-    "id": { "type": "string", "description": "Section id; the heading gets `<id>-title`." }
+    "model": { "type": "string", "required": true, "content": false, "description": "The Studio model submissions are saved to — the form's fields are that model's form settings (from the plugin form's fields at migration)." },
+    "heading": { "type": "string", "label": "Heading", "description": "Section heading." },
+    "intro": { "type": "text", "label": "Introduction", "description": "A line or two above the details." },
+    "formHeading": { "type": "string", "label": "Form heading", "description": "The form's own heading, shown above the form." },
+    "details": { "type": "array", "label": "Contact details", "items": { "type": "object", "fields": { "label": { "type": "string", "label": "Label", "required": true, "description": "What the detail is (Phone, Email, Address)." }, "value": { "type": "string", "label": "Value", "required": true, "description": "The detail as shown." }, "href": { "type": "url", "label": "Link", "description": "A tel:, mailto: or map link for it." } } }, "description": "Ways to reach you, in order (Email → mailto:, Phone → tel:, Address → map link)." },
+    "id": { "type": "string", "content": false, "description": "Section id; the heading gets `<id>-title`." }
   },
   "slots": {},
   "js": "studio",

package/components/cta/meta.json

@@ -11,10 +11,10 @@
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "accent", "description": "Background. On accent, primary buttons are drawn in the secondary style so they stay visible." }
   },
   "props": {
-    "heading": { "type": "string", "required": true, "description": "The call's heading (Divi CTA title, Elementor call-to-action title)." },
-    "body": { "type": "text", "description": "One or two sentences under the heading." },
-    "actions": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } } }, "description": "Buttons, in order; usually one." },
-    "id": { "type": "string", "description": "Anchor id of the section; the heading gets `<id>-title`." }
+    "heading": { "type": "string", "label": "Heading", "required": true, "description": "The call's heading (Divi CTA title, Elementor call-to-action title)." },
+    "body": { "type": "text", "label": "Text", "description": "One or two sentences under the heading." },
+    "actions": { "type": "array", "label": "Buttons", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "label": "Label", "required": true, "description": "The button text." }, "href": { "type": "url", "label": "Link", "required": true, "description": "Where the button goes: a page on this site or a full address." }, "newTab": { "type": "boolean", "label": "Open in a new tab", "description": "Open the link in a new tab (an external site the reader should not leave for)." }, "style": { "type": "select", "label": "Style", "options": ["primary", "secondary", "ghost"], "description": "primary for the main action, secondary or ghost for the ones beside it." } } }, "description": "Buttons, in order; usually one." },
+    "id": { "type": "string", "content": false, "description": "Anchor id of the section; the heading gets `<id>-title`." }
   },
   "slots": {},
   "js": "none",

package/components/faq/Faq.astro

@@ -26,7 +26,7 @@ const faq = tv({
       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' },
+      plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-[length:var(--text-body,1rem)] [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' } },
   },

package/components/faq/meta.json

@@ -6,16 +6,16 @@
   "uses": [],
   "shared": ["Section.astro"],
   "variants": {
-    "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)." },
+    "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, questions at the body size (WordPress's details block)." },
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background." }
   },
   "props": {
-    "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "question": { "type": "string", "required": true }, "answer": { "type": "richtext", "required": true } } }, "description": "The questions in order (core/details summary + content, Elementor accordion/toggle tabs, Divi accordion/toggle items)." },
-    "heading": { "type": "string", "description": "Section heading." },
-    "exclusive": { "type": "boolean", "default": false, "description": "One answer open at a time (Elementor accordion, Divi accordion). Off for toggles." },
-    "openFirst": { "type": "boolean", "default": false, "description": "The first answer starts open (Divi open_toggle, Elementor active item 1)." },
-    "schema": { "type": "boolean", "default": false, "description": "Emit FAQPage JSON-LD built from these items. Use on at most one FAQ per page, and only when the page is really a FAQ." },
-    "id": { "type": "string", "description": "Section id; also the exclusive group's name." }
+    "items": { "type": "array", "label": "Questions", "required": true, "items": { "type": "object", "fields": { "question": { "type": "string", "label": "Question", "required": true, "description": "The question, as the visitor would ask it." }, "answer": { "type": "richtext", "label": "Answer", "required": true, "description": "The answer; links and lists allowed." } } }, "description": "The questions in order (core/details summary + content, Elementor accordion/toggle tabs, Divi accordion/toggle items)." },
+    "heading": { "type": "string", "label": "Heading", "description": "Section heading." },
+    "exclusive": { "type": "boolean", "default": false, "content": false, "description": "One answer open at a time (Elementor accordion, Divi accordion). Off for toggles." },
+    "openFirst": { "type": "boolean", "default": false, "content": false, "description": "The first answer starts open (Divi open_toggle, Elementor active item 1)." },
+    "schema": { "type": "boolean", "default": false, "content": false, "description": "Emit FAQPage JSON-LD built from these items. Use on at most one FAQ per page, and only when the page is really a FAQ." },
+    "id": { "type": "string", "content": false, "description": "Section id; also the exclusive group's name." }
   },
   "slots": {},
   "js": "none",

package/components/feature-list/FeatureList.astro

@@ -0,0 +1,85 @@
+---
+// A list of short features — a title and a line of text each — marked with
+// the feature's icon or a shared check, under an optional heading and intro.
+import { tv } from 'tailwind-variants'
+import Section, { type Tone } from '../_shared/Section.astro'
+
+const list = tv({
+  slots: {
+    grid: 'grid gap-x-8 gap-y-10 sm:grid-cols-2',
+    item: 'flex gap-4',
+    mark: 'flex size-6 shrink-0 items-center justify-center text-accent',
+    title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
+    text: 'mt-1 opacity-80',
+  },
+  variants: {
+    columns: {
+      '2': {},
+      '3': { grid: 'md:grid-cols-3' },
+      '4': { grid: 'lg:grid-cols-4' },
+    },
+    style: {
+      icon: { mark: 'size-10 rounded-[var(--radius-card)] bg-accent/10' },
+      check: {},
+    },
+    // On accent the mark takes the ink colour, and text is never dimmed.
+    tone: { default: {}, muted: {}, inverse: {}, accent: { mark: 'text-current', text: 'opacity-100' } },
+  },
+  defaultVariants: { columns: '3', style: 'icon', tone: 'default' },
+})
+
+// 24×24 stroke paths (Lucide-style); unknown names fall back to check.
+const icons: Record<string, string> = {
+  check: 'M20 6 9 17l-5-5',
+  star: 'm12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z',
+  bolt: 'M13 2 3 14h9l-1 8 10-12h-9z',
+  shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
+  heart: 'M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z',
+  globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20',
+  clock: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6v6l4 2',
+  chat: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
+}
+
+interface Item {
+  title: string
+  text?: string | undefined
+  /** A kit icon name (check, star, bolt, shield, heart, globe, clock, chat). */
+  icon?: string | undefined
+}
+
+interface Props {
+  heading?: string | undefined
+  intro?: string | undefined
+  items: Item[]
+  columns?: '2' | '3' | '4' | undefined
+  style?: 'icon' | 'check' | undefined
+  tone?: Tone | undefined
+  id?: string | undefined
+}
+
+const { heading, intro, items, columns, style = 'icon', tone, id } = Astro.props
+const s = list({ columns, style, tone })
+const headingId = heading && id ? `${id}-title` : undefined
+const pathOf = (item: Item) => (style === 'icon' && item.icon && icons[item.icon]) || icons.check
+---
+<Section tone={tone} id={id} aria-labelledby={headingId}>
+  {(heading || intro) && (
+    <header class="mb-10 flex max-w-2xl flex-col gap-3">
+      {heading && <h2 id={headingId} class="text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl">{heading}</h2>}
+      {intro && <p class:list={['text-lg', tone === 'accent' ? undefined : 'opacity-80']} data-kit-text>{intro}</p>}
+    </header>
+  )}
+  <ul class={s.grid()}>
+    {items.map(item => (
+      <li class={s.item()}>
+        <span class={s.mark()} aria-hidden="true">
+          <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d={pathOf(item)} /></svg>
+        </span>
+        <div>
+          <h3 class={s.title()}>{item.title}</h3>
+          {item.text && <p class={s.text()} data-kit-text>{item.text}</p>}
+        </div>
+      </li>
+    ))}
+  </ul>
+</Section>

package/components/feature-list/fixtures.json

@@ -0,0 +1,129 @@
+[
+  {
+    "name": "three-icon",
+    "props": {
+      "heading": "Why teams switch",
+      "intro": "Everything a small site needs, nothing it doesn't.",
+      "items": [
+        {
+          "title": "Fast by default",
+          "text": "Static pages served from the edge.",
+          "icon": "bolt"
+        },
+        {
+          "title": "Secure",
+          "text": "No database to break into.",
+          "icon": "shield"
+        },
+        {
+          "title": "Global",
+          "text": "Every language your readers speak.",
+          "icon": "globe"
+        },
+        {
+          "title": "Loved by editors",
+          "text": "Review changes before they go live.",
+          "icon": "heart"
+        },
+        {
+          "title": "Always on time",
+          "icon": "clock"
+        },
+        {
+          "title": "Real support",
+          "text": "Talk to the people who built it.",
+          "icon": "chat"
+        }
+      ]
+    }
+  },
+  {
+    "name": "two-check-muted",
+    "props": {
+      "heading": "Included",
+      "items": [
+        {
+          "title": "Fast by default",
+          "text": "Static pages served from the edge.",
+          "icon": "bolt"
+        },
+        {
+          "title": "Secure",
+          "text": "No database to break into.",
+          "icon": "shield"
+        },
+        {
+          "title": "Global",
+          "text": "Every language your readers speak.",
+          "icon": "globe"
+        },
+        {
+          "title": "Loved by editors",
+          "text": "Review changes before they go live.",
+          "icon": "heart"
+        }
+      ],
+      "columns": "2",
+      "style": "check",
+      "tone": "muted"
+    }
+  },
+  {
+    "name": "four-inverse",
+    "props": {
+      "items": [
+        {
+          "title": "Fast by default",
+          "text": "Static pages served from the edge.",
+          "icon": "bolt"
+        },
+        {
+          "title": "Secure",
+          "text": "No database to break into.",
+          "icon": "shield"
+        },
+        {
+          "title": "Global",
+          "text": "Every language your readers speak.",
+          "icon": "globe"
+        },
+        {
+          "title": "Loved by editors",
+          "text": "Review changes before they go live.",
+          "icon": "heart"
+        },
+        {
+          "title": "Unknown icon falls back",
+          "icon": "nope"
+        }
+      ],
+      "columns": "4",
+      "tone": "inverse"
+    }
+  },
+  {
+    "name": "accent-check",
+    "props": {
+      "heading": "What you get",
+      "items": [
+        {
+          "title": "Fast by default",
+          "text": "Static pages served from the edge.",
+          "icon": "bolt"
+        },
+        {
+          "title": "Secure",
+          "text": "No database to break into.",
+          "icon": "shield"
+        },
+        {
+          "title": "Global",
+          "text": "Every language your readers speak.",
+          "icon": "globe"
+        }
+      ],
+      "style": "check",
+      "tone": "accent"
+    }
+  }
+]

package/components/feature-list/meta.json

@@ -0,0 +1,118 @@
+{
+  "id": "feature-list",
+  "name": "Feature list",
+  "description": "A list of short features, each a title and a line of text marked with an icon or a check, under an optional heading and intro. Lighter than a card grid: no images, no links.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "Section.astro"
+  ],
+  "variants": {
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4"
+      ],
+      "default": "3",
+      "description": "Features per row on wide screens; one on phones, two on tablets."
+    },
+    "style": {
+      "options": [
+        "icon",
+        "check"
+      ],
+      "default": "icon",
+      "description": "icon: each feature's own icon in a tinted badge. check: the same check mark before every feature."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "default",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading."
+    },
+    "intro": {
+      "type": "text",
+      "label": "Introduction",
+      "description": "A sentence under the heading."
+    },
+    "items": {
+      "type": "array",
+      "label": "Features",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "title": {
+            "type": "string",
+            "label": "Title",
+            "required": true,
+            "description": "The feature, in a few words."
+          },
+          "text": {
+            "type": "text",
+            "label": "Text",
+            "description": "A sentence about it."
+          },
+          "icon": {
+            "type": "select",
+            "label": "Icon",
+            "options": [
+              "check",
+              "star",
+              "bolt",
+              "shield",
+              "heart",
+              "globe",
+              "clock",
+              "chat"
+            ],
+            "description": "The kit icon shown with the icon style; check when absent."
+          }
+        }
+      },
+      "description": "The features, in order (Elementor icon list or icon boxes without images, Gutenberg list of features, Divi blurbs with icons)."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/list"
+    ],
+    "elementor": [
+      "elementor/icon-list",
+      "elementor/icon-box"
+    ],
+    "divi": [
+      "divi/et_pb_blurb"
+    ]
+  },
+  "a11y": "A list; icons are decorative (aria-hidden), the title and text carry the meaning. The section is labelled by its heading.",
+  "pattern": {
+    "summary": "repeated icon + short title + line of text",
+    "signals": [
+      "3+ repeated items",
+      "icons",
+      "no images",
+      "short text"
+    ]
+  }
+}

package/components/footer/Footer.astro

@@ -21,8 +21,12 @@ const footer = tv({
       muted: { root: 'bg-surface-muted text-ink' },
       inverse: { root: 'bg-ink text-surface' },
     },
+    align: { start: {}, center: { inner: 'items-center justify-items-center text-center md:items-center [&_ul]:justify-center' } },
   },
-  defaultVariants: { layout: 'simple', tone: 'default' },
+  compoundVariants: [
+    { layout: 'simple', align: 'center', class: { inner: 'md:flex-col md:justify-center' } },
+  ],
+  defaultVariants: { layout: 'simple', tone: 'default', align: 'start' },
 })
 
 interface Props {
@@ -35,23 +39,27 @@ interface Props {
   social?: LinkInput[] | undefined
   /** The copyright line, e.g. "© 2026 Northwind Studio"; `{year}` is the current year. */
   copyright?: string | undefined
+  /** Label of the cookie settings link after the copyright line ("Cookie settings"); it reopens the consent bar, so a visitor can withdraw consent as easily as they gave it. Only with a consent bar on the page. */
+  consentLabel?: string | undefined
   /** Accessible name of the footer navigation ("Footer"). */
   navLabel?: string | undefined
   layout?: 'simple' | 'columns' | undefined
   tone?: 'default' | 'muted' | 'inverse' | undefined
+  align?: 'start' | 'center' | undefined
 }
 
-const { siteName, tagline, columns = [], links = [], social = [], copyright, navLabel = 'Footer', layout = 'simple', tone } = Astro.props
-const { root, inner, muted, link } = footer({ layout, tone })
+const { siteName, tagline, columns = [], links = [], social = [], copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align } = Astro.props
+const { root, inner, muted, link } = footer({ layout, tone, align })
 const year = String(new Date().getFullYear())
 const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
 ---
+<!-- The cookie settings control is a button, not a link: the Consent component's listener reopens its bar on any [data-kit-consent-open]. -->
 <footer class={root()}>
-  <div class={inner()} style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
+  <div class={inner()} data-kit-footer style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
     <div class="flex flex-col gap-3">
       <p class="text-base font-semibold" data-kit-brand>{siteName}</p>
       {tagline && <p class={muted()} data-kit-tagline>{tagline}</p>}
-      {layout === 'columns' && <p class:list={[muted(), 'mt-auto pt-6']}>{line}</p>}
+      {layout === 'columns' && <p class:list={[muted(), 'mt-auto pt-6']}>{line}{consentLabel && <> · <button type="button" data-kit-consent-open class={link()}>{consentLabel}</button></>}</p>}
     </div>
     {layout === 'columns'
       ? columns.map(column => (
@@ -63,7 +71,7 @@ const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
         </nav>
       ))
       : (
-        <div class="flex flex-col gap-4 md:items-end">
+        <div class:list={['flex flex-col gap-4', align === 'center' ? 'items-center' : 'md:items-end']}>
           {social.length > 0 && (
             <ul class="flex flex-wrap gap-4">
               {social.map(item => <li><a href={item.href} rel="me noopener" target="_blank" class={link()}>{item.label}</a></li>)}
@@ -76,7 +84,7 @@ const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
               </ul>
             </nav>
           )}
-          <p class={muted()}>{line}</p>
+          <p class={muted()}>{line}{consentLabel && <> · <button type="button" data-kit-consent-open class={link()}>{consentLabel}</button></>}</p>
         </div>
       )}
     {layout === 'columns' && social.length > 0 && (

package/components/footer/fixtures.json

@@ -1,5 +1,7 @@
 [
   { "name": "simple", "props": { "siteName": "Northwind Studio", "copyright": "© 2026 Northwind Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Privacy", "href": "/privacy/" }, { "label": "RSS feed", "href": "/rss.xml" }] } },
   { "name": "columns-inverse", "props": { "siteName": "Northwind Studio", "tagline": "Calm, fast websites for teams who write.", "layout": "columns", "tone": "inverse", "copyright": "© 2026 Northwind Studio", "columns": [{ "title": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Team", "href": "/about/team/" }] }, { "title": "Journal", "links": [{ "label": "Guides", "href": "/category/guides/" }, { "label": "News", "href": "/category/news/" }] }, { "title": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }], "social": [{ "label": "GitHub", "href": "https://github.com/contentrain" }, { "label": "Mastodon", "href": "https://mastodon.social/@contentrain" }] } },
-  { "name": "muted", "props": { "siteName": "Northwind", "tone": "muted", "copyright": "© 2026 Northwind", "links": [{ "label": "Imprint", "href": "/imprint/" }] } }
+  { "name": "muted", "props": { "siteName": "Northwind", "tone": "muted", "copyright": "© 2026 Northwind", "links": [{ "label": "Imprint", "href": "/imprint/" }] } },
+  { "name": "centered", "props": { "siteName": "Golden Agency", "tagline": "Websites for makers", "align": "center", "copyright": "© 2026 Golden Agency", "links": [{ "label": "Services", "href": "/services/" }, { "label": "Contact", "href": "/contact/" }], "social": [{ "label": "Instagram", "href": "https://instagram.com/" }] } },
+  { "name": "consent-settings", "props": { "siteName": "Golden Agency", "copyright": "© 2026 Golden Agency", "consentLabel": "Cookie settings", "links": [{ "label": "Privacy", "href": "/privacy/" }] } }
 ]

package/components/footer/meta.json

@@ -24,6 +24,14 @@
       ],
       "default": "default",
       "description": "Surface with a top border, muted surface, or dark (ink) background."
+    },
+    "align": {
+      "options": [
+        "start",
+        "center"
+      ],
+      "default": "start",
+      "description": "start: brand and links to the sides (left-aligned on phones). center: everything centred in one column, as themes with a centred footer print it."
     }
   },
   "props": {
@@ -95,6 +103,10 @@
       "type": "string",
       "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>."
     },
+    "consentLabel": {
+      "type": "string",
+      "description": "Label of the cookie settings button after the copyright line; it reopens the consent bar (withdrawal, GDPR 7(3)). Set only when the site has a consent bar."
+    },
     "navLabel": {
       "type": "string",
       "description": "Accessible name of the footer navigation (ui-strings nav.footer)."

package/components/gallery/Gallery.astro

@@ -5,10 +5,13 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
-import type { ImageInput } from '../_shared/types'
+import { imageOf, type ImageSource } from '../_shared/image'
+import { type ImageInput } from '../_shared/types'
 
 export interface GalleryItem {
-  image: ImageInput
+  /** The image's address (or, until 0.7, an `ImageInput`). */
+  image: ImageSource
+  imageAlt?: string | undefined
   caption?: string | undefined
 }
 
@@ -50,7 +53,8 @@ interface Props {
   id?: string | undefined
 }
 
-const { items, heading, layout, columns, open = 'popover', closeLabel = 'Close', tone, id = 'gallery' } = Astro.props
+const { items: given, heading, layout, columns, open = 'popover', closeLabel = 'Close', tone, id = 'gallery' } = Astro.props
+const items = given.flatMap(item => { const image = imageOf(item.image, item.imageAlt); return image ? [{ ...item, image }] : [] }) satisfies Array<{ image: ImageInput, caption?: string | undefined }>
 const s = gallery({ layout, columns, open })
 const headingId = heading ? `${id}-title` : undefined
 const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 25vw, 50vw' : '(min-width: 768px) 33vw, 50vw'