@kolkrabbi/kol-component 0.91.3 → 0.92.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.91.3",
+  "version": "0.92.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,7 +120,7 @@ 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 (with `foot`, the pb ramp plus `overlap` — the text clears the card)
+ * @param {'center'|'end'} justify   content vertically centred, or pinned to the foot (with `foot`: `overlap` + 32px, 48 from md — the text sits just above the card; without: the pb ramp)
  * @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); published on the section as `--kol-section-foot-overlap`
  * @param {boolean}   autoPlay · {number} autoPlayInterval · {'stack'|'header'} navPosition  carousel only
@@ -321,8 +321,14 @@ export default function SectionHero({
   /* 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). */
+  /* WITH a foot the inset is `overlap` + one small gap — 32px, 48 from md
+   * (SectionHeroFootGap, kol-website 2026-08-27: 0.86.0's ramp + overlap
+   * floated the lede ~474px above the card; live sat it ~50px above). No
+   * foot → the padding ramp, as before. */
   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))]'
+    ? (foot
+      ? 'items-end pb-[calc(var(--kol-section-foot-overlap)+2rem)] md:pb-[calc(var(--kol-section-foot-overlap)+3rem)]'
+      : 'items-end pb-32 sm:pb-40 lg:pb-48 xl:pb-56')
     : 'items-center pb-6 md:pb-10'
   const footVar = foot ? { '--kol-section-foot-overlap': `${overlap}px` } : undefined