@contentrain/astro-kit 0.31.0 → 0.33.0

package/components/cta/Cta.astro

@@ -3,13 +3,21 @@
 // across the full section, or as a card inside it.
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
+import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
-import type { ActionInput } from '../_shared/types'
+import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 
 const cta = tv({
   slots: {
     box: 'flex flex-col gap-6',
     copy: 'flex flex-col gap-3',
+    eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
+    // The text and buttons when a picture stands beside them.
+    text: 'flex min-w-0 flex-1 flex-col gap-6',
+    // The buttons with the small print under them.
+    cta: 'flex flex-col gap-2 md:shrink-0',
+    note: 'text-sm opacity-75',
+    media: 'w-full max-w-sm shrink-0 overflow-hidden rounded-[var(--radius-image,var(--radius-card))] md:w-2/5',
     heading: 'text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
     body: 'max-w-2xl text-pretty opacity-85',
     actions: 'flex flex-wrap gap-3',
@@ -21,13 +29,19 @@ const cta = tv({
       // Heading, text and buttons in one column at the start edge, on every width.
       stacked: { box: 'items-start text-start' },
     },
+    // The heading's scale; `lg` also gives the band more room.
+    size: { md: {}, lg: { heading: 'text-3xl md:text-5xl' } },
+    // The text block's alignment (`centered` already sets its own).
+    align: { start: {}, center: { copy: 'items-center text-center', body: 'mx-auto' } },
+    // With a picture: which side it takes on wide screens (text first in the source).
+    mediaSide: { end: {}, start: { media: 'md:order-first' } },
     frame: {
       full: {},
       card: { box: 'rounded-card border border-line p-8 md:p-12' },
     },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
     // none: no fill of its own — the page background and text colour show through.
-    tone: { default: {}, muted: {}, inverse: {}, accent: { body: 'opacity-100' }, brand: { body: 'opacity-100' }, none: {} },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { body: 'opacity-100', eyebrow: 'opacity-100', note: 'opacity-100' }, brand: { body: 'opacity-100', eyebrow: 'opacity-100', note: 'opacity-100' }, none: {} },
     // The buttons' own alignment: `start` keeps them at the start edge under centred text (a WordPress buttons block
     // with no justification sits left in a group whose heading and paragraph are centred). The row is the text's
     // column, as WordPress's content width is, not the whole section. Only centred needs it: inline and stacked
@@ -42,35 +56,61 @@ const cta = tv({
     { frame: 'card', tone: 'accent', class: { box: 'border-transparent bg-accent text-accent-ink' } },
     { frame: 'card', tone: 'brand', class: { box: 'border-transparent bg-brand text-brand-ink' } },
     { layout: 'centered', actionsAlign: 'start', class: { actions: 'w-full max-w-2xl justify-start' } },
+    { layout: 'centered', class: { cta: 'items-center' } },
   ],
-  defaultVariants: { layout: 'inline', frame: 'full', tone: 'accent', actionsAlign: 'inherit' },
+  defaultVariants: { layout: 'inline', frame: 'full', size: 'md', align: 'start', mediaSide: 'end', tone: 'accent', actionsAlign: 'inherit' },
 })
 
 interface Props {
   heading: string
+  eyebrow?: string | undefined
   body?: string | undefined
+  /** The small print under the buttons ("No credit card required"). */
+  note?: string | undefined
+  /** A small picture beside the text. A large one is a `split`. */
+  image?: ImageInput | undefined
   actions: ActionInput[]
   layout?: 'inline' | 'centered' | 'stacked' | undefined
   frame?: 'full' | 'card' | undefined
+  size?: 'md' | 'lg' | undefined
+  align?: 'start' | 'center' | undefined
+  mediaSide?: 'start' | 'end' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | 'brand' | 'none' | undefined
   /** The buttons' alignment: as the layout sets it, or at the start edge under centred text (layout centered). */
   actionsAlign?: 'inherit' | 'start' | undefined
+  /** A picture behind the band (its address); the text turns light and an overlay keeps it readable. For `frame` full. */
+  bgImage?: string | undefined
+  /** The colour laid over `bgImage` (default: black at 55 %). */
+  bgOverlay?: 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
   id?: string | undefined
 }
 
-const { heading, body, actions, layout, frame, tone = 'accent', actionsAlign, id } = Astro.props
-const s = cta({ layout, frame, tone, actionsAlign })
+const { heading, eyebrow, body, note, image, actions, layout, frame, size, align, mediaSide, tone = 'accent', actionsAlign, bgImage, bgOverlay, measured: given, id } = Astro.props
+const s = cta({ layout, frame, size, align, mediaSide, tone, actionsAlign })
+// A background picture is the section's measured background: Section draws the image and its overlay, and the text
+// turns light so it reads on either.
+const measured: MeasuredStyle | undefined = bgImage
+  ? { ...given, tone: 'dark', bg: { ...given?.bg, image: bgImage, overlay: bgOverlay ?? given?.bg?.overlay ?? 'rgba(0, 0, 0, 0.55)' } }
+  : given
 const headingId = id ? `${id}-title` : undefined
 // On the accent background the primary button (accent) would vanish: it is drawn as the secondary style there.
 const onAccent = (action: ActionInput): ActionInput => ({ label: action.label, href: action.href, newTab: action.newTab, style: 'secondary' })
-const shown = actions.map(action => (tone === 'accent' && (action.style ?? 'primary') === 'primary' ? onAccent(action) : action))
+const shown = actions.map(action => (tone === 'accent' && !bgImage && (action.style ?? 'primary') === 'primary' ? onAccent(action) : action))
 ---
-<Section tone={frame === 'card' ? 'default' : tone} spacing="md" id={id} aria-labelledby={headingId}>
-  <div class={s.box()}>
-    <div class={s.copy()}>
-      <h2 id={headingId} class={s.heading()}>{heading}</h2>
-      {body && <p class={s.body()} data-kit-text>{body}</p>}
+<Section measured={measured} tone={frame === 'card' ? 'default' : tone} spacing={size === 'lg' ? 'lg' : 'md'} id={id} aria-labelledby={headingId}>
+  <div class:list={[s.box(), image && 'md:flex-row md:items-center md:justify-between md:gap-12']}>
+    <div class={image ? s.text() : 'contents'}>
+      <div class={s.copy()}>
+        {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
+        <h2 id={headingId} class={s.heading()}>{heading}</h2>
+        {body && <p class={s.body()} data-kit-text>{body}</p>}
+      </div>
+      {note
+        ? <div class={s.cta()}>{shown.length > 0 && <div class={s.actions()}>{shown.map(action => <Button action={action} size="lg" />)}</div>}<p class={s.note()} data-kit-text>{note}</p></div>
+        : shown.length > 0 && <div class={s.actions()}>{shown.map(action => <Button action={action} size="lg" />)}</div>}
     </div>
-    {shown.length > 0 && <div class={s.actions()}>{shown.map(action => <Button action={action} size="lg" />)}</div>}
+    {image && <div class={s.media()}><KitImage image={image} sizes="(min-width: 768px) 30vw, 100vw" class="h-auto w-full object-cover" /></div>}
   </div>
 </Section>

package/components/cta/fixtures.json

@@ -5,5 +5,9 @@
   { "name": "card-muted", "props": { "heading": "Support independent travel writing", "frame": "card", "tone": "muted", "layout": "centered", "actions": [{ "label": "Become a member", "href": "/members/" }] } },
   { "name": "stacked-none", "props": { "heading": "Ready when you are", "body": "Tell us where you want to go and we will send a first plan within a week.", "layout": "stacked", "tone": "none", "actions": [{ "label": "Start planning", "href": "/contact/" }] } },
   { "name": "centered-actions-start", "props": { "heading": "See what is on this week", "body": "New films every Thursday, and a late show on Saturdays.", "layout": "centered", "tone": "inverse", "actionsAlign": "start", "actions": [{ "label": "Programme", "href": "/programme/" }] } },
-  { "name": "centered-brand", "props": { "heading": "Ready when you are", "body": "Two launch slots left this quarter.", "layout": "centered", "tone": "brand", "actions": [{ "label": "Book a launch call", "href": "/contact/" }] } }
+  { "name": "centered-brand", "props": { "heading": "Ready when you are", "body": "Two launch slots left this quarter.", "layout": "centered", "tone": "brand", "actions": [{ "label": "Book a launch call", "href": "/contact/" }] } },
+  { "name": "eyebrow-note-lg", "props": { "eyebrow": "Free trial", "heading": "Start building today", "body": "Ship a first page in an afternoon.", "note": "No credit card required", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "size": "lg", "tone": "muted", "align": "center" } },
+  { "name": "media-end", "props": { "heading": "See it in action", "body": "A short tour of the editor.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "The editor", "width": 640, "height": 480 }, "tone": "default", "frame": "card" } },
+  { "name": "media-start-centered", "props": { "heading": "Join the newsletter", "body": "One email a month.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "", "width": 640, "height": 480 }, "mediaSide": "start", "layout": "centered", "tone": "inverse" } },
+  { "name": "background-image", "props": { "heading": "Planning a trip?", "body": "Start with the guides readers use most.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "layout": "centered", "bgImage": "/kit-fixtures/photo-3.svg", "tone": "inverse", "size": "lg" } }
 ]

package/components/cta/meta.json

@@ -4,17 +4,26 @@
   "description": "A call to action: a short heading, an optional line of text and one or two buttons — across the whole section, or as a card inside it.",
   "category": "section",
   "uses": [],
-  "shared": ["Button.astro", "Section.astro", "measured.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "measured.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["inline", "centered", "stacked"], "default": "inline", "description": "inline: text left, buttons right on wide screens. centered: everything centred. stacked: heading, text and buttons in one column at the start edge on every width." },
     "frame": { "options": ["full", "card"], "default": "full", "description": "full: the tone fills the section. card: a rounded box in a plain section carries the tone." },
     "tone": { "options": ["default", "muted", "inverse", "accent", "brand", "none"], "default": "accent", "description": "Background. On accent, primary buttons are drawn in the secondary style so they stay visible. brand: the site's brand colour role (`--color-brand`, the builder's own colour on a band) with its ink; buttons keep their style. none: no fill of its own; the page background shows through (a source colour the palette does not have)." },
-    "actionsAlign": { "options": ["inherit", "start"], "default": "inherit", "description": "The buttons' alignment. inherit: as the layout sets it. start: at the start edge under centred heading and text (layout centered; a WordPress buttons block with no justification in a centred group). inline and stacked ignore it." }
+    "actionsAlign": { "options": ["inherit", "start"], "default": "inherit", "description": "The buttons' alignment. inherit: as the layout sets it. start: at the start edge under centred heading and text (layout centered; a WordPress buttons block with no justification in a centred group). inline and stacked ignore it." },
+    "size": { "options": ["md", "lg"], "default": "md", "description": "md: the usual band. lg: a larger heading and more room above and below." },
+    "align": { "options": ["start", "center"], "default": "start", "description": "Alignment of the heading and text (the centred layout already centres them)." },
+    "mediaSide": { "options": ["end", "start"], "default": "end", "description": "With a picture: the side it takes on wide screens." }
   },
   "props": {
     "heading": { "type": "string", "label": "Heading", "required": true, "description": "The call's heading (Divi CTA title, Elementor call-to-action title)." },
+    "eyebrow": { "type": "string", "label": "Eyebrow", "description": "A short line above the heading." },
     "body": { "type": "text", "label": "Text", "description": "One or two sentences under the heading." },
+    "note": { "type": "string", "label": "Small print", "description": "A line under the buttons (No credit card required)." },
+    "image": { "type": "image", "label": "Image", "description": "A small picture beside the text; a large one belongs in a split section." },
+    "bgImage": { "type": "image", "label": "Background image", "description": "A picture behind the band; the text turns light and an overlay keeps it readable." },
+    "bgOverlay": { "type": "string", "content": false, "description": "The colour laid over the background image (a hex or rgb colour); default black at 55 %." },
     "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." },
+    "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": "Anchor id of the section; the heading gets `<id>-title`." }
   },
   "slots": {},

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