@kolkrabbi/kol-component 0.91.2 → 0.92.0

package/package.json

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

@@ -125,9 +125,9 @@ export default function ContentCard({
   const metaChips = isHero && heroMeta != null ? (Array.isArray(heroMeta) ? heroMeta : [heroMeta]) : null
   const heroHeader = isHero && (label != null || metaChips?.length) ? (
     <div className="kol-card-hero-header flex items-center justify-between" style={{ marginBottom: 'var(--kol-spacing-4)' }}>
-      {label != null && <div className="kol-helper-14 text-meta">{label}</div>}
+      {label != null && <div className="kol-helper-14 text-fg-64">{label}</div>}
       {metaChips?.length > 0 && (
-        <div className="flex gap-3 kol-helper-12 text-meta">
+        <div className="flex gap-3 kol-helper-12 text-fg-48">
           {metaChips.map((item, i) => <span key={i}>{item}</span>)}
         </div>
       )}

package/src/molecules/ContentText.jsx

@@ -66,13 +66,12 @@ const RAMP = {
     card: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis kol-content-title-dim', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
     row:  { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-04 text-emphasis kol-content-title-dim', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
     /* HERO — the featured card riding a page's fold (ContentCard `hero`,
-     * 2026-08-27): ListingCard size="hero"'s text, read off Stack — kicker in
-     * the helper-16 voice, title on display-03 (Stack's ruled hero title),
-     * body mono-14. One emphasis (the title), everything else meta/body. */
-    /* the SAME voices as the article card under it — kicker, body, meta — only
-     * the title steps up (display-03, UPPERCASE). No clamps (user 2026-08-27:
-     * "you dont clamp anything"). */
-    hero: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-display-03 text-emphasis uppercase kol-content-title-dim', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
+    /* THE OLD FEATURED CARD, VERBATIM — ListingCard size="hero" as Stack
+     * rendered it (user 2026-08-27: "everything was correct in the old featured
+     * card … the only thing you had to do was carry it through"): kicker
+     * `kol-card-kicker tracking-wide text-fg-64`, title display-section-sm →
+     * display-03 uppercase, clamp 2, dim on hover; body mono-14 fg-48 clamp 2. */
+    hero: { kicker: 'kol-card-kicker tracking-wide text-fg-64', title: 'kol-sans-display-03 uppercase line-clamp-2 kol-content-title-dim', body: 'kol-mono-14 text-fg-48 line-clamp-2', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
   },
   work: {
     /* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving

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