@kolkrabbi/kol-component 0.79.0 → 0.80.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.79.0",
+  "version": "0.80.1",
   "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
@@ -22,6 +22,20 @@ const HEIGHTS = {
   md: 'h-[320px] md:h-[440px]',
 }
 
+/* The SPLIT variant's presets as LITERALS (SectionHeroSplitHeight, kol-website
+ * 2026-08-26). 0.76.0 rewrote HEIGHTS to min-h-* at runtime — a string no
+ * source file carries, so Tailwind's scanner never emitted it and every
+ * split preset was dead: the Studio hero rendered its text column's 175px.
+ * A class Tailwind cannot see is not a class. */
+const SPLIT_HEIGHTS = {
+  full: 'min-h-dvh',
+  80: 'min-h-[70svh] md:min-h-[80vh]',
+  60: 'min-h-[50svh] md:min-h-[60vh]',
+  screen: 'min-h-dvh',
+  lg: 'min-h-dvh',
+  md: 'min-h-[50svh] md:min-h-[60vh]',
+}
+
 /**
  * Background layer: a media descriptor becomes a cover-fit Image / HlsVideo /
  * inert <video> (`.kol-full-bleed-hero-media` pins it absolute + object-cover
@@ -110,7 +124,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 +161,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]',
@@ -167,20 +186,22 @@ export default function SectionHero({
         ? <ContentMedia ratio={null} radius={false} fit="cover" className="h-full">{media}</ContentMedia>
         : <MediaLayer media={media} />
     return (
-      <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>
+      <section className={`kol-section-hero-split grid grid-cols-1 md:grid-cols-2 ${SPLIT_HEIGHTS[height] || height} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}>
+        {/* the half sizes itself off the grid row (`h-full min-h-0`) so an
+          * absolute media node — the descriptor's cover-fit img — fills it */}
+        <div className={`relative h-full 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 +252,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}