@contentrain/astro-kit 0.23.6 → 0.24.0

package/catalog.json

@@ -1280,6 +1280,10 @@
           "type": "string",
           "description": "Font size of the footer's links, a CSS length such as 17.88px; absent, the footer's own."
         },
+        "linkSizeNarrow": {
+          "type": "string",
+          "description": "Font size of the footer's links below the md breakpoint, a CSS length such as 16.4px; absent, linkSize holds at every width."
+        },
         "border": {
           "type": "boolean",
           "content": false,
@@ -1308,7 +1312,8 @@
       },
       "a11y": "One <footer> landmark; each link group is a <nav> named by its title. Social links open in a new tab with rel=me.",
       "files": [
-        "Footer.astro"
+        "Footer.astro",
+        "footer.ts"
       ]
     },
     {

package/components/footer/Footer.astro

@@ -3,6 +3,7 @@
 // links and the copyright line.
 import { tv } from 'tailwind-variants'
 import type { LinkInput } from '../_shared/types'
+import { footerLinkSizeClasses, footerVars } from './footer'
 
 const footer = tv({
   slots: {
@@ -67,14 +68,16 @@ interface Props {
   packGapNarrow?: string | undefined
   /** The links' font size, a CSS length (`17.88px`); absent, the footer's own. */
   linkSize?: string | undefined
+  /** The links' font size below `md`, a CSS length; absent, `linkSize` holds at every width. */
+  linkSizeNarrow?: string | undefined
   /** A border on the footer's top side: absent, the default tone has one and the others do not. */
   border?: boolean | undefined
 }
 
-const { siteName, tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align, pack, packGap, narrow, packGapNarrow, linkSize, border } = Astro.props
+const { siteName, tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align, pack, packGap, narrow, packGapNarrow, linkSize, linkSizeNarrow, border } = Astro.props
 const { root, inner, muted, link } = footer({ layout, tone, align, pack: layout === 'columns' ? pack : undefined, narrow: layout === 'columns' && pack === 'end' ? narrow : undefined, border: (border ?? (tone ?? 'default') === 'default') ? 'on' : 'off' })
 // 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 vars = footerVars({ layout, columnCount: columns.length, pack, narrow, packGap, packGapNarrow, linkSize, linkSizeNarrow })
 const year = String(new Date().getFullYear())
 const phoneHref = contact?.phone?.replace(/[^\d+]/g, '')
 const hasContact = Boolean(contact?.address || contact?.phone || contact?.email)
@@ -84,7 +87,7 @@ const hasBottom = Boolean(line || consentLabel)
 ---
 <!-- 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:list={[inner(), linkSize && '[&_nav_a]:text-[length:var(--footer-link-size)]']} data-kit-footer style={vars || undefined}>
+  <div class:list={[inner(), ...footerLinkSizeClasses({ linkSize, linkSizeNarrow })]} 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

@@ -5,5 +5,6 @@
   { "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": "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" }] }] } }
+  { "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" }] }] } },
+  { "name": "columns-end-row-narrow-size", "props": { "siteName": "Golden Works", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "48px", "linkSize": "17.88px", "linkSizeNarrow": "16.4px", "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/footer.ts

@@ -0,0 +1,34 @@
+export interface FooterVarsInput {
+  layout: 'simple' | 'columns'
+  columnCount: number
+  pack?: 'spread' | 'end' | undefined
+  narrow?: 'stack' | 'row' | undefined
+  packGap?: string | undefined
+  packGapNarrow?: string | undefined
+  linkSize?: string | undefined
+  linkSizeNarrow?: string | undefined
+}
+
+/**
+ * The custom properties the packed columns and sized links read, as one `style` value (empty: none). `linkSizeNarrow` is
+ * its own property, applied below `md` by the class below whether the columns stack or stay in a row.
+ */
+export function footerVars(i: FooterVarsInput): string {
+  const columns = i.layout === 'columns'
+  const packed = columns && i.pack === 'end'
+  return [
+    columns ? `--footer-columns: ${Math.max(i.columnCount, 1)}` : '',
+    packed && i.packGap ? `--footer-gap: ${i.packGap}` : '',
+    packed && i.narrow === 'row' && i.packGapNarrow ? `--footer-gap-narrow: ${i.packGapNarrow}` : '',
+    i.linkSize ? `--footer-link-size: ${i.linkSize}` : '',
+    i.linkSizeNarrow ? `--footer-link-size-narrow: ${i.linkSizeNarrow}` : '',
+  ].filter(Boolean).join('; ')
+}
+
+/** The link-size classes: the wide size everywhere, the narrow one (when given) overriding it below `md`. */
+export function footerLinkSizeClasses(i: Pick<FooterVarsInput, 'linkSize' | 'linkSizeNarrow'>): string[] {
+  return [
+    i.linkSize ? '[&_nav_a]:text-[length:var(--footer-link-size)]' : '',
+    i.linkSizeNarrow ? 'max-md:[&_nav_a]:text-[length:var(--footer-link-size-narrow)]' : '',
+  ].filter(Boolean)
+}

package/components/footer/meta.json

@@ -148,6 +148,10 @@
       "type": "string",
       "description": "Font size of the footer's links, a CSS length such as 17.88px; absent, the footer's own."
     },
+    "linkSizeNarrow": {
+      "type": "string",
+      "description": "Font size of the footer's links below the md breakpoint, a CSS length such as 16.4px; absent, linkSize holds at every width."
+    },
     "border": {
       "type": "boolean",
       "content": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.23.6",
+  "version": "0.24.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.47.0"
+    "@contentrain/types": "1.48.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",