@contentrain/astro-kit 0.31.0 → 0.32.0

package/components/pricing/meta.json

@@ -29,6 +29,31 @@
       ],
       "default": "default",
       "description": "Section background."
+    },
+    "layout": {
+      "options": [
+        "cards",
+        "table"
+      ],
+      "default": "cards",
+      "description": "cards: plans side by side. table: one comparison table, plans as columns and features as rows (for more than four plans)."
+    },
+    "featureStyle": {
+      "options": [
+        "check",
+        "dot",
+        "plain"
+      ],
+      "default": "plain",
+      "description": "The mark before each feature in the cards: a check, a dot, or the list's own bullets."
+    },
+    "billingToggle": {
+      "options": [
+        "none",
+        "radio"
+      ],
+      "default": "none",
+      "description": "radio: two labelled radios swap each plan's price for its priceAlt (monthly / yearly), with no script. The radio group is named from the section id, or a hash of the plans without one, so two toggles on a page stay independent."
     }
   },
   "props": {
@@ -90,6 +115,21 @@
             "type": "boolean",
             "label": "Featured",
             "description": "Raises the plan and gives it the badge."
+          },
+          "badge": {
+            "type": "string",
+            "label": "Badge",
+            "description": "A badge text on the plan (\"Best value\"); a featured plan without one reads the section's featuredLabel."
+          },
+          "priceAlt": {
+            "type": "string",
+            "label": "Price, other period",
+            "description": "The price for the other billing period (\"€150\"), shown when the toggle is on its second option."
+          },
+          "periodAlt": {
+            "type": "string",
+            "label": "Period, other period",
+            "description": "What the other price is per (\"/year\")."
           }
         }
       },
@@ -105,6 +145,152 @@
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "compact": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "A denser card: smaller padding, gap and price."
+    },
+    "includedLabel": {
+      "type": "string",
+      "default": "Included",
+      "content": false,
+      "description": "Table cell text for readers where a plan has the feature."
+    },
+    "notIncludedLabel": {
+      "type": "string",
+      "default": "Not included",
+      "content": false,
+      "description": "Table cell text for readers where a plan lacks the feature."
+    },
+    "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."
+        }
+      }
+    },
+    "billingMainLabel": {
+      "type": "string",
+      "default": "Monthly",
+      "content": false,
+      "description": "First option of the billing toggle."
+    },
+    "billingAltLabel": {
+      "type": "string",
+      "default": "Yearly",
+      "content": false,
+      "description": "Second option of the billing toggle (the plans' priceAlt)."
+    },
+    "billingLegend": {
+      "type": "string",
+      "default": "Billing period",
+      "content": false,
+      "description": "Legend of the toggle, read to screen readers."
     }
   },
   "slots": {},
@@ -121,7 +307,7 @@
       "divi/et_pb_pricing_tables"
     ]
   },
-  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
+  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label. The table layout is a real <table> with a caption, column and row headers, and Included / Not included text in every cell; the billing toggle is a fieldset with a legend and labelled radios.",
   "pattern": {
     "summary": "repeated plan units: name + price + feature list + button",
     "signals": [

package/components/split/Split.astro

@@ -5,59 +5,121 @@
 import { tv } from 'tailwind-variants'
 import { renderMarkdown } from '../../../lib/markdown'
 import Button from '../_shared/Button.astro'
+import Embed from '../embed/Embed.astro'
+import FeatureList from '../feature-list/FeatureList.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
-import type { ActionInput, ImageInput } from '../_shared/types'
+import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 
 const split = tv({
   slots: {
-    grid: 'grid items-center gap-10 md:grid-cols-2 md:gap-16',
+    grid: 'grid items-center gap-10 md:gap-16',
     copy: 'flex flex-col gap-5',
     eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
     body: 'prose prose-site max-w-none text-pretty',
     actions: 'flex flex-wrap gap-3 pt-2',
-    media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
+    media: 'overflow-hidden',
+    image: 'h-auto w-full object-cover',
   },
   variants: {
     // Source order is text first; `start` moves the image before it on wide screens only.
     imageSide: { start: { media: 'md:order-first' }, end: {} },
+    // The text column's share against the image's (the columns follow the sides, see `columns` below).
+    ratio: { '1:1': {}, '5:7': {}, '7:5': {} },
+    // contain: the image at its own proportions. cover: it fills the column's height.
+    imageFit: { contain: {}, cover: { grid: 'items-stretch', media: 'min-h-72 md:h-full', image: 'h-full min-h-72' } },
+    imageShape: {
+      none: { media: 'rounded-none' },
+      rounded: { media: 'rounded-[var(--radius-image,var(--radius-card))]' },
+      circle: { media: 'mx-auto aspect-square w-full max-w-lg rounded-full', image: 'h-full' },
+    },
+    // edge: the image runs on to the viewport's edge on its side (wide screens).
+    imageBleed: { none: {}, edge: { media: 'rounded-none' } },
+    // Phones show the text first, as the source does, or the picture first when it is the content itself.
+    stackOrder: { 'text-first': {}, 'media-first': { media: 'max-md:order-first' } },
+    // The media column follows the reader down a long text (wide screens).
+    sticky: { true: { media: 'md:sticky md:top-8 md:self-start' }, false: {} },
     align: { start: {}, center: { copy: 'items-center text-center', actions: 'justify-center' } },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
-    tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'opacity-100' } },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'opacity-100' }, brand: { eyebrow: 'opacity-100' }, none: {} },
   },
-  defaultVariants: { imageSide: 'end', align: 'start', tone: 'default' },
+  defaultVariants: { imageSide: 'end', ratio: '1:1', imageFit: 'contain', imageShape: 'rounded', imageBleed: 'none', stackOrder: 'text-first', sticky: false, align: 'start', tone: 'default' },
 })
 
+// Literal class names, so the stylesheet builder sees them: the text column's share first, the image's second; a
+// picture before the text on wide screens swaps the two columns.
+const COLUMNS = {
+  text: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[5fr_7fr]', '7:5': 'md:grid-cols-[7fr_5fr]' },
+  image: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[7fr_5fr]', '7:5': 'md:grid-cols-[5fr_7fr]' },
+} as const
+// The viewport's edge, from the content's edge: what is left of the page's width, halved.
+const BLEED = {
+  end: 'md:-me-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
+  start: 'md:-ms-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
+} as const
+
+interface Feature {
+  title: string
+  text?: string | undefined
+  /** A kit icon name (check, star, bolt, shield, heart, globe, clock, chat). */
+  icon?: string | undefined
+}
+
 interface Props {
   heading: string
+  /** The heading's level: 2 under the page title; 3 or 4 when the section sits inside another. */
+  headingLevel?: 2 | 3 | 4 | undefined
   eyebrow?: string | undefined
   /** Markdown, rendered at build time. */
   body?: string | undefined
   actions?: ActionInput[] | undefined
   image?: ImageInput | undefined
+  /** Short points under the text, each with a title and a line. */
+  features?: Feature[] | undefined
+  /** A video page (YouTube, Vimeo); the image is its poster and nothing loads from the provider until it is played. */
+  videoUrl?: string | undefined
+  /** The video's text for the play button. */
+  playLabel?: string | undefined
   imageSide?: 'start' | 'end' | undefined
+  ratio?: '1:1' | '5:7' | '7:5' | undefined
+  imageFit?: 'contain' | 'cover' | undefined
+  imageShape?: 'none' | 'rounded' | 'circle' | undefined
+  imageBleed?: 'none' | 'edge' | undefined
+  mediaKind?: 'image' | 'video' | undefined
+  featureStyle?: 'check' | 'icon' | undefined
+  stackOrder?: 'text-first' | 'media-first' | undefined
+  sticky?: boolean | undefined
   align?: 'start' | 'center' | undefined
-  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | 'brand' | 'none' | 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, eyebrow, body, actions = [], image, imageSide, align, tone, id } = Astro.props
-const s = split({ imageSide, align, tone })
+const { heading, headingLevel = 2, eyebrow, body, actions = [], image, features = [], videoUrl, playLabel, imageSide, ratio = '1:1', imageFit, imageShape, imageBleed, mediaKind, featureStyle = 'check', stackOrder, sticky = false, align, tone, measured, id } = Astro.props
+const s = split({ imageSide, ratio, imageFit, imageShape, imageBleed, stackOrder, sticky, align, tone })
+const Heading = `h${headingLevel}` as 'h2'
+const columns = COLUMNS[imageSide === 'start' ? 'image' : 'text'][ratio]
+const bleed = imageBleed === 'edge' ? BLEED[imageSide === 'start' ? 'start' : 'end'] : undefined
+const video = mediaKind === 'video' && videoUrl
 const headingId = id ? `${id}-title` : undefined
 const html = await renderMarkdown(body)
 ---
-<Section tone={tone} id={id} aria-labelledby={headingId}>
-  <div class={s.grid()}>
+<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId} class={bleed ? 'overflow-x-clip' : undefined}>
+  <div class:list={[s.grid(), columns]}>
     <div class={s.copy()}>
       {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-      <h2 id={headingId} class={s.heading()}>{heading}</h2>
+      <Heading id={headingId} class={s.heading()}>{heading}</Heading>
       {html && <div class={s.body()} data-kit-text set:html={html} />}
+      {features.length > 0 && <FeatureList items={features} columns="2" style={featureStyle} tone={tone === 'brand' || tone === 'none' ? undefined : tone} bare titleLevel={Math.min(5, headingLevel + 1) as 3 | 4 | 5} />}
       {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
     </div>
-    {image && (
-      <div class={s.media()}>
-        <KitImage image={image} sizes="(min-width: 768px) 50vw, 100vw" class="h-auto w-full object-cover" />
+    {(video || image) && (
+      <div class:list={[s.media(), bleed]}>
+        {video
+          ? <div class="[&>figure]:my-0 [&>figure]:max-w-none"><Embed url={videoUrl} title={heading} poster={image} playLabel={playLabel} aspect="video" width="page" /></div>
+          : image && <KitImage image={image} sizes="(min-width: 768px) 50vw, 100vw" class={s.image()} />}
       </div>
     )}
   </div>

package/components/split/fixtures.json

@@ -2,5 +2,12 @@
   { "name": "end-default", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
   { "name": "start-muted", "props": { "imageSide": "start", "tone": "muted", "heading": "Content you can edit", "body": "Pages live as structured content in your own repository, editable in [Contentrain Studio](/studio/).", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } },
   { "name": "center-inverse", "props": { "align": "center", "tone": "inverse", "heading": "Fast by default", "body": "Static HTML and one stylesheet.", "actions": [{ "label": "See the numbers", "href": "/performance/" }], "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1200, "height": 800 } } },
-  { "name": "accent", "props": { "tone": "accent", "eyebrow": "New", "heading": "Now with search", "body": "Every page is indexed at build time.", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "", "width": 1200, "height": 800 } } }
+  { "name": "accent", "props": { "tone": "accent", "eyebrow": "New", "heading": "Now with search", "body": "Every page is indexed at build time.", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "", "width": 1200, "height": 800 } } },
+  { "name": "ratio-5-7-cover-square", "props": { "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "ratio": "5:7", "imageFit": "cover", "imageShape": "none", "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
+  { "name": "ratio-7-5-start-features", "props": { "heading": "Why teams choose us", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "ratio": "7:5", "imageSide": "start", "features": [{ "title": "Fast", "text": "Static pages, one stylesheet.", "icon": "bolt" }, { "title": "Safe", "text": "Your repository stays yours.", "icon": "shield" }, { "title": "Editable", "text": "Change copy without a developer.", "icon": "chat" }], "featureStyle": "icon", "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "muted" } },
+  { "name": "circle-media-first", "props": { "heading": "Meet the founder", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageShape": "circle", "stackOrder": "media-first", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
+  { "name": "bleed-edge-end", "props": { "heading": "A wider picture", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageBleed": "edge", "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "brand" } },
+  { "name": "bleed-edge-start-none", "props": { "heading": "From the other side", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageBleed": "edge", "imageSide": "start", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "none" } },
+  { "name": "video-sticky-check", "props": { "heading": "See how it works", "headingLevel": 3, "mediaKind": "video", "videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ", "playLabel": "Play video", "sticky": true, "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "features": [{ "title": "Fast", "text": "Static pages, one stylesheet.", "icon": "bolt" }, { "title": "Safe", "text": "Your repository stays yours.", "icon": "shield" }], "image": { "src": "/kit-fixtures/photo-6.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
+  { "name": "measured-frame", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "measured": { "containerPx": 1000, "padY": 80, "bg": { "color": "#eef2ff" }, "tone": "light" } } }
 ]

package/components/split/meta.json

@@ -3,7 +3,10 @@
   "name": "Split",
   "description": "An image beside a block of text — eyebrow, heading, a markdown body and buttons — on either side, stacked on phones. The media-and-text section of a landing page (Gutenberg media-text, a two-column Elementor container with an image, Divi's image + text row).",
   "category": "section",
-  "uses": [],
+  "uses": [
+    "embed",
+    "feature-list"
+  ],
   "shared": [
     "Button.astro",
     "KitImage.astro",
@@ -20,6 +23,64 @@
       "default": "end",
       "description": "Which side the image takes on wide screens: start (left in left-to-right text) or end. Phones always show it after the text."
     },
+    "ratio": {
+      "options": [
+        "1:1",
+        "5:7",
+        "7:5"
+      ],
+      "default": "1:1",
+      "description": "The text column's share against the image's: equal, text 5 to image 7, or text 7 to image 5."
+    },
+    "imageFit": {
+      "options": [
+        "contain",
+        "cover"
+      ],
+      "default": "contain",
+      "description": "contain: the image at its own proportions. cover: it fills the column's height."
+    },
+    "imageShape": {
+      "options": [
+        "none",
+        "rounded",
+        "circle"
+      ],
+      "default": "rounded",
+      "description": "The image's corners: square, the theme's rounding, or a circle."
+    },
+    "imageBleed": {
+      "options": [
+        "none",
+        "edge"
+      ],
+      "default": "none",
+      "description": "edge: the image runs on to the edge of the screen on its side (wide screens)."
+    },
+    "mediaKind": {
+      "options": [
+        "image",
+        "video"
+      ],
+      "default": "image",
+      "description": "image: the picture. video: the picture is the poster of a video that loads only when played."
+    },
+    "featureStyle": {
+      "options": [
+        "check",
+        "icon"
+      ],
+      "default": "check",
+      "description": "The marks of the points under the text: a check, or each point's own icon."
+    },
+    "stackOrder": {
+      "options": [
+        "text-first",
+        "media-first"
+      ],
+      "default": "text-first",
+      "description": "On a phone: the text first, or the picture first."
+    },
     "align": {
       "options": [
         "start",
@@ -33,10 +94,12 @@
         "default",
         "muted",
         "inverse",
-        "accent"
+        "accent",
+        "brand",
+        "none"
       ],
       "default": "default",
-      "description": "Section background."
+      "description": "Section background (brand: the site's brand colour; none: the page's own)."
     }
   },
   "props": {
@@ -46,6 +109,12 @@
       "required": true,
       "description": "The section heading."
     },
+    "headingLevel": {
+      "type": "integer",
+      "default": 2,
+      "content": false,
+      "description": "The heading's level: 2 under the page title; 3 or 4 when the section sits inside another."
+    },
     "eyebrow": {
       "type": "string",
       "label": "Eyebrow",
@@ -121,10 +190,162 @@
       },
       "description": "The image beside the text. Width and height, when known, let the site reserve its space."
     },
+    "features": {
+      "type": "array",
+      "label": "Points",
+      "items": {
+        "type": "object",
+        "fields": {
+          "title": {
+            "type": "string",
+            "label": "Title",
+            "required": true,
+            "description": "The point, in a few words."
+          },
+          "text": {
+            "type": "string",
+            "label": "Text",
+            "description": "A line about it."
+          },
+          "icon": {
+            "type": "string",
+            "label": "Icon",
+            "description": "A kit icon name (check, star, bolt, shield, heart, globe, clock, chat)."
+          }
+        }
+      },
+      "description": "Short points under the text (an Elementor icon list or icon box, a Gutenberg list), each with a title and a line."
+    },
+    "videoUrl": {
+      "type": "url",
+      "label": "Video",
+      "description": "A video page (YouTube, Vimeo); the image is its poster and nothing loads from the provider until it is played."
+    },
+    "playLabel": {
+      "type": "string",
+      "content": false,
+      "description": "The play button's text (ui-strings embed.play)."
+    },
+    "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`."
+    },
+    "sticky": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "The picture stays in view while a long text scrolls past it (wide screens)."
     }
   },
   "slots": {},
@@ -141,7 +362,7 @@
       "divi/et_pb_image"
     ]
   },
-  "a11y": "The section is labelled by its heading. The image is a separate figure in reading order after the text; an empty description marks a decorative one.",
+  "a11y": "The section is labelled by its heading. The image is a separate figure in reading order after the text; an empty description marks a decorative one. With stackOrder media-first the picture comes first on a phone by CSS order only: the DOM and so the reading order stay text first, which is right when the picture is decoration; give the picture an empty description then.",
   "pattern": {
     "summary": "image beside heading + text",
     "signals": [