@contentrain/astro-kit 0.19.0 → 0.20.0

package/catalog.json

@@ -1154,6 +1154,22 @@
           ],
           "default": "start",
           "description": "start: brand and links to the sides (left-aligned on phones). center: everything centred in one column, as themes with a centred footer print it."
+        },
+        "pack": {
+          "options": [
+            "spread",
+            "end"
+          ],
+          "default": "spread",
+          "description": "columns layout only. spread: the link columns share the footer's width after the brand column. end: they are packed at the end edge at their own width, as a theme whose footer is the brand left and its menus on the right."
+        },
+        "narrow": {
+          "options": [
+            "stack",
+            "row"
+          ],
+          "default": "stack",
+          "description": "Packed columns only, below the md breakpoint. stack: one column. row: still side by side from the start edge, under the brand."
         }
       },
       "props": {
@@ -1250,6 +1266,18 @@
         "navLabel": {
           "type": "string",
           "description": "Accessible name of the footer navigation (ui-strings nav.footer)."
+        },
+        "packGap": {
+          "type": "string",
+          "description": "Packed columns only: the space between columns, a CSS length such as 98px."
+        },
+        "packGapNarrow": {
+          "type": "string",
+          "description": "Packed columns in a row only: the space between them below the md breakpoint, a CSS length."
+        },
+        "linkSize": {
+          "type": "string",
+          "description": "Font size of the footer's links, a CSS length such as 17.88px; absent, the footer's own."
         }
       },
       "slots": {},

package/components/footer/Footer.astro

@@ -22,11 +22,18 @@ const footer = tv({
       inverse: { root: 'bg-ink text-surface' },
     },
     align: { start: {}, center: { inner: 'items-center justify-items-center text-center md:items-center [&_ul]:justify-center' } },
+    // The `columns` layout's link columns: spread from the brand column over the footer's width, or packed at the end
+    // edge at their own width (a theme whose footer is the brand left and its menus on the right).
+    pack: { spread: {}, end: {} },
+    // Packed columns below `md`: stacked, or still side by side from the start edge under the brand.
+    narrow: { stack: {}, row: { inner: 'grid-cols-[repeat(var(--footer-columns),auto)] justify-start gap-x-[var(--footer-gap-narrow,1.5rem)]' } },
   },
   compoundVariants: [
     { layout: 'simple', align: 'center', class: { inner: 'md:flex-col md:justify-center' } },
+    { layout: 'columns', pack: 'end', class: { inner: 'md:grid-cols-[1fr_repeat(var(--footer-columns),auto)] md:gap-x-[var(--footer-gap,2.5rem)] md:[&>div:first-child]:col-span-1' } },
+    { layout: 'columns', pack: 'end', narrow: 'row', class: { inner: '[&>div:first-child]:col-span-full' } },
   ],
-  defaultVariants: { layout: 'simple', tone: 'default', align: 'start' },
+  defaultVariants: { layout: 'simple', tone: 'default', align: 'start', pack: 'spread', narrow: 'stack' },
 })
 
 interface Props {
@@ -48,10 +55,22 @@ interface Props {
   layout?: 'simple' | 'columns' | undefined
   tone?: 'default' | 'muted' | 'inverse' | undefined
   align?: 'start' | 'center' | undefined
+  /** `columns` layout only: `end` packs the link columns at the end edge, right-aligned, instead of spreading them. */
+  pack?: 'spread' | 'end' | undefined
+  /** Packed columns only: the space between columns, a CSS length (`98px`). */
+  packGap?: string | undefined
+  /** Packed columns only: below `md`, `stack` (one column) or `row` (still side by side from the start edge, under the brand). */
+  narrow?: 'stack' | 'row' | undefined
+  /** Packed columns in a `row` only: the space between them below `md`, a CSS length. */
+  packGapNarrow?: string | undefined
+  /** The links' font size, a CSS length (`17.88px`); absent, the footer's own. */
+  linkSize?: string | undefined
 }
 
-const { siteName, tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align } = Astro.props
-const { root, inner, muted, link } = footer({ layout, tone, align })
+const { siteName, tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align, pack, packGap, narrow, packGapNarrow, linkSize } = Astro.props
+const { root, inner, muted, link } = footer({ layout, tone, align, pack: layout === 'columns' ? pack : undefined, narrow: layout === 'columns' && pack === 'end' ? narrow : undefined })
+// Custom properties the packed columns and sized links read; none when none is set.
+const vars = [layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : '', layout === 'columns' && pack === 'end' && packGap ? `--footer-gap: ${packGap}` : '', layout === 'columns' && pack === 'end' && narrow === 'row' && packGapNarrow ? `--footer-gap-narrow: ${packGapNarrow}` : '', linkSize ? `--footer-link-size: ${linkSize}` : ''].filter(Boolean).join('; ')
 const year = String(new Date().getFullYear())
 const phoneHref = contact?.phone?.replace(/[^\d+]/g, '')
 const hasContact = Boolean(contact?.address || contact?.phone || contact?.email)
@@ -59,7 +78,7 @@ const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
 ---
 <!-- The cookie settings control is a button, not a link: the Consent component's listener reopens its bar on any [data-kit-consent-open]. -->
 <footer class={root()}>
-  <div class={inner()} data-kit-footer style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
+  <div class:list={[inner(), linkSize && '[&_nav_a]:text-[length:var(--footer-link-size)]']} data-kit-footer style={vars || undefined}>
     <div class="flex flex-col gap-3">
       <p class="text-base font-semibold" data-kit-brand>{siteName}</p>
       {tagline && <p class={muted()} data-kit-tagline>{tagline}</p>}

package/components/footer/fixtures.json

@@ -3,5 +3,7 @@
   { "name": "columns-inverse", "props": { "siteName": "Northwind Studio", "tagline": "Calm, fast websites for teams who write.", "layout": "columns", "tone": "inverse", "copyright": "© 2026 Northwind Studio", "columns": [{ "title": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Team", "href": "/about/team/" }] }, { "title": "Journal", "links": [{ "label": "Guides", "href": "/category/guides/" }, { "label": "News", "href": "/category/news/" }] }, { "title": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }], "social": [{ "label": "GitHub", "href": "https://github.com/contentrain" }, { "label": "Mastodon", "href": "https://mastodon.social/@contentrain" }] } },
   { "name": "muted", "props": { "siteName": "Northwind", "tone": "muted", "copyright": "© 2026 Northwind", "links": [{ "label": "Imprint", "href": "/imprint/" }] } },
   { "name": "centered", "props": { "siteName": "Golden Agency", "tagline": "Websites for makers", "align": "center", "copyright": "© 2026 Golden Agency", "links": [{ "label": "Services", "href": "/services/" }, { "label": "Contact", "href": "/contact/" }], "social": [{ "label": "Instagram", "href": "https://instagram.com/" }] } },
-  { "name": "consent-settings", "props": { "siteName": "Golden Agency", "copyright": "© 2026 Golden Agency", "consentLabel": "Cookie settings", "links": [{ "label": "Privacy", "href": "/privacy/" }] } }
+  { "name": "consent-settings", "props": { "siteName": "Golden Agency", "copyright": "© 2026 Golden Agency", "consentLabel": "Cookie settings", "links": [{ "label": "Privacy", "href": "/privacy/" }] } },
+  { "name": "columns-end", "props": { "siteName": "Golden Works", "tagline": "Websites for makers", "layout": "columns", "pack": "end", "packGap": "128px", "linkSize": "17.88px", "copyright": "© 2026 Golden Works", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }, { "label": "Press", "href": "/press/" }] }] } },
+  { "name": "columns-end-row", "props": { "siteName": "Golden Works", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "48px", "linkSize": "17.88px", "copyright": "© 2026 Golden Works", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } }
 ]

package/components/footer/meta.json

@@ -32,6 +32,22 @@
       ],
       "default": "start",
       "description": "start: brand and links to the sides (left-aligned on phones). center: everything centred in one column, as themes with a centred footer print it."
+    },
+    "pack": {
+      "options": [
+        "spread",
+        "end"
+      ],
+      "default": "spread",
+      "description": "columns layout only. spread: the link columns share the footer's width after the brand column. end: they are packed at the end edge at their own width, as a theme whose footer is the brand left and its menus on the right."
+    },
+    "narrow": {
+      "options": [
+        "stack",
+        "row"
+      ],
+      "default": "stack",
+      "description": "Packed columns only, below the md breakpoint. stack: one column. row: still side by side from the start edge, under the brand."
     }
   },
   "props": {
@@ -119,6 +135,18 @@
     "navLabel": {
       "type": "string",
       "description": "Accessible name of the footer navigation (ui-strings nav.footer)."
+    },
+    "packGap": {
+      "type": "string",
+      "description": "Packed columns only: the space between columns, a CSS length such as 98px."
+    },
+    "packGapNarrow": {
+      "type": "string",
+      "description": "Packed columns in a row only: the space between them below the md breakpoint, a CSS length."
+    },
+    "linkSize": {
+      "type": "string",
+      "description": "Font size of the footer's links, a CSS length such as 17.88px; absent, the footer's own."
     }
   },
   "slots": {},

package/mapping/gutenberg.json

@@ -552,7 +552,11 @@
       },
       "when": {
         "position": "first",
-        "columns": 1
+        "columns": 1,
+        "order": [
+          "title",
+          "media"
+        ]
       },
       "slots": {
         "title": {
@@ -567,11 +571,16 @@
         "button": {
           "match": "core/button",
           "max": 2
+        },
+        "media": {
+          "match": "core/image",
+          "max": 1
         }
       },
       "props": {
         "heading": "@title dom:",
-        "lead": "@lead dom:"
+        "lead": "@lead dom:",
+        "image": "@media img:img"
       },
       "into": "actions",
       "each": "@button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.19.0",
+  "version": "0.20.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.37.0"
+    "@contentrain/types": "1.38.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",