@contentrain/astro-kit 0.31.0 → 0.33.0

package/components/faq/Faq.astro

@@ -5,6 +5,8 @@
 // and AI answers.
 import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
+import { measuredColumns } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 
 export interface FaqItem {
   question: string
@@ -14,14 +16,28 @@ export interface FaqItem {
 
 const faq = tv({
   slots: {
-    heading: 'mb-8 text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
+    root: '',
+    head: 'mb-8 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-2xl text-lg opacity-80',
     list: 'flex flex-col',
     item: 'group',
+    question: '',
     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',
+    marker: 'size-5 shrink-0 transition-transform duration-200 motion-reduce:transition-none',
     answer: 'prose-site prose max-w-none pb-5 text-current',
   },
   variants: {
+    // single: heading above, one column. split: the heading and intro stay in a left column (sticky) beside the list.
+    layout: {
+      single: {},
+      split: { root: 'grid gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-16', head: 'mb-0 lg:sticky lg:top-8 lg:self-start' },
+    },
+    // Two balanced columns of questions on wide screens.
+    columns: { '1': {}, '2': { list: 'lg:block lg:columns-2 lg:gap-x-12', item: 'break-inside-avoid' } },
+    // The marker in each question's row: a plus that turns into a cross, or a chevron that turns over.
+    icon: { plus: {}, chevron: { marker: 'group-open:rotate-180' } },
+    numbered: { true: { list: '[counter-reset:faq]', item: '[counter-increment:faq]', question: 'before:me-4 before:tabular-nums before:opacity-60 before:content-[counter(faq,decimal-leading-zero)]' }, false: {} },
     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' },
@@ -36,13 +52,23 @@ const faq = tv({
   },
   compoundVariants: [
     { style: 'cards', tone: 'muted', class: { item: 'border-transparent' } },
+    { icon: 'plus', class: { marker: 'group-open:rotate-45' } },
+    // A rule between items does not cross columns: each item carries its own, and the list's are dropped.
+    { columns: '2', style: 'lines', class: { list: 'lg:divide-y-0 lg:border-y-0', item: 'lg:border-b lg:border-line' } },
+    { columns: '2', style: 'cards', class: { item: 'lg:mb-3' } },
   ],
-  defaultVariants: { style: 'lines', tone: 'default', questionStyle: 'heading' },
+  defaultVariants: { layout: 'single', columns: '1', icon: 'plus', numbered: false, style: 'lines', tone: 'default', questionStyle: 'heading' },
 })
 
 interface Props {
   items: FaqItem[]
   heading?: string | undefined
+  intro?: string | undefined
+  layout?: 'single' | 'split' | undefined
+  columns?: '1' | '2' | undefined
+  icon?: 'plus' | 'chevron' | undefined
+  /** Count the questions with a leading number (drawn by CSS, not part of the text). */
+  numbered?: boolean | undefined
   style?: 'lines' | 'cards' | 'plain' | undefined
   /** How the questions read; `plain` sets its own and ignores this. */
   questionStyle?: 'heading' | 'bold' | undefined
@@ -53,11 +79,19 @@ interface Props {
   /** Add FAQPage structured data (JSON-LD). Once per page. */
   schema?: boolean | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { items, heading, style, questionStyle, exclusive = false, openFirst = false, schema = false, tone, id = 'faq' } = Astro.props
-const s = faq({ style, questionStyle: style === 'plain' ? 'heading' : questionStyle, tone })
+const { items, heading, intro, layout, columns, icon, numbered = false, style, questionStyle, exclusive = false, openFirst = false, schema = false, tone, measured, id = 'faq' } = Astro.props
+const s = faq({ layout, columns, icon, numbered, style, questionStyle: style === 'plain' ? 'heading' : questionStyle, tone })
+// Two columns and the split layout need the page's width; one column reads in the narrow one.
+const measuredCols = measuredColumns(measured)
+const wide = layout === 'split' || columns === '2' || measuredCols !== undefined
+// Measured columns win over `columns`. A rule between items does not cross columns, so each item carries its own.
+const listClass = measuredCols && (style === 'cards' || style === 'plain' ? measuredCols : `${measuredCols} divide-y-0 border-b-0`)
+const itemClass = measuredCols ? (style === 'cards' ? 'break-inside-avoid mb-3' : style === 'plain' ? 'break-inside-avoid' : 'break-inside-avoid border-b border-line') : undefined
 const headingId = heading ? `${id}-title` : undefined
 const plain = (html: string) => html.replace(/<[^>]*>/g, ' ').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim()
 const structured = schema && items.length > 0
@@ -69,18 +103,27 @@ const structured = schema && items.length > 0
   : null
 ---
 {items.length > 0 && (
-  <Section tone={tone} spacing="md" width="prose" id={id} aria-labelledby={headingId}>
-    {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
-    <div class={s.list()}>
-      {items.map((item, i) => (
-        <details class={s.item()} name={exclusive ? id : undefined} open={openFirst && i === 0}>
-          <summary class={s.summary()}>
-            <span>{item.question}</span>
-            <svg class={s.marker()} viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="M10 4v12M4 10h12" /></svg>
-          </summary>
-          <div class={s.answer()} set:html={item.answer} />
-        </details>
-      ))}
+  <Section measured={measured} tone={tone} spacing="md" width={wide ? 'page' : 'prose'} id={id} aria-labelledby={headingId}>
+    <div class={s.root()}>
+      {(heading || intro) && (
+        <header class={s.head()}>
+          {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+          {intro && <p class={s.intro()} data-kit-text>{intro}</p>}
+        </header>
+      )}
+      <div class={s.list({ class: listClass })}>
+        {items.map((item, i) => (
+          <details class={s.item({ class: itemClass })} name={exclusive ? id : undefined} open={openFirst && i === 0}>
+            <summary class={s.summary()}>
+              <span class={s.question()}>{item.question}</span>
+              {icon === 'chevron'
+                ? <svg class={s.marker()} viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 5 5 5-5" /></svg>
+                : <svg class={s.marker()} viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="M10 4v12M4 10h12" /></svg>}
+            </summary>
+            <div class={s.answer()} set:html={item.answer} />
+          </details>
+        ))}
+      </div>
     </div>
     {structured && <script type="application/ld+json" set:html={structured} />}
   </Section>

package/components/faq/fixtures.json

@@ -40,5 +40,84 @@
   {
     "name": "lines-bold",
     "props": { "heading": "Questions", "questionStyle": "bold", "id": "faq-bold", "items": [{ "question": "Do you ship printed guides abroad?", "answer": "<p>Yes, to every country in the EU and the UK.</p>" }, { "question": "Can I change my route later?", "answer": "<p>Any time before the trip starts.</p>" }] }
+  },
+  {
+    "name": "split-chevron",
+    "props": {
+      "layout": "split",
+      "icon": "chevron",
+      "heading": "Questions",
+      "intro": "Everything you need before you start.",
+      "id": "faq-split",
+      "items": [
+        { "question": "Do you accept guest essays?", "answer": "<p>Yes — we publish reader essays every season. Send a <a href=\"/pitch/\">short pitch</a> first.</p>" },
+        { "question": "Can I reuse your photographs?", "answer": "<p>Only with written permission. Most are licensed from the photographers, not owned by us.</p>" },
+        { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month, plus the seasonal issue.</p><ul><li>Guides: monthly</li><li>Essays: seasonal</li></ul>" }
+      ]
+    }
+  },
+  {
+    "name": "two-columns-numbered",
+    "props": {
+      "columns": "2",
+      "numbered": true,
+      "icon": "chevron",
+      "id": "faq-cols",
+      "items": [
+        { "question": "Do you accept guest essays?", "answer": "<p>Yes — we publish reader essays every season. Send a <a href=\"/pitch/\">short pitch</a> first.</p>" },
+        { "question": "Can I reuse your photographs?", "answer": "<p>Only with written permission. Most are licensed from the photographers, not owned by us.</p>" },
+        { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month, plus the seasonal issue.</p><ul><li>Guides: monthly</li><li>Essays: seasonal</li></ul>" },
+        { "question": "Do you accept guest essays?", "answer": "<p>Yes — we publish reader essays every season. Send a <a href=\"/pitch/\">short pitch</a> first.</p>" },
+        { "question": "Can I reuse your photographs?", "answer": "<p>Only with written permission. Most are licensed from the photographers, not owned by us.</p>" },
+        { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month, plus the seasonal issue.</p><ul><li>Guides: monthly</li><li>Essays: seasonal</li></ul>" }
+      ],
+      "heading": "Common questions"
+    }
+  },
+  {
+    "name": "split-two-cards-plus",
+    "props": {
+      "layout": "split",
+      "columns": "2",
+      "style": "cards",
+      "icon": "plus",
+      "id": "faq-split-cols",
+      "heading": "Help",
+      "intro": "Short answers.",
+      "items": [
+        { "question": "Do you accept guest essays?", "answer": "<p>Yes — we publish reader essays every season. Send a <a href=\"/pitch/\">short pitch</a> first.</p>" },
+        { "question": "Can I reuse your photographs?", "answer": "<p>Only with written permission. Most are licensed from the photographers, not owned by us.</p>" },
+        { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month, plus the seasonal issue.</p><ul><li>Guides: monthly</li><li>Essays: seasonal</li></ul>" },
+        { "question": "Do you accept guest essays?", "answer": "<p>Yes — we publish reader essays every season. Send a <a href=\"/pitch/\">short pitch</a> first.</p>" },
+        { "question": "Can I reuse your photographs?", "answer": "<p>Only with written permission. Most are licensed from the photographers, not owned by us.</p>" },
+        { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month, plus the seasonal issue.</p><ul><li>Guides: monthly</li><li>Essays: seasonal</li></ul>" }
+      ]
+    }
+  },
+  {
+    "name": "measured-frame",
+    "props": {
+      "heading": "Frequently asked questions",
+      "exclusive": true,
+      "openFirst": true,
+      "schema": true,
+      "items": [
+        { "question": "Do you accept guest essays?", "answer": "<p>Yes — we publish reader essays every season. Send a <a href=\"/pitch/\">short pitch</a> first.</p>" },
+        { "question": "Can I reuse your photographs?", "answer": "<p>Only with written permission. Most are licensed from the photographers, not owned by us.</p>" },
+        { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month, plus the seasonal issue.</p><ul><li>Guides: monthly</li><li>Essays: seasonal</li></ul>" }
+      ],
+      "measured": {
+        "containerPx": 720,
+        "padY": 64,
+        "bg": {
+          "color": "#111827"
+        },
+        "tone": "dark"
+      }
+    }
+  },
+  {
+    "name": "six-measured-columns",
+    "props": { "heading": "Six questions", "id": "six", "style": "lines", "items": [{ "question": "Question 1?", "answer": "<p>Answer 1, in a sentence or two.</p>" }, { "question": "Question 2?", "answer": "<p>Answer 2, in a sentence or two.</p>" }, { "question": "Question 3?", "answer": "<p>Answer 3, in a sentence or two.</p>" }, { "question": "Question 4?", "answer": "<p>Answer 4, in a sentence or two.</p>" }, { "question": "Question 5?", "answer": "<p>Answer 5, in a sentence or two.</p>" }, { "question": "Question 6?", "answer": "<p>Answer 6, in a sentence or two.</p>" }], "measured": { "columns": { "390": 1, "768": 2, "1280": 3 }, "gap": 32, "padY": 48 } }
   }
 ]

package/components/faq/meta.json

@@ -4,8 +4,11 @@
   "description": "Questions and answers as native <details> disclosures (no script), in lines or cards; optionally one open at a time, and optionally with FAQPage structured data for search engines and AI answers.",
   "category": "section",
   "uses": [],
-  "shared": ["Section.astro", "measured.ts", "types.ts"],
+  "shared": ["Section.astro", "measured.ts", "safe-url.ts", "types.ts"],
   "variants": {
+    "layout": { "options": ["single", "split"], "default": "single", "description": "single: the heading above one column. split: the heading and introduction stay in a left column beside the list; stacks on a phone." },
+    "columns": { "options": ["1", "2"], "default": "1", "description": "Columns of questions on wide screens." },
+    "icon": { "options": ["plus", "chevron"], "default": "plus", "description": "The marker in each question's row: a plus that turns into a cross, or a chevron that turns over." },
     "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." },
     "questionStyle": { "options": ["heading", "bold"], "default": "heading", "description": "How the questions read. heading: a small heading (lg, heading weight). bold: body size in bold, as accordion and toggle titles often are. The plain style sets its own and ignores this." }
@@ -13,10 +16,13 @@
   "props": {
     "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." },
+    "intro": { "type": "text", "label": "Introduction", "description": "A sentence under the 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." }
+    "measured": { "type": "object", "content": false, "description": "The source section's measured style (MeasuredStyle): frame width, padding, fill, image, columns per width, gap, text tone, radius, minimum height — all in pixels. Absent, the site's tokens; present, it wins over tone and columns. Values that are not a number, a colour or a known keyword are dropped.", "fields": { "containerPx": { "type": "integer", "min": 0, "max": 2560, "description": "The frame's content width." }, "padY": { "type": "integer", "min": 0, "max": 400, "description": "Top and bottom padding." }, "padX": { "type": "integer", "min": 0, "max": 200, "description": "The frame's side padding (gutter)." }, "bg": { "type": "object", "description": "The section's background.", "fields": { "color": { "type": "string", "description": "Fill colour: hex, rgb(a) or hsl(a)." }, "image": { "type": "string", "description": "Background image address (http(s) or root-relative), drawn behind the content." }, "overlay": { "type": "string", "description": "Colour or linear/radial gradient laid over the image or the fill." }, "size": { "type": "string", "description": "cover, contain or auto; anything else draws as cover." }, "position": { "type": "string", "description": "One or two of center/top/bottom/left/right or percentages." } } }, "columns": { "type": "object", "description": "Item columns at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one.", "fields": { "390": { "type": "integer", "min": 1, "max": 6, "description": "Phone." }, "768": { "type": "integer", "min": 1, "max": 6, "description": "Tablet." }, "1280": { "type": "integer", "min": 1, "max": 6, "description": "Desktop." } } }, "gap": { "type": "integer", "min": 0, "max": 200, "description": "Gap between items." }, "tone": { "type": "select", "options": ["light", "dark"], "description": "What the text is set for: dark = light text on a dark band. Without it, a fill's own lightness decides." }, "align": { "type": "select", "options": ["start", "center", "end"], "description": "Where the heading and lead sit; read by a component whose own align is not set." }, "radius": { "type": "integer", "min": 0, "max": 200, "description": "Card and item corner radius." }, "minHeight": { "type": "integer", "min": 0, "max": 2000, "description": "The section's minimum height." } } },
+    "id": { "type": "string", "content": false, "description": "Section id; also the exclusive group's name." },
+    "numbered": { "type": "boolean", "default": false, "content": false, "description": "Count the questions with a leading number, drawn by the page's style rather than written into the text." }
   },
   "slots": {},
   "js": "none",
@@ -25,7 +31,7 @@
     "gutenberg": ["core/details"],
     "elementor": ["elementor/accordion", "elementor/toggle", "elementor/nested-accordion"],
     "divi": ["divi/et_pb_accordion", "divi/et_pb_toggle"],
-    "classic": ["classic/faq"]
+    "classic": ["classic/faq", "classic/details"]
   },
   "a11y": "Native <details>/<summary>: keyboard operable and announced as expandable by every screen reader, with no script to fail. The plus icon is decorative. The JSON-LD answer text is the answer with its markup removed."
 }

package/components/feature-list/FeatureList.astro

@@ -28,8 +28,10 @@ const list = tv({
     },
     // On accent the mark takes the ink colour, and text is never dimmed.
     tone: { default: {}, muted: {}, inverse: {}, accent: { mark: 'text-current', text: 'opacity-100' } },
+    // A list inside another section's column: one column, tighter, no section around it.
+    bare: { true: { grid: 'sm:grid-cols-1 gap-y-5' }, false: {} },
   },
-  defaultVariants: { columns: '3', style: 'icon', tone: 'default' },
+  defaultVariants: { columns: '3', style: 'icon', tone: 'default', bare: false },
 })
 
 // 24×24 stroke paths (Lucide-style); unknown names fall back to check.
@@ -59,18 +61,39 @@ interface Props {
   columns?: '2' | '3' | '4' | undefined
   style?: 'icon' | 'check' | 'list' | undefined
   tone?: Tone | undefined
+  /** Only the list, with no section of its own, for use inside another section's column. */
+  bare?: boolean | undefined
+  /** The level of the item titles when `bare` (the section's heading level plus one). */
+  titleLevel?: 3 | 4 | 5 | undefined
   id?: string | undefined
   /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
   measured?: MeasuredStyle | undefined
 }
 
-const { heading, intro, items, columns, style = 'icon', tone, id, measured } = Astro.props
-const s = list({ columns, style, tone })
+const { heading, intro, items, columns, style = 'icon', tone, bare = false, titleLevel = 3, id, measured } = Astro.props
+const s = list({ columns, style, tone, bare })
 const headingId = heading && id ? `${id}-title` : undefined
 const pathOf = (item: Item) => (style !== 'check' && item.icon && icons[item.icon]) || icons.check
 // A plain list's items are not headings; otherwise one level under the section heading, or the section's when there is none.
-const Title = style === 'list' ? 'span' : heading ? 'h3' : 'h2'
+const Title = style === 'list' ? 'span' : bare ? `h${titleLevel}` as 'h3' : heading ? 'h3' : 'h2'
 ---
+{bare
+  ? (
+    <ul class={s.grid({ class: measuredGrid(measured) })}>
+      {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>
+            <Title class={s.title()}>{item.title}</Title>
+            {item.text && <p class={s.text()} data-kit-text>{item.text}</p>}
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+  : (
 <Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {(heading || intro) && (
     <header class="mb-10 flex max-w-2xl flex-col gap-3">
@@ -92,3 +115,4 @@ const Title = style === 'list' ? 'span' : heading ? 'h3' : 'h2'
     ))}
   </ul>
 </Section>
+  )}

package/components/feature-list/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {
@@ -87,10 +88,17 @@
       },
       "description": "The features, in order (Elementor icon list or icon boxes without images, Gutenberg list of features, Divi blurbs with icons)."
     },
-    "id": {
-      "type": "string",
+    "bare": {
+      "type": "boolean",
+      "default": false,
       "content": false,
-      "description": "Anchor id of the section; the heading gets `<id>-title`."
+      "description": "Only the list, with no section of its own; a split section uses it under its text."
+    },
+    "titleLevel": {
+      "type": "integer",
+      "default": 3,
+      "content": false,
+      "description": "With `bare`: the item titles' heading level (the section's plus one)."
     },
     "measured": {
       "type": "object",
@@ -201,6 +209,11 @@
           "description": "The section's minimum height."
         }
       }
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
     }
   },
   "slots": {},

package/components/footer/Footer.astro

@@ -4,6 +4,7 @@
 import { tv } from 'tailwind-variants'
 import type { LinkInput } from '../_shared/types'
 import { footerLinkSizeClasses, footerVars } from './footer'
+import { safeHref } from '../_shared/safe-url'
 
 const footer = tv({
   slots: {
@@ -107,7 +108,7 @@ const hasBottom = Boolean(line || consentLabel)
         <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>)}
+            {column.links.map(item => <li><a href={safeHref(item.href)} class={link()}>{item.label}</a></li>)}
           </ul>
         </nav>
       ))
@@ -115,13 +116,13 @@ const hasBottom = Boolean(line || consentLabel)
         <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>)}
+              {social.map(item => <li><a href={safeHref(item.href)} rel="me noopener" target="_blank" class={link()}>{item.label}</a></li>)}
             </ul>
           )}
           {links.length > 0 && (
             <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>)}
+                {links.map(item => <li><a href={safeHref(item.href)} class={link()}>{item.label}</a></li>)}
               </ul>
             </nav>
           )}
@@ -130,7 +131,7 @@ const hasBottom = Boolean(line || consentLabel)
       )}
     {layout === 'columns' && social.length > 0 && (
       <ul class="flex flex-wrap gap-4 md:col-span-full">
-        {social.map(item => <li><a href={item.href} rel="me noopener" target="_blank" class={link()}>{item.label}</a></li>)}
+        {social.map(item => <li><a href={safeHref(item.href)} rel="me noopener" target="_blank" class={link()}>{item.label}</a></li>)}
       </ul>
     )}
   </div>

package/components/footer/meta.json

@@ -5,6 +5,7 @@
   "category": "chrome",
   "uses": [],
   "shared": [
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/gallery/Gallery.astro

@@ -2,17 +2,24 @@
 // Images in a grid or in columns, with optional captions. Opening an image
 // shows it large in a native popover — no script: `popovertarget` opens it,
 // Escape and a click outside close it. `link` opens the image file instead.
+// Layouts: grid, masonry, a scroll-snap `row`, and a `mosaic` whose first image
+// spans 2×2. The popover shows one image; next/previous would need script.
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { type ImageInput } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
 
 export interface GalleryItem {
   /** The image's address (or, until 0.7, an `ImageInput`). */
   image: ImageSource
   imageAlt?: string | undefined
   caption?: string | undefined
+  /** The full-size file for the viewer, where the source's node points at the original; otherwise the image itself. */
+  full?: ImageSource | undefined
 }
 
 const gallery = tv({
@@ -20,7 +27,7 @@ const gallery = tv({
     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-[var(--radius-image,var(--radius-card))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    frame: 'group relative 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',
@@ -29,56 +36,83 @@ const gallery = tv({
     layout: {
       grid: { list: 'grid', frame: 'aspect-square' },
       masonry: { list: 'columns-2 [&>*]:mb-3 md:[&>*]:mb-4', item: 'break-inside-avoid' },
+      // A strip scrolled sideways, each tile snapping into place; it is a keyboard-focusable region (see the markup).
+      row: { list: 'flex snap-x snap-mandatory overflow-x-auto pb-2 [scrollbar-width:thin]', item: 'w-64 shrink-0 snap-start md:w-80', frame: 'aspect-[4/3]' },
+      // The first tile takes 2×2 of the grid; the rest fill around it.
+      mosaic: { list: 'grid grid-flow-dense', item: '[&:first-child]:col-span-2 [&:first-child]:row-span-2' },
     },
-    columns: { '2': { list: 'grid-cols-2' }, '3': { list: 'grid-cols-2 md:grid-cols-3' }, '4': { list: 'grid-cols-2 md:grid-cols-4' } },
+    aspect: { square: { frame: 'aspect-square' }, '4:3': { frame: 'aspect-[4/3]' }, '16:9': { frame: 'aspect-video' }, auto: { frame: 'aspect-auto' } },
+    gap: { sm: { list: 'gap-1.5 md:gap-2' }, md: {}, lg: { list: 'gap-5 md:gap-8' } },
+    // Under the image, or laid over its foot on hover and keyboard focus — always visible below `md`.
+    captionStyle: { below: {}, overlay: { caption: 'absolute inset-x-0 bottom-0 m-0 bg-ink/70 p-2 text-surface md:translate-y-full md:transition-transform md:group-focus-within:translate-y-0 md:group-hover:translate-y-0' } },
+    hoverEffect: { none: {}, zoom: { thumb: 'motion-safe:group-hover:scale-105' } },
+    columns: { '2': { list: 'grid-cols-2' }, '3': { list: 'grid-cols-2 md:grid-cols-3' }, '4': { list: 'grid-cols-2 md:grid-cols-4' }, '5': { list: 'grid-cols-2 md:grid-cols-5' }, '6': { list: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6' } },
     open: { popover: {}, link: {}, none: { frame: 'cursor-default' } },
   },
   compoundVariants: [
     { layout: 'masonry', columns: '3', class: { list: 'md:columns-3' } },
     { layout: 'masonry', columns: '4', class: { list: 'md:columns-4' } },
+    { layout: 'masonry', columns: '5', class: { list: 'md:columns-5' } },
+    { layout: 'masonry', columns: '6', class: { list: 'md:columns-3 lg:columns-6' } },
+    // A row and a mosaic size by their own tiles, not by `columns`.
+    { layout: 'row', class: { list: 'grid-cols-none md:grid-cols-none' } },
+    { layout: 'masonry', aspect: ['square', '4:3', '16:9'], class: { frame: 'aspect-auto' } },
   ],
-  defaultVariants: { layout: 'grid', columns: '3', open: 'popover' },
+  defaultVariants: { layout: 'grid', columns: '3', open: 'popover', aspect: 'square', gap: 'md', captionStyle: 'below', hoverEffect: 'none' },
 })
 
 interface Props {
   items: GalleryItem[]
   heading?: string | undefined
-  layout?: 'grid' | 'masonry' | undefined
-  columns?: '2' | '3' | '4' | undefined
+  layout?: 'grid' | 'masonry' | 'row' | 'mosaic' | undefined
+  columns?: '2' | '3' | '4' | '5' | '6' | undefined
+  /** Tile shape (a masonry keeps each image's own). */
+  aspect?: 'square' | '4:3' | '16:9' | 'auto' | undefined
+  gap?: 'sm' | 'md' | 'lg' | undefined
+  captionStyle?: 'below' | 'overlay' | undefined
+  hoverEffect?: 'none' | 'zoom' | undefined
+  /** Prefix of the enlarge button's name for readers ("Enlarge"). */
+  /** Name of the scrolling row's region when there is no heading ("Images"). */
+  regionLabel?: string | undefined
+  enlargeLabel?: string | undefined
   /** What a click on an image does: show it large in place, open the file, or nothing. */
   open?: 'popover' | 'link' | 'none' | undefined
   /** Text of the viewer's close button ("Close"). */
   closeLabel?: string | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-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 { items: given, heading, layout, columns, aspect, gap, captionStyle, hoverEffect, enlargeLabel = 'Enlarge', regionLabel = 'Images', open = 'popover', closeLabel = 'Close', tone, measured, id = 'gallery' } = Astro.props
+const items = given.flatMap(item => { const image = imageOf(item.image, item.imageAlt); return image ? [{ ...item, image, full: imageOf(item.full, item.imageAlt) }] : [] }) satisfies Array<{ image: ImageInput, caption?: string | undefined }>
+const s = gallery({ layout, columns, open, aspect, gap, captionStyle, hoverEffect })
 const headingId = heading ? `${id}-title` : undefined
 const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 25vw, 50vw' : '(min-width: 768px) 33vw, 50vw'
 ---
 {items.length > 0 && (
-  <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+  <Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
     {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
-    <ul class={s.list()} role="list">
+    {/* A scrolling strip is a labelled, focusable region so the keyboard can scroll it. */}
+    <div tabindex={layout === 'row' ? 0 : undefined} role={layout === 'row' ? 'region' : undefined} aria-label={layout === 'row' ? heading ?? regionLabel : undefined}>
+    <ul class={s.list({ class: layout === 'grid' || layout === 'mosaic' ? measuredGrid(measured) : undefined })} role="list">
       {items.map((item, i) => {
         const viewer = `${id}-image-${i + 1}`
         return (
           <li class={s.item()}>
-            <figure class="m-0">
+            <figure class={captionStyle === 'overlay' ? 'group relative m-0 overflow-hidden' : 'm-0'}>
               {open === 'popover'
-                ? <button type="button" popovertarget={viewer} class={s.frame()} aria-label={item.image.alt || item.caption || undefined}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></button>
+                ? <button type="button" popovertarget={viewer} class={s.frame()} aria-label={`${enlargeLabel}: ${item.image.alt || item.caption || ''}`.trim()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></button>
                 : open === 'link'
-                  ? <a href={item.image.src} class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></a>
+                  ? <a href={safeHref(item.image.src)} class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></a>
                   : <div class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></div>}
               {item.caption && <figcaption class={s.caption({ class: tone === 'accent' ? 'opacity-100' : undefined })}>{item.caption}</figcaption>}
             </figure>
             {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-[var(--radius-image,var(--radius-card))] object-contain" />
+                  <KitImage image={item.full ?? 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>
@@ -88,5 +122,6 @@ const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 2
         )
       })}
     </ul>
+    </div>
   </Section>
 )}