@contentrain/astro-kit 0.32.0 → 0.33.1

package/components/dialog/Dialog.astro

@@ -0,0 +1,113 @@
+---
+// A popup, as a dialog the visitor opens: a button in a section of the page and a modal <dialog> with a heading, text
+// and buttons. Replaces Elementor popups and Popup Maker overlays. Never opens by itself (no timers, no exit intent):
+// content that a source popup showed on load or on scroll is reachable from the button instead, and sits in the HTML
+// for crawlers. The section is the kit's (Section: tone, spacing, measured style), like every other section.
+//
+// Modal behaviour is the browser's (the APG dialog pattern as `showModal()` implements it): focus moves into the
+// dialog and is kept there, the page behind is inert, Escape closes it and focus returns to the button. The button
+// opens it with no script where Invoker Commands exist (`command`/`commandfor`); a small script covers browsers
+// without them and closes it on a click outside. With scripting off altogether, the dialog's content is laid out in
+// the section itself, under where the button was: nothing is hidden and nothing blocks the page.
+import { tv } from 'tailwind-variants'
+import Button from '../_shared/Button.astro'
+import Section from '../_shared/Section.astro'
+import type { ActionInput, MeasuredStyle } from '../_shared/types'
+import Prose from '../prose/Prose.astro'
+
+const dialog = tv({
+  slots: {
+    root: 'flex flex-wrap gap-6',
+    trigger: 'inline-flex cursor-pointer items-center justify-center gap-2 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',
+    // A dialog is not positioned by the page: UA styles centre it; width and surface come from here. Open but not
+    // modal (the `open` preview prop) it is a block in the flow under the button, not a box over it. The inner box
+    // scrolls, not the dialog: a click on the scrollbar then never lands on the dialog itself (the backdrop test). The
+    // display is set only when open (`open:flex`): an author `display` would override the UA's `display: none` when closed.
+    box: 'm-auto w-[min(92vw,var(--dialog-width))] max-h-[85dvh] flex-col open:flex rounded-card border border-line bg-surface p-0 text-ink shadow-xl backdrop:bg-ink/50 [&[open]:not(:modal)]:relative [&[open]:not(:modal)]:m-0 [&[open]:not(:modal)]:basis-full',
+    inner: 'flex min-h-0 flex-col gap-4 overflow-y-auto p-6 md:p-8',
+    heading: 'pe-10 text-xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-2xl',
+    actions: 'flex flex-wrap gap-3',
+    close: 'absolute end-3 top-3 inline-flex size-9 cursor-pointer items-center justify-center rounded-md hover:bg-surface-muted focus-visible:outline-2',
+  },
+  variants: {
+    triggerStyle: {
+      primary: { trigger: 'bg-accent text-accent-ink hover:bg-ink hover:text-surface' },
+      secondary: { trigger: 'bg-ink text-surface hover:bg-accent hover:text-accent-ink' },
+      ghost: { trigger: 'border border-current bg-transparent text-current hover:bg-ink/5' },
+      link: { trigger: 'bg-transparent p-0 text-[color:var(--color-link,var(--color-accent))] underline underline-offset-4' },
+    },
+    size: { sm: { box: '[--dialog-width:28rem]' }, md: { box: '[--dialog-width:40rem]' }, lg: { box: '[--dialog-width:56rem]' } },
+    // Where the button sits in the section.
+    align: { start: { root: 'justify-start' }, center: { root: 'justify-center' }, end: { root: 'justify-end' } },
+  },
+  defaultVariants: { triggerStyle: 'primary', size: 'md', align: 'start' },
+})
+
+interface Props {
+  /** Unique on the page; the button points at the dialog by it. */
+  id?: string | undefined
+  /** Text of the button that opens the dialog. */
+  triggerLabel: string
+  heading?: string | undefined
+  /** The dialog's text (rendered HTML). */
+  html?: string | undefined
+  actions?: ActionInput[] | undefined
+  /** Accessible name of the close button (ui-strings dialog.close). */
+  closeLabel?: string | undefined
+  triggerStyle?: 'primary' | 'secondary' | 'ghost' | 'link' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  align?: 'start' | 'center' | 'end' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image. Absent, the site's tokens; present, it wins over tone. */
+  measured?: MeasuredStyle | undefined
+  /** Rendered already open, in the flow of the section and not modal: for previews and visual baselines only, never for a page. */
+  open?: boolean | undefined
+}
+
+const { id: givenId = 'dialog', triggerLabel, heading, html, actions = [], closeLabel = 'Close', triggerStyle, size, align: given, tone, measured, open = false } = Astro.props
+// The id goes into attributes and into the scripting-off style sheet, so it is a plain token or the default.
+const id = /^[A-Za-z][\w-]*$/.test(givenId) ? givenId : 'dialog'
+const align = given ?? measured?.align
+// On the accent band the primary button (accent) would vanish: drawn as the secondary style there, as in Cta. The
+// dialog's own actions sit on the dialog's surface, not the band, so they keep their styles.
+const onAccent = tone === 'accent' && !measured?.bg?.image
+const s = dialog({ triggerStyle: onAccent && (triggerStyle ?? 'primary') === 'primary' ? 'secondary' : triggerStyle, size, align })
+const headingId = `${id}-title`
+// Invoker Commands attributes are not in Astro's button types.
+const invoker = { command: 'show-modal', commandfor: id }
+// Scripting off: the content takes the button's place in the section, as a plain block, and the close button goes
+// (it can only close an open dialog). Styles scoped by the dialog's id (a checked token, nothing from content); the selectors win over the UA sheet by specificity.
+const noscript = `<style>[data-kit-dialog="${id}"]>[data-kit-dialog-open],#${id} form[method=dialog]{display:none}#${id}:not([open]){display:block;position:static;margin:0;width:100%;max-width:none;max-height:none;box-shadow:none}</style>`
+---
+<Section measured={measured} tone={tone} spacing="md" id={`${id}-section`}>
+  <div class={s.root()} data-kit-dialog={id}>
+    <noscript set:html={noscript} />
+    <button type="button" class={s.trigger()} data-kit-dialog-open aria-haspopup="dialog" {...invoker}>{triggerLabel}</button>
+    <dialog id={id} class={s.box()} open={open || undefined} aria-labelledby={heading ? headingId : undefined} aria-label={heading ? undefined : triggerLabel}>
+      <div class={s.inner()}>
+        {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+        {html && <Prose html={html} searchable={false} />}
+        {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} />)}</div>}
+      </div>
+      <form method="dialog">
+        <button type="submit" class={s.close()} aria-label={closeLabel}>
+          <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
+        </button>
+      </form>
+    </dialog>
+  </div>
+</Section>
+
+<script>
+  // Browsers without Invoker Commands: the button opens the dialog here. Everywhere, a click on the backdrop closes it.
+  const invokers = 'commandForElement' in HTMLButtonElement.prototype
+  for (const root of document.querySelectorAll<HTMLElement>('[data-kit-dialog]')) {
+    const dialog = root.querySelector('dialog')
+    const open = root.querySelector<HTMLButtonElement>('[data-kit-dialog-open]')
+    if (!dialog || !open || root.dataset.ready !== undefined) continue
+    root.dataset.ready = ''
+    if (!invokers) open.addEventListener('click', () => { if (!dialog.open) dialog.showModal() })
+    // The inner box fills the dialog and owns the scrollbar, so a click whose target is the dialog itself landed on the backdrop.
+    dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close() })
+  }
+</script>

package/components/dialog/fixtures.json

@@ -0,0 +1,84 @@
+[
+  {
+    "name": "default",
+    "props": {
+      "id": "fx-dialog-a",
+      "triggerLabel": "Open the opening hours",
+      "heading": "Opening hours",
+      "html": "<p>We are open Monday to Friday, <strong>9:00 to 17:00</strong>.</p><p>On public holidays we are closed.</p>",
+      "actions": [
+        {
+          "label": "Contact us",
+          "href": "/contact/"
+        }
+      ],
+      "closeLabel": "Close"
+    }
+  },
+  {
+    "name": "link-large",
+    "props": {
+      "id": "fx-dialog-b",
+      "triggerLabel": "Read the terms",
+      "triggerStyle": "link",
+      "size": "lg",
+      "heading": "Terms of the offer",
+      "html": "<p>The offer runs while stocks last.</p><ul><li>One per customer</li><li>Not combinable</li></ul>",
+      "align": "end"
+    }
+  },
+  {
+    "name": "small-no-heading",
+    "props": {
+      "id": "fx-dialog-c",
+      "triggerLabel": "Subscribe",
+      "triggerStyle": "ghost",
+      "size": "sm",
+      "html": "<p>Thank you for your interest.</p>",
+      "tone": "inverse"
+    }
+  },
+  {
+    "name": "secondary",
+    "props": {
+      "id": "fx-dialog-d",
+      "triggerLabel": "Subscribe to updates",
+      "triggerStyle": "secondary",
+      "heading": "Stay in the loop",
+      "html": "<p>One email a month, never more.</p>",
+      "actions": [
+        {
+          "label": "Subscribe",
+          "href": "/newsletter/",
+          "style": "secondary"
+        }
+      ],
+      "align": "center",
+      "tone": "muted"
+    }
+  },
+  {
+    "name": "open-preview",
+    "frame": "tall",
+    "props": {
+      "id": "fx-dialog-e",
+      "triggerLabel": "Open the opening hours",
+      "heading": "Opening hours",
+      "html": "<p>We are open Monday to Friday, <strong>9:00 to 17:00</strong>.</p><p>On public holidays we are closed.</p>",
+      "actions": [
+        {
+          "label": "Contact us",
+          "href": "/contact/"
+        },
+        {
+          "label": "Call",
+          "href": "tel:+10000000000",
+          "style": "ghost"
+        }
+      ],
+      "closeLabel": "Close",
+      "open": true,
+      "tone": "accent"
+    }
+  }
+]

package/components/dialog/meta.json

@@ -0,0 +1,252 @@
+{
+  "id": "dialog",
+  "name": "Dialog",
+  "description": "A popup as a dialog the visitor opens: a button in a section of the page and a modal <dialog> with a heading, text and buttons. Never opens by itself. Focus is trapped inside and returns to the button, Escape closes it; the button opens it with no script where Invoker Commands exist, a small script covers other browsers and closes on a backdrop click, and with scripting off the content is laid out in the section itself.",
+  "category": "section",
+  "uses": [
+    "prose"
+  ],
+  "shared": [
+    "Button.astro",
+    "Section.astro",
+    "measured.ts",
+    "safe-url.ts",
+    "types.ts"
+  ],
+  "variants": {
+    "triggerStyle": {
+      "options": [
+        "primary",
+        "secondary",
+        "ghost",
+        "link"
+      ],
+      "default": "primary",
+      "description": "How the opening button looks: a filled or outlined button, or a text link."
+    },
+    "size": {
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md",
+      "description": "Width of the dialog: 28, 40 or 56 rem (never wider than the screen)."
+    },
+    "align": {
+      "options": [
+        "start",
+        "center",
+        "end"
+      ],
+      "default": "start",
+      "description": "Where the button sits in the section; the measured align when not set."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "default",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "triggerLabel": {
+      "type": "string",
+      "required": true,
+      "label": "Button text",
+      "description": "Text of the button that opens the dialog (the popup's trigger link or button)."
+    },
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "The dialog's title; it names the dialog for screen readers."
+    },
+    "html": {
+      "type": "richtext",
+      "label": "Text",
+      "description": "The popup's content as rendered HTML (the popup template's text)."
+    },
+    "actions": {
+      "type": "array",
+      "label": "Buttons",
+      "required": false,
+      "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": "The popup's own buttons, under its text, in order; none by default."
+    },
+    "id": {
+      "type": "string",
+      "default": "dialog",
+      "content": false,
+      "description": "Unique on the page: the button points at the dialog by it."
+    },
+    "closeLabel": {
+      "type": "string",
+      "default": "Close",
+      "content": false,
+      "description": "Accessible name of the close button (ui-strings dialog.close)."
+    },
+    "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."
+        }
+      }
+    },
+    "open": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "Rendered already open, in the flow of the section and not modal: for previews and visual baselines only, never for a page."
+    }
+  },
+  "slots": {},
+  "js": "vanilla",
+  "dependencies": {},
+  "sources": {
+    "elementor": [
+      "elementor/popup"
+    ],
+    "classic": [
+      "classic/popup-maker"
+    ]
+  },
+  "a11y": "A native modal <dialog> (the APG dialog pattern as the platform implements it): focus moves in and stays in, the page behind is inert, Escape closes and focus returns to the button. The heading names it (aria-labelledby; the button text when there is no heading). The close button is named by closeLabel. Nothing opens on load, on scroll or on exit intent; the text is in the HTML, so crawlers read it, and with scripting off it is shown in the section as a plain block, so nothing is hidden or blocks the page."
+}

package/components/embed/meta.json

@@ -4,7 +4,7 @@
   "description": "A video, map or player from another site (YouTube, Vimeo, Google Maps, OpenStreetMap, Spotify, SoundCloud, Calendly, Typeform, Google Forms, 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"],
+  "shared": ["KitImage.astro", "safe-url.ts", "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." }

package/components/faq/fixtures.json

@@ -115,5 +115,9 @@
         "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,7 +4,7 @@
   "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." },
@@ -31,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/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

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

@@ -11,6 +11,7 @@ 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`). */
@@ -104,7 +105,7 @@ const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 2
               {open === 'popover'
                 ? <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>

package/components/gallery/meta.json

@@ -9,6 +9,7 @@
     "Section.astro",
     "image.ts",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/header/Header.astro

@@ -6,6 +6,8 @@ import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
 import type { ActionInput, ImageInput, NavItem } from '../_shared/types'
 import Nav from '../nav/Nav.astro'
+import SearchBox from '../search-box/SearchBox.astro'
+import { safeHref } from '../_shared/safe-url'
 
 const header = tv({
   slots: {
@@ -54,28 +56,33 @@ interface Props {
   homeHref?: string | undefined
   items: NavItem[]
   action?: ActionInput | undefined
+  /** A search field in the bar (a GET form to the site's search page); below the bar until lg. */
+  search?: { label?: string | undefined, placeholder?: string | undefined, submitLabel?: string | undefined, action?: string | undefined } | undefined
   navLabel?: string | undefined
   menuLabel?: string | undefined
   closeLabel?: string | undefined
   layout?: 'split' | 'centered' | 'brand-left' | undefined
   tone?: 'default' | 'inverse' | 'transparent' | undefined
   position?: 'static' | 'sticky' | undefined
+  /** How submenus open on wide screens: a list under the item, or a wide panel of columns. */
+  menu?: 'flyout' | 'mega' | undefined
 }
 
-const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
+const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, logo, showName = true, homeHref = '/', items, action, search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position, bordered })
 const rootStyle = offsetTop ? `margin-top: ${offsetTop}` : undefined
 const innerStyle = [padTop && `padding-top: ${padTop}`, padBottom && `padding-bottom: ${padBottom}`].filter(Boolean).join('; ') || undefined
 const brandStyle = [brandSize && `font-size: ${brandSize}`, brandWeight && `font-weight: ${brandWeight}`, brandTracking && `letter-spacing: ${brandTracking}`].filter(Boolean).join('; ') || undefined
 // A tagline under the name keeps its line on a phone, as themes print it: the navigation wraps below.
-const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
+// The search field sits in the bar from lg; at md the bar already holds the navigation, so the field keeps its own row.
+const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-nowrap' : undefined
 ---
 <header class={root()} style={rootStyle}>
   <div class={inner({ class: wrap })} style={innerStyle}>
     {tagline
       ? (
         <div class="flex min-w-0 basis-full flex-col gap-1 md:basis-auto">
-          <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
+          <a href={safeHref(homeHref)} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
             {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
             {showName && <span>{siteName}</span>}
           </a>
@@ -83,13 +90,18 @@ const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
         </div>
       )
       : (
-        <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
+        <a href={safeHref(homeHref)} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
           {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
           {showName && <span>{siteName}</span>}
         </a>
       )}
+    {search && (
+      <div class="order-last basis-full lg:order-none lg:ms-auto lg:basis-auto">
+        <SearchBox action={search.action} label={search.label} placeholder={search.placeholder} submitLabel={search.submitLabel} size="sm" id="header-search" />
+      </div>
+    )}
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ms-auto']}>
-      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
+      <Nav items={items} menu={menu} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
     </div>
   </div>