@kolkrabbi/kol-component 0.84.0 → 0.85.0

package/package.json

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

@@ -31,7 +31,11 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {{num: ReactNode, label: string}[]} meta  stats strip (mutually exclusive with `actions`)
  * @param {ReactNode} actions      button row
  * @param {ReactNode} media        image / video / interactive node for the visual column
- * @param {string}    [ratio='4/5'] aspect ratio of the media frame
+ * @param {string}    [ratio='4/5'] aspect ratio of the media frame. THE FRAME IS BOUNDED BY THE
+ *   RUNG (SectionSplitMediaBounded, 2026-08-27): its height is the section's `height` rung minus
+ *   the vertical padding, its width follows the ratio (capped at the column). Before, the frame
+ *   was as wide as its column and set the section's height itself, so `40` · `60` · `80`
+ *   rendered identically — a ladder that only floors is decorative for a card with media.
  * @param {boolean}   [mediaHover=false] zoom the media on frame hover (the CardFeatureItem numbers)
  * @param {boolean}   [mediaClip=true]   the frame clips its media (overflow hidden + radius). `false`
  *   for a node that transforms in 3D (a tilt card) — the frame keeps its ratio and radius,
@@ -86,7 +90,7 @@ export default function SectionSplit({
     <section
       ref={themeRef}
       data-theme={themeStamp}
-      className={`kol-section-split flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 ${minHeightClass(height)} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
+      className={`kol-section-split flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 [--kol-section-py:4rem] md:[--kol-section-py:6rem] lg:[--kol-section-py:8rem] ${minHeightClass(height)} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
       style={sectionStyle}
     >
       {/* ONE cap for the whole section family (user ruling 2026-08-26): the shell's
@@ -120,9 +124,12 @@ export default function SectionSplit({
           )}
         </SectionText>
         {media && (
+          /* height = the rung minus the padding; width follows the ratio and
+           * caps at the column — the media takes its size from the section,
+           * never gives it */
           <div
-            className={`kol-section-split-visual relative rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'w-full max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
-            style={{ aspectRatio: ratio }}
+            className={`kol-section-split-visual relative w-auto max-w-full justify-self-center rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            style={{ aspectRatio: ratio, height: 'calc(var(--kol-section-h, 60vh) - 2 * var(--kol-section-py, 4rem))' }}
           >
             {media}
             {caption && <div className="kol-section-split-visual-veil" aria-hidden="true" />}

package/src/organisms/sectionHeights.js

@@ -4,12 +4,15 @@
  * Same three names as SectionHero's presets; literal strings — a class built
  * at runtime is not a class (the SPLIT_HEIGHTS lesson). Anything else passes
  * through as a class string. */
+/* Each rung also publishes itself as `--kol-section-h`, so a child that must
+ * be BOUNDED by the rung — the split's media frame (SectionSplitMediaBounded,
+ * 2026-08-27) — can read it. Literal strings, every one. */
 export const MIN_HEIGHTS = {
-  full: 'min-h-dvh',
-  80: 'min-h-[70svh] md:min-h-[80vh]',
-  60: 'min-h-[50svh] md:min-h-[60vh]',
+  full: 'min-h-dvh [--kol-section-h:100dvh]',
+  80: 'min-h-[70svh] md:min-h-[80vh] [--kol-section-h:70svh] md:[--kol-section-h:80vh]',
+  60: 'min-h-[50svh] md:min-h-[60vh] [--kol-section-h:50svh] md:[--kol-section-h:60vh]',
   /* 40 (SectionHeightForty, 2026-08-27): the rung below 60 for a page-foot
    * CTA or a cards band that wants less air; default stays 60 everywhere */
-  40: 'min-h-[35svh] md:min-h-[40vh]',
+  40: 'min-h-[35svh] md:min-h-[40vh] [--kol-section-h:35svh] md:[--kol-section-h:40vh]',
 }
 export const minHeightClass = (height) => MIN_HEIGHTS[height] || height