@contentrain/astro-kit 0.21.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": [
@@ -2510,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": [
@@ -3180,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": [
@@ -3291,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"
       ]
@@ -3408,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/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.21.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.39.0"
+    "@contentrain/types": "1.40.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",