@contentrain/astro-kit 0.24.0 → 0.25.0

package/catalog.json

@@ -1711,6 +1711,15 @@
           ],
           "default": "default",
           "description": "default: the layout's own type scale. theme: the heading takes the site's size for its level (`--text-heading-1` for the page-opening hero, `-2` otherwise), as the source's own h1 does under a block theme."
+        },
+        "headingSize": {
+          "options": [
+            "own",
+            "h1",
+            "h2"
+          ],
+          "default": "own",
+          "description": "The level whose site size the heading takes when it is not the level it is written at: h1 on an h2 heading keeps a source's second h1 at the h1 size under a page that keeps one h1. own: the heading's own level under headingScale theme, nothing otherwise. Any other value than own sets the size by itself."
         }
       },
       "props": {

package/components/hero/Hero.astro

@@ -39,6 +39,8 @@ const hero = tv({
     width: { full: {}, content: {} },
     // The heading's size: the layout's own scale, or the site's size for its level (set inline, see ./hero).
     headingScale: { default: {}, theme: {} },
+    // The level whose site size the heading takes when it is not the level it is written at (set inline, see ./hero).
+    headingSize: { own: {}, h1: {}, h2: {} },
   },
   compoundVariants: [
     // After the layout's own heights, so a boxed cover keeps WordPress's 430px default.
@@ -48,7 +50,7 @@ const hero = tv({
     { leadAlign: 'start', class: { lead: 'mx-0 max-w-none self-stretch text-start' } },
     { actionsAlign: 'start', class: { actions: 'justify-start self-stretch' } },
   ],
-  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default' },
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default', headingSize: 'own' },
 })
 
 interface Props {
@@ -74,16 +76,18 @@ interface Props {
   minHeight?: number | undefined
   /** `theme`: the heading takes the site's size for its level (the source's own `h1` size), not the layout's scale. */
   headingScale?: 'default' | 'theme' | undefined
+  /** The level whose site size the heading takes, when it is not the level it is written at (`h1` size on an `h2`: a page keeps one `h1`). `own` (absent): the heading's own level under `theme`, as before. */
+  headingSize?: 'own' | 'h1' | 'h2' | undefined
 }
 
 
-const { heading, level = 1, eyebrow, lead, actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id, minHeight, headingScale } = Astro.props
-const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale })
+const { heading, level = 1, eyebrow, lead, actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id, minHeight, headingScale, headingSize } = Astro.props
+const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize })
 const Heading = level === 1 ? 'h1' : 'h2'
 const headingId = id ? `${id}-title` : undefined
 const cover = layout === 'cover' && image
 const coverHeight = cover ? heightOf(minHeight) : undefined
-const headingStyle = styleOf(headingScale, level)
+const headingStyle = styleOf(headingScale, level, headingSize)
 ---
 {cover && width === 'content'
   ? (

package/components/hero/fixtures.json

@@ -191,5 +191,53 @@
       "minHeight": 520,
       "headingScale": "theme"
     }
+  },
+  {
+    "name": "cover-content-size-h1",
+    "props": {
+      "heading": "Independent cinema, a neighbourhood hall",
+      "lead": "A hundred and twenty seats, fresh popcorn.",
+      "layout": "cover",
+      "actions": [
+        {
+          "label": "This week's programme",
+          "href": "/programme/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-1.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 900
+      },
+      "width": "content",
+      "level": 2,
+      "minHeight": 520,
+      "headingScale": "theme",
+      "headingSize": "h1"
+    }
+  },
+  {
+    "name": "centered-size-h2",
+    "props": {
+      "heading": "Plan a calmer trip",
+      "lead": "Our guides pick fewer places and give each one more time.",
+      "layout": "centered",
+      "tone": "muted",
+      "level": 2,
+      "actions": [
+        {
+          "label": "Browse guides",
+          "href": "/category/guides/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-2.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 700
+      },
+      "headingSize": "h2"
+    }
   }
 ]

package/components/hero/hero.ts

@@ -4,6 +4,12 @@ export const coverHeight = (value: number | undefined): string | undefined => (N
 /**
  * `theme`: the heading's size is the site's for its level, the one the source's own `h1`/`h2` has (`--text-heading-1`,
  * fluid where the theme's is); the layout's scale is the fallback while the site declares none.
+ * `size` names the level whose size the heading takes when that is not the level it is written at: a page keeps one
+ * `h1`, so a source's second `h1` is written as an `h2` and still drawn at the `h1` size. A `size` alone is enough; with
+ * none, the result is what it was before (the heading's own level under `theme`, nothing otherwise).
  */
-export const headingStyle = (scale: 'default' | 'theme' | undefined, level: 1 | 2): string | undefined =>
-  scale === 'theme' ? `font-size: var(--text-heading-${level}, var(--text-5xl)); line-height: var(--leading-heading, 1.2)` : undefined
+export const headingStyle = (scale: 'default' | 'theme' | undefined, level: 1 | 2, size?: 'own' | 'h1' | 'h2' | undefined): string | undefined => {
+  if (scale !== 'theme' && (!size || size === 'own')) return undefined
+  const used = size === 'h1' ? 1 : size === 'h2' ? 2 : level
+  return `font-size: var(--text-heading-${used}, var(--text-5xl)); line-height: var(--leading-heading, 1.2)`
+}

package/components/hero/meta.json

@@ -69,6 +69,15 @@
       ],
       "default": "default",
       "description": "default: the layout's own type scale. theme: the heading takes the site's size for its level (`--text-heading-1` for the page-opening hero, `-2` otherwise), as the source's own h1 does under a block theme."
+    },
+    "headingSize": {
+      "options": [
+        "own",
+        "h1",
+        "h2"
+      ],
+      "default": "own",
+      "description": "The level whose site size the heading takes when it is not the level it is written at: h1 on an h2 heading keeps a source's second h1 at the h1 size under a page that keeps one h1. own: the heading's own level under headingScale theme, nothing otherwise. Any other value than own sets the size by itself."
     }
   },
   "props": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.24.0",
+  "version": "0.25.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.48.0"
+    "@contentrain/types": "1.49.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",