@kolkrabbi/kol-component 0.79.0 → 0.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/SectionText.jsx

@@ -21,6 +21,9 @@
  * @param {ReactNode} headline     the heading
  * @param {'pull'|'display-01'|'display-02'|'display-03'|'display-04'|'heading-01'|'heading-02'|'heading-03'|'heading-04'|'heading-05'} [headlineSize='heading-02']
  * @param {string}    [headlineAs='h2']  element for the headline
+ * @param {'auto'|'upper'} [headlineCase='auto']  `upper` = the caps role (`.kol-section-text-caps`) —
+ *                    a title card; the split hero sets it (SectionHeroNoOverrides, 2026-08-26:
+ *                    a ROLE on the molecule, never a hero-side class)
  * @param {ReactNode} body         lede / paragraph(s)
  * @param {ReactNode} actions      row of Buttons / links / Tags
  * @param {'start'|'center'} [align='start']  text-align + item alignment
@@ -52,6 +55,7 @@ export default function SectionText({
   headline,
   headlineSize = 'heading-02',
   headlineAs: Headline = 'h2',
+  headlineCase = 'auto',
   headlineClass,
   body,
   actions,
@@ -76,7 +80,7 @@ export default function SectionText({
       {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
         * `labelClass` is the voice riding beside it */}
       {label && <span className={cls(`kol-section-text-eyebrow ${labelClass}`, 'label')} style={slotStyle.label}>{label}</span>}
-      {headline && <Headline className={cls(headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02']), 'headline')} style={slotStyle.headline}>{headline}</Headline>}
+      {headline && <Headline className={cls(`${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
       {body && (typeof body === 'string' ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p> : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)}
       {children}
       {actions && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}

package/src/organisms/SectionHero.jsx

@@ -4,7 +4,7 @@ import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import ContentMedia from '../molecules/ContentMedia.jsx'
-import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
+import SectionText from '../molecules/SectionText.jsx'
 import FeaturedCarousel from './FeaturedCarousel.jsx'
 
 /* Height presets (SectionHeroRound2, user ruling 2026-08-26): three tiers in
@@ -110,7 +110,8 @@ function MediaLayer({ media }) {
  * @param {string}    height         'full' | '80' | '60' (viewport tiers) · 'lg' | 'md' | 'screen' (aliases) · or a height class string
  * @param {ReactNode} label · headline · body · actions  the composed text (SectionText)
  * @param {object}    slotClass · slotStyle  per-slot class / style, forwarded to SectionText (a consumer's reveal seam)
- * @param {string}    [headlineSize='display-04']
+ * @param {string}    headlineSize   role; defaults per variant — media 'display-04', split 'heading-02'
+ * @param {string}    gap            SectionText's inner rhythm, forwarded as given (no hero default)
  * @param {string}    [panelMaxWidth='max-w-[440px]']  the glass panel's cap on the composed route
  * @param {object}    panelProps     everything else on the glass panel (user ask 2026-08-26):
  *                                   `padding` ('px-6 py-8') · `maxWidth` · `surfaceOpacity`
@@ -146,7 +147,11 @@ export default function SectionHero({
   height = 'lg',
   label,
   headline,
-  headlineSize = 'display-04',
+  /* per-variant DEFAULT only — the hero has no say in the text's voice
+   * (SectionHeroNoOverrides, 2026-08-26): media 'display-04', split
+   * 'heading-02'; the consumer's value wins */
+  headlineSize,
+  gap,
   body,
   actions,
   panelMaxWidth = 'max-w-[440px]',
@@ -170,17 +175,17 @@ export default function SectionHero({
       <section className={`kol-section-hero-split grid grid-cols-1 md:grid-cols-2 ${(HEIGHTS[height === 'lg' ? 'full' : height] || height).replace(/\bh-/g, 'min-h-')} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}>
         <div className={`relative min-h-[50vh] overflow-hidden md:min-h-0 ${mediaFirst ? '' : 'md:order-2'}`.trim()}>{mediaNode}</div>
         <div className={`flex items-center justify-center p-10 ${mediaFirst ? '' : 'md:order-1'}`.trim()}>
+          {/* BARE — the molecule's own voice; `headlineCase="upper"` is the
+            * split hero's one trait, a role on SectionText (SectionHeroNoOverrides) */}
           <SectionText
             label={label}
             headline={headline}
-            headlineSize={headlineSize === 'display-04' ? 'heading-02' : headlineSize}
-            headlineClass={`${HEADLINE_ROLE[headlineSize === 'display-04' ? 'heading-02' : headlineSize] ?? HEADLINE_ROLE['heading-02']} kol-section-text-caps`}
+            headlineSize={headlineSize ?? 'heading-02'}
+            headlineCase="upper"
             body={body}
             actions={actions}
             align="center"
-            gap="gap-6"
-            bodyClass="kol-sans-body-02 text-body"
-            actionsClass="flex flex-wrap gap-4 justify-center"
+            gap={gap}
             className="max-w-[var(--kol-content-column)]"
             slotClass={slotClass}
             slotStyle={slotStyle}
@@ -231,18 +236,20 @@ export default function SectionHero({
   }
 
   const text = composed ? (
+    /* BARE (SectionHeroNoOverrides, user 2026-08-26: "you think the purpose
+     * of unifying components is to make OVERWRITES?") — the hero passes the
+     * slots and nothing about their voice. The old glass hero's gap-6 /
+     * body-02 / caps were pixel parity with a retired component, and parity
+     * with it is not the bar; one voice across the set is. `gap` is the
+     * consumer's if they want it. */
     <SectionText
       label={label}
       headline={headline}
-      headlineSize={headlineSize}
+      headlineSize={headlineSize ?? 'display-04'}
       body={body}
       actions={actions}
       align={align === 'center' ? 'center' : 'start'}
-      /* gap-6 — the rhythm every hand-built OverlayGlassPanel hero ran on,
-       * so the composed route lands on the same pixels */
-      gap="gap-6"
-      bodyClass="kol-sans-body-02 text-body"
-      actionsClass={`flex flex-wrap gap-4${align === 'center' ? ' justify-center' : ''}`}
+      gap={gap}
       className={media == null ? `${panelMaxWidth} mx-auto` : ''}
       slotClass={slotClass}
       slotStyle={slotStyle}