@kolkrabbi/kol-component 0.72.0 → 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.72.0",
+  "version": "0.74.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

@@ -13,7 +13,9 @@
  * Every default class is a SEAM (the ContentText pattern): pass `labelClass`
  * / `bodyClass` / `actionsClass` to replace the string whole — that is how
  * SectionHero's eyebrow and SectionCta's rows wear their own voices on the
- * same anatomy. No casing transforms — author strings in their final case.
+ * same anatomy. THE LABEL IS UPPERCASE BY ROLE (user ruling 2026-08-26):
+ * an eyebrow is caps by design language, so the span carries
+ * `.kol-section-text-eyebrow`; headline, body and actions render as authored.
  *
  * @param {ReactNode} label        section header / kicker
  * @param {ReactNode} headline     the heading
@@ -60,7 +62,9 @@ export default function SectionText({
   const alignCls = align === 'center' ? 'items-center text-center' : 'items-start text-left'
   return (
     <div className={`kol-section-text flex flex-col ${gap} ${alignCls} ${className}`.replace(/\s+/g, ' ').trim()}>
-      {label && <span className={labelClass}>{label}</span>}
+      {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
+        * `labelClass` is the voice riding beside it */}
+      {label && <span className={`kol-section-text-eyebrow ${labelClass}`}>{label}</span>}
       {headline && <Headline className={headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}>{headline}</Headline>}
       {body && (typeof body === 'string' ? <p className={bodyClass}>{body}</p> : <div className={bodyClass}>{body}</div>)}
       {children}

package/src/organisms/SectionCards.jsx

@@ -11,7 +11,7 @@ import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
  * Every block is presence-gated (header on any text prop, cards on
  * `features.length`, actions on `actions`), so omitted slots emit no empty
  * nodes. Card links are plain anchors; pass `onNavigate` to intercept same-tab
- * navigations in an SPA. Casing is authored at the call site.
+ * navigations in an SPA. The label is uppercase by role; the rest as authored.
  *
  * @param {{title, icon, visual, description, href, backgroundColor, imageAspectRatio}[]} features
  * @param {ReactNode} label · headline · body   the header (heading-03 + mono lede by default)

package/src/organisms/SectionCta.jsx

@@ -6,7 +6,7 @@ import SectionText from '../molecules/SectionText.jsx'
  * label-over-value rows, each a `SectionText` (label in the helper voice,
  * value as a heading-01; a row with `href` renders its value as a link).
  * `CtaGlobal` is this component under its old name (alias kept). Columns sit
- * side by side from `md` up and stack below. Casing is authored at the call site.
+ * side by side from `md` up and stack below. Row labels are uppercase by role.
  *
  * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
  * @param {ReactNode} promptLabel   prompt-row label

package/src/organisms/SectionHero.jsx

@@ -2,7 +2,9 @@ import { isValidElement } from 'react'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
-import SectionText from '../molecules/SectionText.jsx'
+import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
+import ContentMedia from '../molecules/ContentMedia.jsx'
+import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
 
 /** Height presets; anything else is passed through as a class string. */
 const HEIGHTS = {
@@ -66,7 +68,16 @@ function MediaLayer({ media }) {
  * the hero renders your node exactly as before — the escape hatch, and what
  * every existing call site does; nothing there moves.
  *
- * @param {ReactNode|{src, kind, poster, srcSet, alt}} media  background
+ * TWO VARIANTS (user ask 2026-08-26). `media` (default): the cover-fit hero
+ * above. `split`: the whole viewport in two halves — media fills one edge to
+ * edge (no media → AssetPlaceholder), the text sits centred in the other, no
+ * glass panel, headline UPPERCASE by role (`.kol-section-text-caps`). It is
+ * SectionSplit blown up to 100vh/100vw with no padding, no ratio, no cap.
+ * `align` picks the media side there ('left' default · 'right'); below `md`
+ * the halves stack, media first.
+ *
+ * @param {'media'|'split'} variant
+ * @param {ReactNode|{src, kind, poster, srcSet, alt}} media  background (media) / the half (split)
  * @param {number}    overlayOpacity 0–100 surface-primary scrim over the media (default 0)
  * @param {string}    height         'screen' | 'lg' | 'md' preset, or a height class string
  * @param {ReactNode} label · headline · body · actions  the composed text (SectionText)
@@ -74,10 +85,14 @@ function MediaLayer({ media }) {
  * @param {string}    [panelMaxWidth='max-w-[440px]']  the glass panel's cap on the composed route
  * @param {ReactNode} panel          a caller-authored content node; wins over the text props and children
  * @param {ReactNode} children       fallback content slot
- * @param {string}    align          'center' | 'start' | 'end' — horizontal placement of the content
+ * @param {string}    align          media: 'center' | 'start' | 'end' — placement of the content ·
+ *                                   split: 'left' | 'right' — the media side
+ * @param {boolean}   fullBleed      span the full viewport width (100vw breakout) — split
  * @param {string}    className      extra classes on the section
  */
 export default function SectionHero({
+  variant = 'media',
+  fullBleed = false,
   media,
   overlayOpacity = 0,
   height = 'lg',
@@ -92,6 +107,37 @@ export default function SectionHero({
   align = 'center',
   className = '',
 }) {
+  if (variant === 'split') {
+    const mediaFirst = align !== 'right'
+    const bleed = fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : 'w-full'
+    const mediaNode = media == null
+      ? <AssetPlaceholder radius={false} className="h-full w-full" />
+      : isValidElement(media) || typeof media !== 'object'
+        ? <ContentMedia ratio={null} radius={false} fit="cover" className="h-full">{media}</ContentMedia>
+        : <MediaLayer media={media} />
+    return (
+      <section className={`kol-section-hero-split grid min-h-screen grid-cols-1 md:grid-cols-2 ${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()}>
+          <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`}
+            body={body}
+            actions={actions}
+            align="center"
+            gap="gap-6"
+            labelClass="kol-helper-12 text-meta"
+            bodyClass="kol-sans-body-02 text-body"
+            actionsClass="flex flex-wrap gap-4 justify-center"
+            className="max-w-[var(--kol-content-column)]"
+          />
+        </div>
+      </section>
+    )
+  }
+
   const heightCls = HEIGHTS[height] || height
   const alignCls =
     align === 'start' ? 'justify-start'

package/src/organisms/SectionSplit.jsx

@@ -15,7 +15,7 @@ import SectionText from '../molecules/SectionText.jsx'
  * `meta` and `actions` are mutually exclusive by intent (pick one); `actions`
  * is conventionally a row of KOL Buttons. The media column renders only when
  * `media` is passed, and `caption` gates both the gradient veil and the
- * caption element. Casing is authored at the call site.
+ * caption element. The label is uppercase by role; the rest renders as authored.
  *
  * @param {ReactNode} label        mono eyebrow above the headline (accent)
  * @param {ReactNode} headline     display pull; `<em>` renders as the italic accent