@contentrain/astro-kit 0.22.0 → 0.23.0

package/catalog.json

@@ -1491,6 +1491,31 @@
           "type": "string",
           "description": "The site name's size where the source theme sets its own (a CSS length)."
         },
+        "bordered": {
+          "type": "boolean",
+          "default": true,
+          "description": "The line under the bar on the default tone; false where the source's header draws none."
+        },
+        "brandWeight": {
+          "type": "string",
+          "description": "The site name's weight where the source theme sets its own (a CSS font-weight)."
+        },
+        "brandTracking": {
+          "type": "string",
+          "description": "The site name's letter-spacing where the source theme sets its own (a CSS length, or normal)."
+        },
+        "offsetTop": {
+          "type": "string",
+          "description": "Space above the bar where the source's header has its own (a CSS length)."
+        },
+        "padTop": {
+          "type": "string",
+          "description": "Space inside the bar above its content where the source's header has its own (a CSS length)."
+        },
+        "padBottom": {
+          "type": "string",
+          "description": "Space inside the bar below its content where the source's header has its own (a CSS length)."
+        },
         "linkNav": {
           "type": "boolean",
           "default": false,

package/components/header/Header.astro

@@ -20,13 +20,15 @@ const header = tv({
       'brand-left': { inner: 'justify-start [&>nav]:ms-10' },
     },
     tone: {
-      default: { root: 'border-b border-line bg-surface text-ink' },
+      default: { root: 'bg-surface text-ink' },
       inverse: { root: 'bg-ink text-surface' },
       transparent: { root: 'absolute inset-x-0 top-0 bg-transparent text-surface' },
     },
     position: { static: {}, sticky: { root: 'sticky top-0' } },
+    bordered: { true: {}, false: {} },
   },
-  defaultVariants: { layout: 'split', tone: 'default', position: 'static' },
+  compoundVariants: [{ tone: 'default', bordered: true, class: { root: 'border-b border-line' } }],
+  defaultVariants: { layout: 'split', tone: 'default', position: 'static', bordered: true },
 })
 
 interface Props {
@@ -35,6 +37,15 @@ interface Props {
   tagline?: string | undefined
   /** The site name's size, where the source theme sets its own (a CSS length). */
   brandSize?: string | undefined
+  /** The line under the bar on the default tone; `false` where the source's header draws none. */
+  bordered?: boolean | undefined
+  /** The site name's weight and letter-spacing, where the source theme sets its own (CSS values). */
+  brandWeight?: string | undefined
+  brandTracking?: string | undefined
+  /** Space above the bar, and inside it above and below the content, where the source's header has its own (CSS lengths). */
+  offsetTop?: string | undefined
+  padTop?: string | undefined
+  padBottom?: 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
@@ -51,17 +62,20 @@ interface Props {
   position?: 'static' | 'sticky' | undefined
 }
 
-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 })
+const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
+const { root, inner, brand } = header({ layout, tone, position, bordered })
+const rootStyle = offsetTop ? `margin-top: ${offsetTop}` : undefined
+const innerStyle = [padTop && `padding-top: ${padTop}`, padBottom && `padding-bottom: ${padBottom}`].filter(Boolean).join('; ') || undefined
+const brandStyle = [brandSize && `font-size: ${brandSize}`, brandWeight && `font-weight: ${brandWeight}`, brandTracking && `letter-spacing: ${brandTracking}`].filter(Boolean).join('; ') || undefined
 // A tagline under the name keeps its line on a phone, as themes print it: the navigation wraps below.
 const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
 ---
-<header class={root()}>
-  <div class={inner({ class: wrap })}>
+<header class={root()} style={rootStyle}>
+  <div class={inner({ class: wrap })} style={innerStyle}>
     {tagline
       ? (
         <div class="flex min-w-0 basis-full flex-col gap-1 md:basis-auto">
-          <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+          <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
             {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
             {showName && <span>{siteName}</span>}
           </a>
@@ -69,7 +83,7 @@ const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
         </div>
       )
       : (
-        <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+        <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
           {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
           {showName && <span>{siteName}</span>}
         </a>

package/components/header/meta.json

@@ -14,6 +14,12 @@
     "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)." },
+    "bordered": { "type": "boolean", "default": true, "description": "The line under the bar on the default tone; false where the source's header draws none." },
+    "brandWeight": { "type": "string", "description": "The site name's weight where the source theme sets its own (a CSS font-weight)." },
+    "brandTracking": { "type": "string", "description": "The site name's letter-spacing where the source theme sets its own (a CSS length, or normal)." },
+    "offsetTop": { "type": "string", "description": "Space above the bar where the source's header has its own (a CSS length)." },
+    "padTop": { "type": "string", "description": "Space inside the bar above its content where the source's header has its own (a CSS length)." },
+    "padBottom": { "type": "string", "description": "Space inside the bar below its content where the source's header has 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." },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.22.0",
+  "version": "0.23.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.41.0"
+    "@contentrain/types": "1.42.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",