@contentrain/astro-kit 0.17.0 → 0.19.0

package/catalog.json

@@ -520,7 +520,15 @@
             "stacked"
           ],
           "default": "split",
-          "description": "split: details beside the form on wide screens. stacked: one centred column."
+          "description": "split: details beside the form on wide screens. stacked: one column (see align)."
+        },
+        "align": {
+          "options": [
+            "center",
+            "start"
+          ],
+          "default": "center",
+          "description": "Stacked only, and the details alone before a Studio form. center: one centred column at a reading width. start: the section's whole column from the start edge, as a page builder's container whose text sets no alignment."
         },
         "tone": {
           "options": [
@@ -653,10 +661,11 @@
             "muted",
             "inverse",
             "accent",
+            "brand",
             "none"
           ],
           "default": "accent",
-          "description": "Background. On accent, primary buttons are drawn in the secondary style so they stay visible. none: no fill of its own; the page background shows through (a source colour the palette does not have)."
+          "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": [
@@ -3432,6 +3441,14 @@
           ],
           "default": "auto",
           "description": "The quote's text size. auto: the layout's own (body size in a grid, 2xl–3xl for a single quote). base, lg, xl: that size on every width."
+        },
+        "frame": {
+          "options": [
+            "card",
+            "plain"
+          ],
+          "default": "card",
+          "description": "card: each quote in its box (a bordered, padded card in the grid; the surface colour in a muted section). plain: the quote and who said it straight on the section, across the column, with no box, as Elementor's testimonial widget draws them."
         }
       },
       "props": {

package/components/_shared/Section.astro

@@ -12,6 +12,8 @@ const section = tv({
       muted: 'bg-surface-muted text-ink',
       inverse: 'bg-ink text-surface',
       accent: 'bg-accent text-accent-ink',
+      // The site's brand colour where it is not the accent (a band the source paints in the builder's own colour).
+      brand: 'bg-brand text-brand-ink',
       // No fill of its own: the page's background and text colour show through.
       none: '',
     },
@@ -28,7 +30,7 @@ const section = tv({
 export type Tone = 'default' | 'muted' | 'inverse' | 'accent'
 
 interface Props {
-  tone?: Tone | 'none' | undefined
+  tone?: Tone | 'brand' | 'none' | undefined
   spacing?: 'none' | 'sm' | 'md' | 'lg' | undefined
   /** `page` is the full frame, `prose` the reading column, `none` for full-bleed content. */
   width?: 'page' | 'prose' | 'none' | undefined

package/components/contact-form/ContactForm.astro

@@ -37,12 +37,18 @@ const contact = tv({
   variants: {
     layout: {
       split: { grid: 'md:grid-cols-[2fr_3fr] md:items-start' },
-      stacked: { grid: 'mx-auto max-w-2xl' },
+      stacked: {},
     },
+    // The stacked column: centred in a reading width, or the section's whole column from its start edge (a page
+    // builder's container whose text has no alignment of its own sits left, full width).
+    align: { center: {}, start: {} },
     // 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: { form: 'border border-line bg-surface p-6 md:p-8' }, muted: { form: 'bg-surface p-6 text-ink md:p-8' }, inverse: { form: 'bg-surface p-6 text-ink md:p-8' }, accent: { form: 'bg-surface p-6 text-ink md:p-8', intro: 'opacity-100', term: 'opacity-100' } },
   },
-  defaultVariants: { layout: 'split', tone: 'default' },
+  compoundVariants: [
+    { layout: 'stacked', align: 'center', class: { grid: 'mx-auto max-w-2xl' } },
+  ],
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center' },
 })
 
 interface Props {
@@ -54,14 +60,16 @@ interface Props {
   formHeading?: string | undefined
   details?: ContactDetail[] | undefined
   layout?: 'split' | 'stacked' | undefined
+  /** Stacked only (and the details alone, before a Studio form): a centred column, or the whole column from the start edge. */
+  align?: 'center' | 'start' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
 }
 
-const { model, heading, intro, formHeading, details = [], layout, tone, id = 'contact' } = Astro.props
+const { model, heading, intro, formHeading, details = [], layout, align, tone, id = 'contact' } = Astro.props
 // Nothing to render (Studio not bound yet): a split would leave an empty column — the details stand alone.
 const formShown = formHome(model) !== null
-const s = contact({ layout: formShown ? layout : 'stacked', tone })
+const s = contact({ layout: formShown ? layout : 'stacked', align, tone })
 const headingId = heading ? `${id}-title` : undefined
 // A description list needs a term for every detail; an icon list carried from the source has values only.
 const labelled = details.every(detail => detail.label)

package/components/contact-form/fixtures.json

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

package/components/contact-form/meta.json

@@ -6,7 +6,8 @@
   "uses": [],
   "shared": ["Section.astro"],
   "variants": {
-    "layout": { "options": ["split", "stacked"], "default": "split", "description": "split: details beside the form on wide screens. stacked: one centred column." },
+    "layout": { "options": ["split", "stacked"], "default": "split", "description": "split: details beside the form on wide screens. stacked: one column (see align)." },
+    "align": { "options": ["center", "start"], "default": "center", "description": "Stacked only, and the details alone before a Studio form. center: one centred column at a reading width. start: the section's whole column from the start edge, as a page builder's container whose text sets no alignment." },
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background; the form always sits on a surface card." }
   },
   "props": {

package/components/cta/Cta.astro

@@ -27,7 +27,7 @@ const cta = tv({
     },
     // 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' }, none: {} },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { body: 'opacity-100' }, brand: { body: '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
@@ -40,6 +40,7 @@ const cta = tv({
     { frame: 'card', tone: 'muted', class: { box: 'border-transparent bg-surface-muted text-ink' } },
     { frame: 'card', tone: 'inverse', class: { box: 'border-transparent bg-ink text-surface' } },
     { 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' } },
   ],
   defaultVariants: { layout: 'inline', frame: 'full', tone: 'accent', actionsAlign: 'inherit' },
@@ -51,7 +52,7 @@ interface Props {
   actions: ActionInput[]
   layout?: 'inline' | 'centered' | 'stacked' | undefined
   frame?: 'full' | 'card' | undefined
-  tone?: 'default' | 'muted' | 'inverse' | 'accent' | 'none' | 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
   id?: string | undefined

package/components/cta/fixtures.json

@@ -4,5 +4,6 @@
   { "name": "card-default", "props": { "heading": "Write for the journal", "body": "We publish reader essays every season.", "frame": "card", "tone": "default", "actions": [{ "label": "Pitch an essay", "href": "/pitch/" }] } },
   { "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-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/" }] } }
 ]

package/components/cta/meta.json

@@ -8,7 +8,7 @@
   "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", "none"], "default": "accent", "description": "Background. On accent, primary buttons are drawn in the secondary style so they stay visible. none: no fill of its own; the page background shows through (a source colour the palette does not have)." },
+    "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." }
   },
   "props": {

package/components/faq/Faq.astro

@@ -29,8 +29,10 @@ const faq = tv({
       plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-[length:var(--text-body,1rem)] [font-weight:inherit] [&::-webkit-details-marker]:inline', marker: 'hidden', answer: 'pt-2 ps-5' },
     },
     tone: { default: {}, muted: { item: 'bg-surface' }, inverse: { answer: 'prose-invert' }, accent: { answer: 'prose-invert' } },
-    // heading: the question as a small heading. bold: body size in bold, as accordion and toggle titles often are.
-    questionStyle: { heading: {}, bold: { summary: 'text-[length:var(--text-body,1rem)] font-bold' } },
+    // heading: the question as a small heading. bold: body size in bold, as accordion and toggle titles often are. The
+    // weight is an arbitrary property like the summary's own: twMerge replaces one only with another, and a `font-bold`
+    // beside it lost in the CSS (IP-4 elementor G9: the question stayed at the heading weight).
+    questionStyle: { heading: {}, bold: { summary: 'text-[length:var(--text-body,1rem)] [font-weight:700]' } },
   },
   compoundVariants: [
     { style: 'cards', tone: 'muted', class: { item: 'border-transparent' } },

package/components/testimonial/Testimonial.astro

@@ -39,11 +39,15 @@ const testimonial = tv({
       lg: { quote: 'text-lg leading-relaxed md:text-lg' },
       xl: { quote: 'text-xl leading-snug md:text-xl' },
     },
+    // card: a quote in its box (the grid's border and padding, a muted section's surface). plain: the quote and who said
+    // it on the section itself, across the column, as Elementor's testimonial widget draws them.
+    frame: { card: {}, plain: {} },
   },
   compoundVariants: [
     { layout: 'grid', tone: 'muted', class: { card: 'border-transparent text-ink' } },
+    { frame: 'plain', class: { card: 'rounded-none border-0 bg-transparent p-0' } },
   ],
-  defaultVariants: { layout: 'grid', tone: 'default', quoteSize: 'auto' },
+  defaultVariants: { layout: 'grid', tone: 'default', quoteSize: 'auto', frame: 'card' },
 })
 
 interface Props {
@@ -51,12 +55,13 @@ interface Props {
   heading?: string | undefined
   layout?: 'single' | 'grid' | undefined
   quoteSize?: 'auto' | 'base' | 'lg' | 'xl' | undefined
+  frame?: 'card' | 'plain' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
 }
 
-const { items, heading, layout, quoteSize, tone, id } = Astro.props
-const s = testimonial({ layout, quoteSize, tone })
+const { items, heading, layout, quoteSize, frame, tone, id } = Astro.props
+const s = testimonial({ layout, quoteSize, frame, tone })
 const headingId = heading && id ? `${id}-title` : undefined
 // Two quotes share the row: a third column would stand empty beside them and narrow both (IP-4 elementor launch G9).
 const list = s.list(items.length === 2 && (layout ?? 'grid') === 'grid' ? { class: 'lg:grid-cols-2' } : {})

package/components/testimonial/fixtures.json

@@ -35,6 +35,14 @@
     "name": "single-quote-lg",
     "props": { "layout": "single", "quoteSize": "lg", "items": [{ "quote": "We planned less and saw more.", "name": "Jonas Weber", "role": "Reader" }] }
   },
+  {
+    "name": "grid-plain",
+    "props": { "frame": "plain", "quoteSize": "xl", "items": [{ "quote": "We sold out our first kiln batch on launch day.", "name": "Ruth Adeyemi", "role": "Potter" }, { "quote": "Six weeks, one price, and they answered every email.", "name": "Daniel Okafor", "role": "Leatherworker" }] }
+  },
+  {
+    "name": "single-plain-muted",
+    "props": { "layout": "single", "frame": "plain", "tone": "muted", "items": [{ "quote": "Calm pages and a fast checkout.", "name": "Ruth Adeyemi" }] }
+  },
   {
     "name": "grid-source-quoted",
     "props": { "items": [{ "quote": "“We set it up before lunch.”", "name": "Grace Lin", "role": "Head of Support, Fernhill" }, { "quote": "People just read the page.", "name": "Omar Haddad", "role": "Support lead" }] }

package/components/testimonial/meta.json

@@ -38,6 +38,14 @@
       ],
       "default": "auto",
       "description": "The quote's text size. auto: the layout's own (body size in a grid, 2xl–3xl for a single quote). base, lg, xl: that size on every width."
+    },
+    "frame": {
+      "options": [
+        "card",
+        "plain"
+      ],
+      "default": "card",
+      "description": "card: each quote in its box (a bordered, padded card in the grid; the surface colour in a muted section). plain: the quote and who said it straight on the section, across the column, with no box, as Elementor's testimonial widget draws them."
     }
   },
   "props": {

package/mapping/elementor.json

@@ -1,7 +1,7 @@
 {
   "format": "astro-kit-mapping@1",
   "builder": "elementor",
-  "version": "10",
+  "version": "11",
   "fallback": "prose",
   "defaults": {
     "elementor/video": {
@@ -276,6 +276,9 @@
     {
       "match": "elementor/testimonial",
       "component": "testimonial",
+      "variant": {
+        "frame": "plain"
+      },
       "group": "siblings",
       "into": "items",
       "item": {
@@ -855,7 +858,8 @@
       "id": "testimonial.quotes",
       "component": "testimonial",
       "variant": {
-        "quoteSize": "xl"
+        "quoteSize": "xl",
+        "frame": "plain"
       },
       "slots": {
         "title": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.36.0"
+    "@contentrain/types": "1.37.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",