@contentrain/astro-kit 0.15.0 → 0.17.0

package/catalog.json

@@ -657,6 +657,14 @@
           ],
           "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)."
+        },
+        "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": {
@@ -2221,6 +2229,22 @@
           ],
           "default": "vertical",
           "description": "Image on top, image beside the text, or text only with a divider."
+        },
+        "surface": {
+          "options": [
+            "plain",
+            "card"
+          ],
+          "default": "plain",
+          "description": "plain: no surface. card: its own background (--color-card), radius and shadow (--shadow-card), the text padded (--spacing-card) and the image flush at the edge, as theme cards are drawn on a tinted page."
+        },
+        "byline": {
+          "options": [
+            "inline",
+            "below"
+          ],
+          "default": "inline",
+          "description": "inline: category · date above the title. below: the category above the title and author / date under it, both in the accent colour, small and semibold."
         }
       },
       "props": {

package/components/cta/Cta.astro

@@ -28,6 +28,11 @@ 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: {} },
+    // 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
+    // already start them there.
+    actionsAlign: { inherit: {}, start: {} },
   },
   compoundVariants: [
     // A card carries the tone itself, on a plain section; a plain card still needs a surface to read as one.
@@ -35,8 +40,9 @@ 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' } },
+    { layout: 'centered', actionsAlign: 'start', class: { actions: 'w-full max-w-2xl justify-start' } },
   ],
-  defaultVariants: { layout: 'inline', frame: 'full', tone: 'accent' },
+  defaultVariants: { layout: 'inline', frame: 'full', tone: 'accent', actionsAlign: 'inherit' },
 })
 
 interface Props {
@@ -46,11 +52,13 @@ interface Props {
   layout?: 'inline' | 'centered' | 'stacked' | undefined
   frame?: 'full' | 'card' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | '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
 }
 
-const { heading, body, actions, layout, frame, tone = 'accent', id } = Astro.props
-const s = cta({ layout, frame, tone })
+const { heading, body, actions, layout, frame, tone = 'accent', actionsAlign, id } = Astro.props
+const s = cta({ layout, frame, tone, actionsAlign })
 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' })

package/components/cta/fixtures.json

@@ -3,5 +3,6 @@
   { "name": "centered-inverse", "props": { "heading": "Planning a trip?", "body": "Start with the guides readers use most.", "layout": "centered", "tone": "inverse", "actions": [{ "label": "Popular guides", "href": "/guides/" }, { "label": "Ask a question", "href": "/contact/", "style": "ghost" }] } },
   { "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": "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/" }] } }
 ]

package/components/cta/meta.json

@@ -8,7 +8,8 @@
   "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", "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)." },
+    "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": {
     "heading": { "type": "string", "label": "Heading", "required": true, "description": "The call's heading (Divi CTA title, Elementor call-to-action title)." },

package/components/post-card/PostCard.astro

@@ -1,6 +1,9 @@
 ---
 // One post in a list: image, category, date, title, excerpt and author. The
-// whole card is clickable through its title link.
+// whole card is clickable through its title link. `surface: card` makes it a
+// card of its own (background, radius, shadow, padded text, image flush);
+// `byline: below` prints the category above the title and `author / date`
+// under it, as card themes do.
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import type { ImageInput, LinkInput } from '../_shared/types'
@@ -20,8 +23,16 @@ const card = tv({
       horizontal: { root: 'flex-col sm:flex-row sm:items-start', media: 'w-full sm:w-64', title: 'text-xl', excerpt: 'line-clamp-2' },
       minimal: { root: 'flex-col border-b border-line pb-5', media: 'hidden', title: 'text-lg', excerpt: 'line-clamp-2' },
     },
+    surface: {
+      plain: {},
+      card: { root: 'gap-0 overflow-hidden rounded-[var(--radius-card)] bg-card shadow-[var(--shadow-card,none)]', media: 'rounded-none', body: 'gap-3 p-[var(--spacing-card,1.5rem)]' },
+    },
+    byline: {
+      inline: {},
+      below: { meta: 'text-xs font-semibold text-accent' },
+    },
   },
-  defaultVariants: { layout: 'vertical' },
+  defaultVariants: { layout: 'vertical', surface: 'plain', byline: 'inline' },
 })
 
 interface Props {
@@ -37,13 +48,17 @@ interface Props {
   author?: string | undefined
   headingLevel?: 2 | 3 | undefined
   layout?: 'vertical' | 'horizontal' | 'minimal' | undefined
+  surface?: 'plain' | 'card' | undefined
+  byline?: 'inline' | 'below' | undefined
   /** The title in the site's link colour, as themes that colour every link do (Hello Elementor). */
   linkTitle?: boolean | undefined
 }
 
-const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, linkTitle } = Astro.props
+const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle } = Astro.props
 const date = rawDate === undefined ? undefined : new Date(rawDate)
-const slots = card({ layout })
+const slots = card({ layout, surface, byline })
+const below = byline === 'below'
+const shown = date?.toLocaleDateString(locale, { dateStyle: 'long', timeZone: 'UTC' })
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
 ---
 <article class={slots.root()}>
@@ -53,17 +68,29 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
     </div>
   )}
   <div class={slots.body()}>
-    {(category || date) && (
+    {below && category && (
+      <p class={slots.meta()}>
+        <a href={category.href} class="relative z-10 no-underline hover:underline">{category.label}</a>
+      </p>
+    )}
+    {!below && (category || date) && (
       <p class={slots.meta()}>
         {category && <a href={category.href} class="relative z-10 font-medium text-accent no-underline hover:underline">{category.label}</a>}
         {category && date && <span aria-hidden="true">·</span>}
-        {date && <time datetime={date.toISOString()}>{date.toLocaleDateString(locale, { dateStyle: 'long', timeZone: 'UTC' })}</time>}
+        {date && <time datetime={date.toISOString()}>{shown}</time>}
       </p>
     )}
     <Heading class={slots.title({ class: linkTitle ? 'text-[color:var(--color-link,var(--color-accent))]' : undefined })}>
       <a href={href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent">{title}</a>
     </Heading>
+    {below && (author || date) && (
+      <p class={slots.meta()}>
+        {author && <span>{author}</span>}
+        {author && date && <span aria-hidden="true">/</span>}
+        {date && <time datetime={date.toISOString()}>{shown}</time>}
+      </p>
+    )}
     {excerpt && <p class={slots.excerpt()}>{excerpt}</p>}
-    {author && <p class="text-sm text-ink-muted">{author}</p>}
+    {!below && author && <p class="text-sm text-ink-muted">{author}</p>}
   </div>
 </article>

package/components/post-card/fixtures.json

@@ -50,5 +50,28 @@
         "href": "/category/news/"
       }
     }
+  },
+  {
+    "name": "card-byline",
+    "props": {
+      "surface": "card",
+      "byline": "below",
+      "title": "Laminating dough without a sheeter",
+      "href": "/recipes/laminating/",
+      "excerpt": "Laminating dough without a sheeter — the short version first.",
+      "date": "2026-02-10T09:00:00Z",
+      "category": {
+        "label": "Recipes",
+        "href": "/category/recipes/"
+      },
+      "author": "admin",
+      "image": {
+        "src": "/kit-fixtures/photo-1.svg",
+        "alt": "",
+        "width": 1200,
+        "height": 800
+      }
+    },
+    "frame": "narrow"
   }
 ]

package/components/post-card/meta.json

@@ -6,7 +6,9 @@
   "uses": [],
   "shared": ["KitImage.astro", "types.ts"],
   "variants": {
-    "layout": { "options": ["vertical", "horizontal", "minimal"], "default": "vertical", "description": "Image on top, image beside the text, or text only with a divider." }
+    "layout": { "options": ["vertical", "horizontal", "minimal"], "default": "vertical", "description": "Image on top, image beside the text, or text only with a divider." },
+    "surface": { "options": ["plain", "card"], "default": "plain", "description": "plain: no surface. card: its own background (--color-card), radius and shadow (--shadow-card), the text padded (--spacing-card) and the image flush at the edge, as theme cards are drawn on a tinted page." },
+    "byline": { "options": ["inline", "below"], "default": "inline", "description": "inline: category · date above the title. below: the category above the title and author / date under it, both in the accent colour, small and semibold." }
   },
   "props": {
     "title": { "type": "string", "required": true, "description": "Post title (posts.title)." },

package/components/testimonial/Testimonial.astro

@@ -58,6 +58,8 @@ interface Props {
 const { items, heading, layout, quoteSize, tone, id } = Astro.props
 const s = testimonial({ layout, quoteSize, 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' } : {})
 // The quotation marks are drawn, not written: the quote's text is the source's words, read once. A quote the source
 // already wrote inside marks keeps its own.
 const quoted = (text: string) => /^\s*["'“‘„«‹「『]/.test(text)
@@ -65,7 +67,7 @@ const quoted = (text: string) => /^\s*["'“‘„«‹「『]/.test(text)
 {items.length > 0 && (
   <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
     {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
-    <div class={s.list()}>
+    <div class={list}>
       {items.map(item => (
         <figure class={s.card()}>
           <blockquote class={s.quote()}><p class:list={[!quoted(item.quote) && "before:content-[open-quote] after:content-[close-quote]"]}>{item.quote}</p></blockquote>

package/mapping/elementor.json

@@ -1,7 +1,7 @@
 {
   "format": "astro-kit-mapping@1",
   "builder": "elementor",
-  "version": "9",
+  "version": "10",
   "fallback": "prose",
   "defaults": {
     "elementor/video": {
@@ -605,6 +605,9 @@
     {
       "id": "team.columns",
       "component": "team",
+      "variant": {
+        "roleStyle": "plain"
+      },
       "when": {
         "columns": [
           2,
@@ -761,6 +764,9 @@
     {
       "id": "stats.counter",
       "component": "stats",
+      "variant": {
+        "labelSize": "lg"
+      },
       "slots": {
         "title": {
           "match": "elementor/heading",
@@ -848,6 +854,9 @@
     {
       "id": "testimonial.quotes",
       "component": "testimonial",
+      "variant": {
+        "quoteSize": "xl"
+      },
       "slots": {
         "title": {
           "match": "elementor/heading",
@@ -874,6 +883,9 @@
     {
       "id": "faq.accordion",
       "component": "faq",
+      "variant": {
+        "questionStyle": "bold"
+      },
       "slots": {
         "title": {
           "match": "elementor/heading",
@@ -898,6 +910,9 @@
     {
       "id": "faq.toggle",
       "component": "faq",
+      "variant": {
+        "questionStyle": "bold"
+      },
       "slots": {
         "title": {
           "match": "elementor/heading",
@@ -1103,7 +1118,7 @@
       "id": "feature-list.icon-list",
       "component": "feature-list",
       "variant": {
-        "style": "icon"
+        "style": "list"
       },
       "slots": {
         "title": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.15.0",
+  "version": "0.17.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.35.0"
+    "@contentrain/types": "1.36.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",