@kolkrabbi/kol-component 0.80.0 → 0.80.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.80.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/organisms/SectionHero.jsx

@@ -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
@@ -172,8 +186,10 @@ 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) */}