@contentrain/astro-kit 0.3.1 → 0.5.0

package/README.md

@@ -66,6 +66,8 @@ theme applies them to the kit's markers, and only when the site sets them:
 - `--text-body`: `[data-kit-text]`, the lead and body paragraphs of hero, CTA
   and card grid.
 - `--text-nav`: the header navigation, `[data-cr-part="nav-header"]`.
+- `--text-footer`: the footer's text and links, `[data-kit-footer]` (the kit's
+  own size is `text-sm`).
 - `--spacing-section`: the distance between two consecutive sections; each
   `[data-kit-section]` gets half of it as vertical padding, except
   where `data-kit-spacing="none"`.

package/catalog.json

@@ -22,6 +22,7 @@
     "--radius-image",
     "--spacing-gutter",
     "--text-nav",
+    "--text-footer",
     "--text-heading-1",
     "--text-heading-2",
     "--text-heading-3",
@@ -563,7 +564,7 @@
             "plain"
           ],
           "default": "lines",
-          "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes (WordPress's details block)."
+          "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes, questions at the body size (WordPress's details block)."
         },
         "tone": {
           "options": [
@@ -739,7 +740,7 @@
         },
         "copyright": {
           "type": "string",
-          "description": "Copyright line; defaults to © <year> <siteName>."
+          "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>."
         },
         "navLabel": {
           "type": "string",
@@ -937,6 +938,19 @@
           "required": true,
           "description": "Site title (site.title)."
         },
+        "tagline": {
+          "type": "string",
+          "description": "A line under the site name, as themes that print the tagline in the header do (site.tagline)."
+        },
+        "brandSize": {
+          "type": "string",
+          "description": "The site name's size where the source theme sets its own (a CSS length)."
+        },
+        "linkNav": {
+          "type": "boolean",
+          "default": false,
+          "description": "The navigation in the site's link colour, as themes that colour every link do."
+        },
         "logo": {
           "type": "object",
           "fields": {
@@ -1223,6 +1237,14 @@
           ],
           "default": "compact",
           "description": "Gap and text size of the inline list."
+        },
+        "color": {
+          "options": [
+            "current",
+            "link"
+          ],
+          "default": "current",
+          "description": "current: the surrounding text, dimmed until hovered. link: the site's link colour (--color-link, else the accent) at full strength."
         }
       },
       "props": {
@@ -1575,6 +1597,11 @@
           "max": 3,
           "default": 2,
           "description": "Title heading level in the page outline."
+        },
+        "linkTitle": {
+          "type": "boolean",
+          "default": false,
+          "description": "The title in the site's link colour (--color-link), as themes that colour every link do."
         }
       },
       "slots": {},

package/components/faq/Faq.astro

@@ -26,7 +26,7 @@ const faq = tv({
       lines: { list: 'divide-y divide-line border-y border-line' },
       cards: { list: 'gap-3', item: 'rounded-card border border-line px-5', summary: 'py-5' },
       // WordPress's details block: the browser's own disclosure triangle, no rules or box.
-      plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-base [font-weight:inherit] [&::-webkit-details-marker]:inline', marker: 'hidden', answer: 'pt-2 pl-5' },
+      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 pl-5' },
     },
     tone: { default: {}, muted: { item: 'bg-surface' }, inverse: { answer: 'prose-invert' }, accent: { answer: 'prose-invert' } },
   },

package/components/faq/meta.json

@@ -6,7 +6,7 @@
   "uses": [],
   "shared": ["Section.astro"],
   "variants": {
-    "style": { "options": ["lines", "cards", "plain"], "default": "lines", "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes (WordPress's details block)." },
+    "style": { "options": ["lines", "cards", "plain"], "default": "lines", "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes, questions at the body size (WordPress's details block)." },
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background." }
   },
   "props": {

package/components/footer/Footer.astro

@@ -33,7 +33,7 @@ interface Props {
   /** A single row of links (the footer menu). */
   links?: LinkInput[] | undefined
   social?: LinkInput[] | undefined
-  /** The copyright line, e.g. "© 2026 Northwind Studio". */
+  /** The copyright line, e.g. "© 2026 Northwind Studio"; `{year}` is the current year. */
   copyright?: string | undefined
   /** Accessible name of the footer navigation ("Footer"). */
   navLabel?: string | undefined
@@ -43,10 +43,11 @@ interface Props {
 
 const { siteName, tagline, columns = [], links = [], social = [], copyright, navLabel = 'Footer', layout = 'simple', tone } = Astro.props
 const { root, inner, muted, link } = footer({ layout, tone })
-const line = copyright ?? `© ${new Date().getFullYear()} ${siteName}`
+const year = String(new Date().getFullYear())
+const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
 ---
 <footer class={root()}>
-  <div class={inner()} style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
+  <div class={inner()} data-kit-footer style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : 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/meta.json

@@ -93,7 +93,7 @@
     },
     "copyright": {
       "type": "string",
-      "description": "Copyright line; defaults to © <year> <siteName>."
+      "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>."
     },
     "navLabel": {
       "type": "string",

package/components/header/Header.astro

@@ -31,6 +31,12 @@ const header = tv({
 
 interface Props {
   siteName: string
+  /** A line under the site name, as themes that print the site's tagline in the header do. */
+  tagline?: string | undefined
+  /** The site name's size, where the source theme sets its own (a CSS length). */
+  brandSize?: string | undefined
+  /** The navigation in the site's link colour, as themes that colour every link do (Hello Elementor). */
+  linkNav?: boolean | undefined
   logo?: ImageInput | undefined
   /** Show the site name next to the logo. */
   showName?: boolean | undefined
@@ -45,17 +51,20 @@ interface Props {
   position?: 'static' | 'sticky' | undefined
 }
 
-const { siteName, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
+const { siteName, tagline, brandSize, linkNav, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position })
 ---
 <header class={root()}>
   <div class={inner()}>
-    <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} data-kit-brand>
-      {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
-      {showName && <span>{siteName}</span>}
-    </a>
+    <div class="flex flex-col gap-1">
+      <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+        {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
+        {showName && <span>{siteName}</span>}
+      </a>
+      {tagline && <p class="opacity-75" data-kit-tagline>{tagline}</p>}
+    </div>
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto']}>
-      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" align={layout === 'centered' ? 'center' : 'end'} />
+      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
     </div>
   </div>

package/components/header/meta.json

@@ -12,6 +12,9 @@
   },
   "props": {
     "siteName": { "type": "string", "required": true, "description": "Site title (site.title)." },
+    "tagline": { "type": "string", "description": "A line under the site name, as themes that print the tagline in the header do (site.tagline)." },
+    "brandSize": { "type": "string", "description": "The site name's size where the source theme sets its own (a CSS length)." },
+    "linkNav": { "type": "boolean", "default": false, "description": "The navigation in the site's link colour, as themes that colour every link do." },
     "logo": { "type": "object", "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } }, "description": "Logo image (site.logo)." },
     "showName": { "type": "boolean", "default": true, "description": "Show the site name next to the logo." },
     "homeHref": { "type": "url", "default": "/", "description": "Where the brand links." },

package/components/nav/Nav.astro

@@ -8,7 +8,7 @@ import type { NavItem } from '../_shared/types'
 const nav = tv({
   slots: {
     list: 'hidden items-center md:flex',
-    link: 'text-current no-underline opacity-80 hover:opacity-100 aria-[current=page]:font-semibold aria-[current=page]:opacity-100',
+    link: 'no-underline aria-[current=page]:font-semibold',
     // hidden, not invisible: a closed submenu takes no space, so one under the last item cannot widen the page.
     sub: 'absolute top-full z-30 hidden min-w-48 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg group-hover:block group-focus-within:block',
     toggle: 'inline-flex cursor-pointer list-none items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-current/10 md:hidden [&::-webkit-details-marker]:hidden',
@@ -17,8 +17,14 @@ const nav = tv({
     // Submenus open towards the page: leftwards under an end-aligned menu.
     align: { start: { list: 'justify-start', sub: 'left-0' }, end: { list: 'justify-end', sub: 'right-0' }, center: { list: 'justify-center', sub: 'left-0' } },
     density: { compact: { list: 'gap-5 text-sm' }, comfortable: { list: 'gap-8 text-base' } },
+    // current: the surrounding text, dimmed until hovered. link: the site's link colour at full strength, as themes that
+    // colour every link draw their menu; the toggle keeps the surrounding text.
+    color: {
+      current: { link: 'text-current opacity-80 hover:opacity-100 aria-[current=page]:opacity-100' },
+      link: { link: 'text-[color:var(--color-link,var(--color-accent))]' },
+    },
   },
-  defaultVariants: { align: 'end', density: 'compact' },
+  defaultVariants: { align: 'end', density: 'compact', color: 'current' },
 })
 
 interface Props {
@@ -32,14 +38,15 @@ interface Props {
   mobile?: 'popover' | 'details' | undefined
   align?: 'start' | 'end' | 'center' | undefined
   density?: 'compact' | 'comfortable' | undefined
+  color?: 'current' | 'link' | undefined
   /** Unique per page when a page has two navigations. */
   id?: string | undefined
   /** What the navigation is, for checks that find a page's parts (`data-cr-part`, e.g. "nav-header"). */
   part?: string | undefined
 }
 
-const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', align, density, id = 'site-nav', part } = Astro.props
-const { list, link, sub, toggle } = nav({ align, density })
+const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', align, density, color, id = 'site-nav', part } = Astro.props
+const { list, link, sub, toggle } = nav({ align, density, color })
 const current = Astro.url.pathname
 const drawer = `${id}-drawer`
 ---

package/components/nav/fixtures.json

@@ -61,6 +61,7 @@
     "props": {
       "id": "fx-nav-c",
       "align": "center",
+      "color": "link",
       "items": [
         {
           "label": "Work",

package/components/nav/meta.json

@@ -32,6 +32,14 @@
       ],
       "default": "compact",
       "description": "Gap and text size of the inline list."
+    },
+    "color": {
+      "options": [
+        "current",
+        "link"
+      ],
+      "default": "current",
+      "description": "current: the surrounding text, dimmed until hovered. link: the site's link colour (--color-link, else the accent) at full strength."
     }
   },
   "props": {

package/components/post-card/PostCard.astro

@@ -37,9 +37,11 @@ interface Props {
   author?: string | undefined
   headingLevel?: 2 | 3 | undefined
   layout?: 'vertical' | 'horizontal' | 'minimal' | 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 } = Astro.props
+const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, linkTitle } = Astro.props
 const date = rawDate === undefined ? undefined : new Date(rawDate)
 const slots = card({ layout })
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
@@ -58,7 +60,7 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
         {date && <time datetime={date.toISOString()}>{date.toLocaleDateString(locale, { dateStyle: 'long', timeZone: 'UTC' })}</time>}
       </p>
     )}
-    <Heading class={slots.title()}>
+    <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>
     {excerpt && <p class={slots.excerpt()}>{excerpt}</p>}

package/components/post-card/meta.json

@@ -17,7 +17,8 @@
     "image": { "type": "object", "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } }, "description": "Cover (posts.cover → media)." },
     "category": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } }, "description": "Primary category and its archive." },
     "author": { "type": "string", "description": "Author name (posts.author → authors.name)." },
-    "headingLevel": { "type": "integer", "min": 2, "max": 3, "default": 2, "description": "Title heading level in the page outline." }
+    "headingLevel": { "type": "integer", "min": 2, "max": 3, "default": 2, "description": "Title heading level in the page outline." },
+    "linkTitle": { "type": "boolean", "default": false, "description": "The title in the site's link colour (--color-link), as themes that colour every link do." }
   },
   "slots": {},
   "js": "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.3.1",
+  "version": "0.5.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.27.0"
+    "@contentrain/types": "1.29.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",