@contentrain/astro-kit 0.20.0 → 0.21.1

package/catalog.json

@@ -276,7 +276,7 @@
           "max": 3,
           "default": 2,
           "content": false,
-          "description": "Level of the section heading; card titles are one below."
+          "description": "Level of the section heading; card titles are one below, or at this level when there is no title."
         }
       },
       "slots": {},
@@ -1098,7 +1098,7 @@
           "divi/et_pb_blurb"
         ]
       },
-      "a11y": "A list; icons are decorative (aria-hidden), the title and text carry the meaning. The section is labelled by its heading.",
+      "a11y": "A list; icons are decorative (aria-hidden), the title and text carry the meaning. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading (the list style's are plain text). The section is labelled by its heading.",
       "pattern": {
         "summary": "repeated icon + short title + line of text",
         "signals": [
@@ -1257,7 +1257,7 @@
         },
         "copyright": {
           "type": "string",
-          "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>."
+          "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>; the component also takes false for no line (the cookie settings control stays)."
         },
         "consentLabel": {
           "type": "string",
@@ -1278,6 +1278,11 @@
         "linkSize": {
           "type": "string",
           "description": "Font size of the footer's links, a CSS length such as 17.88px; absent, the footer's own."
+        },
+        "border": {
+          "type": "boolean",
+          "content": false,
+          "description": "A border on the footer's top side; absent, the default tone has one and the others do not."
         }
       },
       "slots": {},
@@ -2505,7 +2510,7 @@
           "divi/et_pb_pricing_tables"
         ]
       },
-      "a11y": "Plans are a <ul>; each name is an <h3>. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
+      "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
       "pattern": {
         "summary": "repeated plan units: name + price + feature list + button",
         "signals": [
@@ -3175,7 +3180,7 @@
           "divi/et_pb_blurb"
         ]
       },
-      "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3>. The section is labelled by its heading when it has one.",
+      "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one.",
       "pattern": {
         "summary": "ordered sequence: numbered title + short text units",
         "signals": [
@@ -3286,7 +3291,7 @@
           "classic/tabs"
         ]
       },
-      "a11y": "Zag.js tabs: role=tablist/tab/tabpanel with aria-selected, aria-controls and aria-labelledby; arrow keys (per orientation), Home and End move between tabs. Before the script runs every panel is visible with its own h3 title; after, the titles become screen-reader-only and the tabs label the panels.",
+      "a11y": "Zag.js tabs: role=tablist/tab/tabpanel with aria-selected, aria-controls and aria-labelledby; arrow keys (per orientation), Home and End move between tabs. Before the script runs every panel is visible with its own title (an h3 under the section's h2, an h2 when there is no heading); after, the titles become screen-reader-only and the tabs label the panels.",
       "files": [
         "Tabs.astro"
       ]
@@ -3403,7 +3408,7 @@
           "divi/et_pb_team_member"
         ]
       },
-      "a11y": "Members are a <ul>; each name is an <h3>, and a linked member's link text is the name. A portrait's text defaults to the name. The section is labelled by its heading when it has one.",
+      "a11y": "Members are a <ul>; each name is an <h3> under the section's <h2> (an <h2> when the section has no heading), and a linked member's link text is the name. A portrait's text defaults to the name. The section is labelled by its heading when it has one.",
       "pattern": {
         "summary": "repeated person units: portrait + name + role",
         "signals": [

package/components/card-grid/CardGrid.astro

@@ -44,7 +44,7 @@ interface Props {
   title?: string | undefined
   intro?: string | undefined
   items: Item[]
-  /** Heading level of the section title; card titles are one level below. */
+  /** Heading level of the section title; card titles are one level below, or at this level when there is no title. */
   headingLevel?: 2 | 3 | undefined
   columns?: '2' | '3' | '4' | undefined
   style?: 'plain' | 'bordered' | 'elevated' | undefined
@@ -57,7 +57,8 @@ const { list, card, media, title: cardTitle, text } = grid({ columns, style, ali
 // Accent backgrounds have the least contrast headroom: text on them is never dimmed.
 const dim = tone === 'accent' ? 'opacity-100' : undefined
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
-const CardHeading = `h${headingLevel + 1}` as 'h3' | 'h4'
+// One level under the section title, or the title's level when there is none.
+const CardHeading = `h${title ? headingLevel + 1 : headingLevel}` as 'h2' | 'h3' | 'h4'
 const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}` : undefined
 ---
 <Section tone={tone} aria-labelledby={headingId}>

package/components/card-grid/meta.json

@@ -107,7 +107,7 @@
       "max": 3,
       "default": 2,
       "content": false,
-      "description": "Level of the section heading; card titles are one below."
+      "description": "Level of the section heading; card titles are one below, or at this level when there is no title."
     }
   },
   "slots": {},

package/components/feature-list/FeatureList.astro

@@ -64,7 +64,8 @@ const { heading, intro, items, columns, style = 'icon', tone, id } = Astro.props
 const s = list({ columns, style, tone })
 const headingId = heading && id ? `${id}-title` : undefined
 const pathOf = (item: Item) => (style !== 'check' && item.icon && icons[item.icon]) || icons.check
-const Title = style === 'list' ? 'span' : 'h3'
+// A plain list's items are not headings; otherwise one level under the section heading, or the section's when there is none.
+const Title = style === 'list' ? 'span' : heading ? 'h3' : 'h2'
 ---
 <Section tone={tone} id={id} aria-labelledby={headingId}>
   {(heading || intro) && (

package/components/feature-list/meta.json

@@ -106,7 +106,7 @@
       "divi/et_pb_blurb"
     ]
   },
-  "a11y": "A list; icons are decorative (aria-hidden), the title and text carry the meaning. The section is labelled by its heading.",
+  "a11y": "A list; icons are decorative (aria-hidden), the title and text carry the meaning. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading (the list style's are plain text). The section is labelled by its heading.",
   "pattern": {
     "summary": "repeated icon + short title + line of text",
     "signals": [

package/components/footer/Footer.astro

@@ -17,10 +17,12 @@ const footer = tv({
       columns: { inner: 'grid gap-10 md:grid-cols-[2fr_repeat(var(--footer-columns),1fr)] md:py-16' },
     },
     tone: {
-      default: { root: 'border-t border-line bg-surface text-ink' },
+      default: { root: 'bg-surface text-ink' },
       muted: { root: 'bg-surface-muted text-ink' },
       inverse: { root: 'bg-ink text-surface' },
     },
+    // The border on the footer's top side: the default tone's own unless `border` says otherwise.
+    border: { on: { root: 'border-t border-line' }, off: {} },
     align: { start: {}, center: { inner: 'items-center justify-items-center text-center md:items-center [&_ul]:justify-center' } },
     // The `columns` layout's link columns: spread from the brand column over the footer's width, or packed at the end
     // edge at their own width (a theme whose footer is the brand left and its menus on the right).
@@ -33,7 +35,7 @@ const footer = tv({
     { layout: 'columns', pack: 'end', class: { inner: 'md:grid-cols-[1fr_repeat(var(--footer-columns),auto)] md:gap-x-[var(--footer-gap,2.5rem)] md:[&>div:first-child]:col-span-1' } },
     { layout: 'columns', pack: 'end', narrow: 'row', class: { inner: '[&>div:first-child]:col-span-full' } },
   ],
-  defaultVariants: { layout: 'simple', tone: 'default', align: 'start', pack: 'spread', narrow: 'stack' },
+  defaultVariants: { layout: 'simple', tone: 'default', align: 'start', pack: 'spread', narrow: 'stack', border: 'off' },
 })
 
 interface Props {
@@ -46,8 +48,8 @@ interface Props {
   social?: LinkInput[] | undefined
   /** Contact details printed in an `<address>` block; each is optional, and the block is left out when none is set. */
   contact?: { address?: string | undefined, phone?: string | undefined, email?: string | undefined } | undefined
-  /** The copyright line, e.g. "© 2026 Northwind Studio"; `{year}` is the current year. */
-  copyright?: string | undefined
+  /** The copyright line, e.g. "© 2026 Northwind Studio"; `{year}` is the current year; `false` prints none. Absent: "© year Site". */
+  copyright?: string | false | undefined
   /** Label of the cookie settings link after the copyright line ("Cookie settings"); it reopens the consent bar, so a visitor can withdraw consent as easily as they gave it. Only with a consent bar on the page. */
   consentLabel?: string | undefined
   /** Accessible name of the footer navigation ("Footer"). */
@@ -65,16 +67,20 @@ interface Props {
   packGapNarrow?: string | undefined
   /** The links' font size, a CSS length (`17.88px`); absent, the footer's own. */
   linkSize?: 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 } = Astro.props
-const { root, inner, muted, link } = footer({ layout, tone, align, pack: layout === 'columns' ? pack : undefined, narrow: layout === 'columns' && pack === 'end' ? narrow : 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 { 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 year = String(new Date().getFullYear())
 const phoneHref = contact?.phone?.replace(/[^\d+]/g, '')
 const hasContact = Boolean(contact?.address || contact?.phone || contact?.email)
-const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
+const line = copyright === false ? undefined : copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
+// The line and the cookie settings control share one paragraph; neither: no paragraph.
+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()}>
@@ -89,7 +95,7 @@ const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
           {contact?.email && <a href={`mailto:${contact.email}`} class={link()}>{contact.email}</a>}
         </address>
       )}
-      {layout === 'columns' && <p class:list={[muted(), 'mt-auto pt-6']}>{line}{consentLabel && <> · <button type="button" data-kit-consent-open class={link()}>{consentLabel}</button></>}</p>}
+      {layout === 'columns' && hasBottom && <p class:list={[muted(), 'mt-auto pt-6']}>{line}{consentLabel && <>{line && ' · '}<button type="button" data-kit-consent-open class={link()}>{consentLabel}</button></>}</p>}
     </div>
     {layout === 'columns'
       ? columns.map(column => (
@@ -114,7 +120,7 @@ const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
               </ul>
             </nav>
           )}
-          <p class={muted()}>{line}{consentLabel && <> · <button type="button" data-kit-consent-open class={link()}>{consentLabel}</button></>}</p>
+          {hasBottom && <p class={muted()}>{line}{consentLabel && <>{line && ' · '}<button type="button" data-kit-consent-open class={link()}>{consentLabel}</button></>}</p>}
         </div>
       )}
     {layout === 'columns' && social.length > 0 && (

package/components/footer/meta.json

@@ -126,7 +126,7 @@
     },
     "copyright": {
       "type": "string",
-      "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>."
+      "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>; the component also takes false for no line (the cookie settings control stays)."
     },
     "consentLabel": {
       "type": "string",
@@ -147,6 +147,11 @@
     "linkSize": {
       "type": "string",
       "description": "Font size of the footer's links, a CSS length such as 17.88px; absent, the footer's own."
+    },
+    "border": {
+      "type": "boolean",
+      "content": false,
+      "description": "A border on the footer's top side; absent, the default tone has one and the others do not."
     }
   },
   "slots": {},

package/components/pricing/Pricing.astro

@@ -61,6 +61,8 @@ interface Props {
 const { heading, intro, plans, featuredLabel = 'Most popular', columns, tone, id } = Astro.props
 const s = pricing({ columns, tone })
 const headingId = heading && id ? `${id}-title` : undefined
+// One level under the section heading, or the section's heading when there is none.
+const PlanHeading = heading ? 'h3' : 'h2'
 const features = await Promise.all(plans.map(plan => renderMarkdown(plan.features)))
 ---
 {plans.length > 0 && (
@@ -75,7 +77,7 @@ const features = await Promise.all(plans.map(plan => renderMarkdown(plan.feature
       {plans.map((plan, i) => (
         <li class={s.plan({ class: plan.featured ? 'ring-2 ring-accent shadow-lg md:-my-2 md:py-10' : undefined })}>
           {plan.featured && <p class={s.badge()}>{featuredLabel}</p>}
-          <h3 class={s.name()}>{plan.name}</h3>
+          <PlanHeading class={s.name()}>{plan.name}</PlanHeading>
           <p class={s.price()}>
             <span class={s.amount()}>{plan.price}</span>
             {plan.period && <span class={s.period()}>{plan.period}</span>}

package/components/pricing/meta.json

@@ -120,7 +120,7 @@
       "divi/et_pb_pricing_tables"
     ]
   },
-  "a11y": "Plans are a <ul>; each name is an <h3>. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
+  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
   "pattern": {
     "summary": "repeated plan units: name + price + feature list + button",
     "signals": [

package/components/steps/Steps.astro

@@ -60,6 +60,8 @@ interface Props {
 const { heading, intro, items, layout, style, id } = Astro.props
 const s = steps({ layout, style })
 const headingId = heading && id ? `${id}-title` : undefined
+// One level under the section heading, or the section's heading when there is none.
+const StepHeading = heading ? 'h3' : 'h2'
 ---
 {items.length > 0 && (
   <Section id={id} aria-labelledby={headingId}>
@@ -75,7 +77,7 @@ const headingId = heading && id ? `${id}-title` : undefined
           {step.number && <span class={s.badge()} aria-hidden="true">{step.number}</span>}
           <div class={s.body()}>
             {imageOf(step.image, step.imageAlt) && <div class={s.media()}><KitImage image={imageOf(step.image, step.imageAlt)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
-            <h3 class={s.title()}>{step.title}</h3>
+            <StepHeading class={s.title()}>{step.title}</StepHeading>
             <p class={s.text()} data-kit-text>{step.text}</p>
           </div>
         </li>

package/components/steps/meta.json

@@ -97,7 +97,7 @@
       "divi/et_pb_blurb"
     ]
   },
-  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3>. The section is labelled by its heading when it has one.",
+  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one.",
   "pattern": {
     "summary": "ordered sequence: numbered title + short text units",
     "signals": [

package/components/tabs/Tabs.astro

@@ -52,6 +52,8 @@ interface Props {
 const { items, heading, label, style, orientation = 'horizontal', tone, id = 'tabs' } = Astro.props
 const s = tabs({ style, orientation, tone })
 const headingId = heading ? `${id}-title` : undefined
+// One level under the section heading, or the section's heading when there is none.
+const PanelHeading = heading ? 'h3' : 'h2'
 const value = (i: number) => `tab-${i + 1}`
 ---
 {items.length > 0 && (
@@ -63,7 +65,7 @@ const value = (i: number) => `tab-${i + 1}`
       </div>
       {items.map((item, i) => (
         <div data-part="content" data-value={value(i)} class="min-w-0 flex-1">
-          <h3 class={s.title()}>{item.label}</h3>
+          <PanelHeading class={s.title()}>{item.label}</PanelHeading>
           <div class={s.panel()} set:html={item.content} />
         </div>
       ))}

package/components/tabs/meta.json

@@ -24,5 +24,5 @@
     "divi": ["divi/et_pb_tabs"],
     "classic": ["classic/tabs"]
   },
-  "a11y": "Zag.js tabs: role=tablist/tab/tabpanel with aria-selected, aria-controls and aria-labelledby; arrow keys (per orientation), Home and End move between tabs. Before the script runs every panel is visible with its own h3 title; after, the titles become screen-reader-only and the tabs label the panels."
+  "a11y": "Zag.js tabs: role=tablist/tab/tabpanel with aria-selected, aria-controls and aria-labelledby; arrow keys (per orientation), Home and End move between tabs. Before the script runs every panel is visible with its own title (an h3 under the section's h2, an h2 when there is no heading); after, the titles become screen-reader-only and the tabs label the panels."
 }

package/components/team/Team.astro

@@ -57,6 +57,8 @@ interface Props {
 const { heading, intro, items, columns, style, roleStyle, id } = Astro.props
 const s = team({ columns, style, roleStyle })
 const headingId = heading && id ? `${id}-title` : undefined
+// One level under the section heading, or the section's heading when there is none.
+const NameHeading = heading ? 'h3' : 'h2'
 ---
 {items.length > 0 && (
   <Section id={id} aria-labelledby={headingId}>
@@ -71,11 +73,11 @@ const headingId = heading && id ? `${id}-title` : undefined
         <li class={s.member()}>
           {/* The portrait's text defaults to the name: a photo of a named person is not decoration. */}
           {imageOf(member.image, member.imageAlt ?? member.name) && <div class={s.portrait()}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
-          <h3 class={s.name()}>
+          <NameHeading class={s.name()}>
             {member.href
               ? <a href={member.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent">{member.name}</a>
               : member.name}
-          </h3>
+          </NameHeading>
           {member.role && <p class={s.role()}>{member.role}</p>}
           {member.bio && <p class={s.bio()} data-kit-text>{member.bio}</p>}
         </li>

package/components/team/meta.json

@@ -110,7 +110,7 @@
       "divi/et_pb_team_member"
     ]
   },
-  "a11y": "Members are a <ul>; each name is an <h3>, and a linked member's link text is the name. A portrait's text defaults to the name. The section is labelled by its heading when it has one.",
+  "a11y": "Members are a <ul>; each name is an <h3> under the section's <h2> (an <h2> when the section has no heading), and a linked member's link text is the name. A portrait's text defaults to the name. The section is labelled by its heading when it has one.",
   "pattern": {
     "summary": "repeated person units: portrait + name + role",
     "signals": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "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.38.0"
+    "@contentrain/types": "1.40.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",