@kolkrabbi/kol-component 0.84.0 → 0.86.0

package/package.json

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

@@ -120,9 +120,9 @@ function MediaLayer({ media }) {
  * @param {ReactNode|{src, kind, poster, srcSet, alt}|Array} media  background (media) / the half (split) / an ARRAY of slides → carousel
  * @param {number}    overlayOpacity 0–100 surface-primary scrim over the media (default 0)
  * @param {boolean}   veil           bottom-heavy gradient over the media
- * @param {'center'|'end'} justify   content vertically centred, or pinned to the foot
+ * @param {'center'|'end'} justify   content vertically centred, or pinned to the foot (with `foot`, the pb ramp plus `overlap` — the text clears the card)
  * @param {ReactNode} foot           a node rendered across the hero's bottom edge
- * @param {number}    overlap        how far `foot` rises into the hero, px (default 250)
+ * @param {number}    overlap        how far `foot` rises into the hero, px (default 250); published on the section as `--kol-section-foot-overlap`
  * @param {boolean}   autoPlay · {number} autoPlayInterval · {'stack'|'header'} navPosition  carousel only
  * @param {Function}  renderTitle · {string} ctaLabel · {Function} onNavigate · {boolean} showTitle · showDescription · showCta ·
  *                    {string} titleClassName · descriptionClassName · {Object} options  carousel only — FeaturedCarousel's
@@ -311,10 +311,23 @@ export default function SectionHero({
       ))
     : children)
 
-  const justifyCls = justify === 'end' ? 'items-end pb-32 sm:pb-40 lg:pb-48 xl:pb-56' : 'items-center'
+  /* `justify="end"` + `foot` (SectionHeroFootClearance, kol-website
+   * 2026-08-27 — user, dev vs live: "why can't you make it the same?"): the
+   * foot rises `overlap` px into the hero, so the content's bottom inset is
+   * the pb ramp PLUS the overlap — the text clears the card at any overlap.
+   * The ramp is a custom property so the sum is one literal class; `overlap`
+   * is published on the section as --kol-section-foot-overlap (0 without a
+   * foot). */
+  /* the bottom inset is never the `p-*` shorthand: `md:p-10` sits in a later
+   * media query than a bare `pb-*` and would win it back at ≥768 (measured —
+   * the old `pb-32 sm:pb-40` ramp lost to it between 768 and 1023 too). */
+  const justifyCls = justify === 'end'
+    ? 'items-end [--kol-section-pb:8rem] sm:[--kol-section-pb:10rem] lg:[--kol-section-pb:12rem] xl:[--kol-section-pb:14rem] pb-[calc(var(--kol-section-pb)+var(--kol-section-foot-overlap,0px))]'
+    : 'items-center pb-6 md:pb-10'
+  const footVar = foot ? { '--kol-section-foot-overlap': `${overlap}px` } : undefined
 
   return withFoot(
-    <section ref={themeRef} data-theme={themeStamp} className={`kol-full-bleed-hero relative isolate w-full overflow-hidden ${themed} ${heightCls} ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()}>
+    <section ref={themeRef} data-theme={themeStamp} className={`kol-full-bleed-hero relative isolate w-full overflow-hidden ${themed} ${heightCls} ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()} style={footVar}>
       <MediaLayer media={media} />
       {overlayOpacity > 0 && (
         <div
@@ -324,7 +337,7 @@ export default function SectionHero({
         />
       )}
       {veil && <div aria-hidden="true" className="kol-section-hero-veil absolute inset-0" />}
-      <div className={`relative z-10 flex h-full w-full ${justifyCls} ${alignCls} p-6 md:p-10`}>
+      <div className={`relative z-10 flex h-full w-full ${justifyCls} ${alignCls} px-6 pt-6 md:px-10 md:pt-10`}>
         {content}
       </div>
     </section>,

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