@kolkrabbi/kol-component 0.85.0 → 0.86.0

package/package.json

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