@contentrain/astro-kit 0.49.2 → 0.50.0

package/catalog.json

@@ -3072,6 +3072,11 @@
           "required": true,
           "description": "Site title (site.title or site.organization)."
         },
+        "homeHref": {
+          "type": "url",
+          "default": "/",
+          "description": "Where the brand (the site name) links: the site's home."
+        },
         "tagline": {
           "type": "string",
           "description": "A line under the name (site.tagline, or the source footer's about text); line breaks are kept, so a credit under it stays its own line."
@@ -3561,7 +3566,7 @@
     {
       "id": "header",
       "name": "Header",
-      "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
+      "description": "Site header: brand (logo and/or name), navigation, an optional call-to-action button and an optional utility row above the bar (phone, mail, address, hours).",
       "category": "chrome",
       "uses": [
         "nav",
@@ -3734,7 +3739,23 @@
               ]
             }
           },
-          "description": "Header button, shown on wide screens."
+          "description": "Header button, on every screen width."
+        },
+        "strip": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "fields": {
+              "label": {
+                "type": "string",
+                "required": true
+              },
+              "href": {
+                "type": "url"
+              }
+            }
+          },
+          "description": "A row above the bar for what the source's header prints next to its menu: a phone number, a mail address, the address, the opening hours. A line with an href is a link (tel:, mailto:, a page). On a phone it folds into the menu drawer after the menu; with no menu it stays above the bar."
         },
         "search": {
           "type": "object",
@@ -4659,6 +4680,22 @@
         "part": {
           "type": "string",
           "description": "What the navigation is, for checks that find a page's parts (data-cr-part), e.g. \"nav-header\"."
+        },
+        "extra": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "fields": {
+              "label": {
+                "type": "string",
+                "required": true
+              },
+              "href": {
+                "type": "url"
+              }
+            }
+          },
+          "description": "Lines after the menu in the narrow-screen menu (a header's phone, address, hours); a line with an href is a link."
         }
       },
       "slots": {},

package/components/footer/Footer.astro

@@ -45,6 +45,8 @@ const footer = tv({
 
 interface Props {
   siteName: string
+  /** Where the brand (the site name) links: the site's home, `/` when absent — a source footer's site title links there. */
+  homeHref?: string | undefined
   tagline?: string | undefined
   /** Link groups for the `columns` layout. `titleHref`: the heading is a link to it (a source heading printed as one). */
   columns?: Array<{ title?: string | undefined, titleHref?: string | undefined, label?: string | undefined, links: LinkInput[] }> | undefined
@@ -86,7 +88,7 @@ interface Props {
   wordmarkOrder?: 'last' | 'first' | undefined
 }
 
-const { siteName, tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align, pack, packGap, narrow, packGapNarrow, linkSize, linkSizeNarrow, border, wordmark, wordmarkOrder } = Astro.props
+const { siteName, homeHref = '/', tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align, pack, packGap, narrow, packGapNarrow, linkSize, linkSizeNarrow, border, wordmark, wordmarkOrder } = 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 = footerVars({ layout, columnCount: columns.length, pack, narrow, packGap, packGapNarrow, linkSize, linkSizeNarrow })
@@ -108,7 +110,7 @@ const mark = wordmark === 'fit' || wordmark === 'crop' ? wordmarkBox(siteName, w
   {mark && wordmarkOrder === 'first' && <div class="container-page pt-10" data-kit-wordmark><svg viewBox={`0 0 1000 ${mark.height}`} class="block h-auto w-full fill-current" aria-hidden="true" focusable="false"><text x="0" y={mark.baseline} textLength="1000" lengthAdjust="spacing" font-size={mark.size} class="[font-family:var(--font-heading,inherit)] [font-weight:var(--font-weight-heading,700)]">{siteName}</text></svg></div>}
   <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>
+      <p class="text-base font-semibold" data-kit-brand><a href={safeHref(homeHref)} class="text-current no-underline hover:underline">{siteName}</a></p>
       {/* Line breaks are kept: an about line and the designer's credit under it ("Web Tasarım: …") stay two lines. */}
       {tagline && <p class={`${muted()} whitespace-pre-line`} data-kit-tagline>{tagline}</p>}
       {hasContact && (

package/components/footer/meta.json

@@ -75,6 +75,11 @@
       "required": true,
       "description": "Site title (site.title or site.organization)."
     },
+    "homeHref": {
+      "type": "url",
+      "default": "/",
+      "description": "Where the brand (the site name) links: the site's home."
+    },
     "tagline": {
       "type": "string",
       "description": "A line under the name (site.tagline, or the source footer's about text); line breaks are kept, so a credit under it stays its own line."

package/components/header/Header.astro

@@ -1,6 +1,6 @@
 ---
-// Site header: brand (logo and/or name), navigation and an optional call to
-// action.
+// Site header: brand (logo and/or name), navigation, an optional call to
+// action and an optional utility row above the bar (phone, mail, address, hours).
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
@@ -63,7 +63,14 @@ interface Props {
   showName?: boolean | undefined
   homeHref?: string | undefined
   items: NavItem[]
+  /** The header's button, on every screen width. */
   action?: ActionInput | undefined
+  /**
+   * A row above the bar for what the source's header prints next to its menu: a phone number, a mail address, the
+   * address, the opening hours. A line with an `href` is a link (`tel:`, `mailto:`, a page). On a phone the row folds
+   * into the menu drawer, after the menu; with no menu it stays above the bar.
+   */
+  strip?: Array<{ label: string, href?: string | undefined }> | undefined
   /** A search field in the bar (a GET form to the site's search page); below the bar until lg. */
   search?: { label?: string | undefined, placeholder?: string | undefined, submitLabel?: string | undefined, action?: string | undefined } | undefined
   navLabel?: string | undefined
@@ -76,7 +83,7 @@ interface Props {
   menu?: 'flyout' | 'mega' | undefined
 }
 
-const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, brandColor, logo, showName = true, homeHref = '/', items, action, search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.props
+const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, brandColor, logo, showName = true, homeHref = '/', items, action, strip = [], search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position, bordered })
 // The header's search field: `header-search` on a page, a second header's its own (its label points at its own input).
 const searchId = search ? instanceId(Astro.locals, undefined, 'header-search') : undefined
@@ -84,11 +91,22 @@ const rootStyle = offsetTop ? `margin-top: ${offsetTop}` : undefined
 const innerStyle = [padTop && `padding-top: ${padTop}`, padBottom && `padding-bottom: ${padBottom}`].filter(Boolean).join('; ') || undefined
 const brandColour = brandColorValue(brandColor)
 const brandStyle = [brandSize && `font-size: ${brandSize}`, brandWeight && `font-weight: ${brandWeight}`, brandTracking && `letter-spacing: ${brandTracking}`, brandColour && `color: ${brandColour}`].filter(Boolean).join('; ') || undefined
+// The row above the bar folds into the drawer only where there is one: Nav prints nothing without items.
+const stripFolds = items.length > 0
 // A tagline under the name keeps its line on a phone, as themes print it: the navigation wraps below.
 // The search field sits in the bar from lg; at md the bar already holds the navigation, so the field keeps its own row.
 const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-nowrap' : undefined
 ---
 <header class={root()} style={rootStyle}>
+  {strip.length > 0 && (
+    <div class:list={['border-b border-current/10 text-sm', stripFolds && 'hidden md:block']} data-kit-strip>
+      <ul class={`container-page flex flex-wrap items-center justify-end gap-x-6 gap-y-1 py-2 ${muted}`}>
+        {strip.map(line => (
+          <li>{line.href ? <a href={safeHref(line.href)} class="text-current no-underline hover:underline">{line.label}</a> : line.label}</li>
+        ))}
+      </ul>
+    </div>
+  )}
   <div class={inner({ class: wrap })} style={innerStyle}>
     {tagline
       ? (
@@ -112,8 +130,8 @@ const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-
       </div>
     )}
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ms-auto']}>
-      <Nav items={items} menu={menu} 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" />}
+      <Nav items={items} menu={menu} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" extra={stripFolds ? strip : undefined} color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
+      {action && <Button action={action} size="sm" />}
     </div>
   </div>
 </header>

package/components/header/fixtures.json

@@ -20,7 +20,16 @@
       "action": {
         "label": "Subscribe",
         "href": "/subscribe/"
-      }
+      },
+      "strip": [
+        {
+          "label": "(417) 522-7711",
+          "href": "tel:+14175227711"
+        },
+        {
+          "label": "Mon–Fri 9:00–17:00"
+        }
+      ]
     }
   },
   {

package/components/header/meta.json

@@ -1,7 +1,7 @@
 {
   "id": "header",
   "name": "Header",
-  "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
+  "description": "Site header: brand (logo and/or name), navigation, an optional call-to-action button and an optional utility row above the bar (phone, mail, address, hours).",
   "category": "chrome",
   "uses": ["nav", "search-box"],
   "shared": ["Button.astro", "KitImage.astro", "image-widths.ts", "instance-id.ts", "muted.ts", "safe-url.ts", "types.ts"],
@@ -27,7 +27,8 @@
     "showName": { "type": "boolean", "default": true, "description": "Show the site name next to the logo." },
     "homeHref": { "type": "url", "default": "/", "description": "Where the brand links." },
     "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "children": { "type": "array" } } }, "description": "Primary menu (menus → menu-items)." },
-    "action": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } }, "description": "Header button, shown on wide screens." },
+    "action": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } }, "description": "Header button, on every screen width." },
+    "strip": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url" } } }, "description": "A row above the bar for what the source's header prints next to its menu: a phone number, a mail address, the address, the opening hours. A line with an href is a link (tel:, mailto:, a page). On a phone it folds into the menu drawer after the menu; with no menu it stays above the bar." },
     "search": { "type": "object", "fields": { "label": { "type": "string" }, "placeholder": { "type": "string" }, "submitLabel": { "type": "string" }, "action": { "type": "url" } }, "description": "A search field in the bar: a GET form to the site's search page (default /search); below the bar on a phone." },
     "navLabel": { "type": "string", "description": "Accessible name of the navigation (ui-strings nav.label)." },
     "menuLabel": { "type": "string", "description": "Narrow-screen toggle text (ui-strings nav.menu)." },

package/components/nav/Nav.astro

@@ -50,11 +50,13 @@ interface Props {
   color?: 'current' | 'link' | undefined
   /** Unique per page when a page has two navigations. */
   id?: string | undefined
+  /** Lines after the menu in the narrow-screen menu (a header's phone, address, hours); a line with an `href` is a link. */
+  extra?: Array<{ label: string, href?: string | undefined }> | 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', menu, align, density, color, id: givenId, part } = Astro.props
+const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', menu, align, density, color, extra = [], id: givenId, part } = Astro.props
 // Two on one page never share an id: their labels and controls would point into each other.
 const id = instanceId(Astro.locals, givenId, 'site-nav')
 const { list, link, sub, toggle } = nav({ menu, align, density, color })
@@ -117,6 +119,13 @@ const real = (href: string | undefined) => !!href && href !== '#'
                   {item.children && item.children.length > 0 && <NavTree items={item.children} current={current} kind="drawer" />}
                 </li>
               ))}
+              {extra.map((line, index) => (
+                <li class={index === 0 ? 'mt-4 border-t border-line pt-4' : undefined}>
+                  {line.href
+                    ? <a href={safeHref(line.href)} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{line.label}</a>
+                    : <span class="block px-3 py-2 text-sm text-ink">{line.label}</span>}
+                </li>
+              ))}
             </ul>
           </div>
         </>
@@ -136,6 +145,13 @@ const real = (href: string | undefined) => !!href && href !== '#'
                 {item.children && item.children.length > 0 && <NavTree items={item.children} current={current} kind="drawer" />}
               </li>
             ))}
+            {extra.map((line, index) => (
+              <li class={index === 0 ? 'mt-2 border-t border-line pt-2' : undefined}>
+                {line.href
+                  ? <a href={safeHref(line.href)} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{line.label}</a>
+                  : <span class="block px-3 py-2 text-sm text-ink">{line.label}</span>}
+              </li>
+            ))}
           </ul>
         </details>
       )}

package/components/nav/meta.json

@@ -97,6 +97,22 @@
     "part": {
       "type": "string",
       "description": "What the navigation is, for checks that find a page's parts (data-cr-part), e.g. \"nav-header\"."
+    },
+    "extra": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url"
+          }
+        }
+      },
+      "description": "Lines after the menu in the narrow-screen menu (a header's phone, address, hours); a line with an href is a link."
     }
   },
   "slots": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.49.2",
+  "version": "0.50.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.75.0"
+    "@contentrain/types": "1.76.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",