@kolkrabbi/kol-component 0.85.0 → 0.87.0

package/package.json

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

@@ -31,8 +31,18 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * ties it to the root font-size, so a user bumping their browser text size
  * silently re-counts the columns of every wall in the estate.
  *
+ * `cols` is the PAGE's call (ContentCollectionCols, kol-website 2026-08-27 —
+ * user: "translate that to something usable, consistent"): every filtered grid
+ * on the website was ruled as a COLUMN COUNT (`/stack`: one below md, three
+ * from md), and back-solving a `min` that happens to yield three on the
+ * container ladder is a number nobody picked. `cols={N}` says the count;
+ * `min` stays the default for the fluid wall above. Literal class strings —
+ * a class built at runtime is never emitted.
+ *
  * @param {string}  form     'grid' | 'list'
  * @param {string}  min      grid track minimum, card form (default 320px)
+ * @param {number}  cols     OPT-IN column count, grid form: 1 below md, N from
+ *                           md (2–6). Wins over `min`; the list form ignores it
  * @param {string}  listMin  OPT-IN: makes the list multi-column too, for a dense
  *                           file-browser cut. Unset = one full-width column
  * @param {number}  gap      px between items. UNSET reads the token for the
@@ -43,9 +53,19 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  *                           nine call sites. Pass a number only to differ
  * @param {boolean} stagger  enter animation on/off (reduced motion wins)
  */
+const COLS = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-4',
+  5: 'grid-cols-1 md:grid-cols-5',
+  6: 'grid-cols-1 md:grid-cols-6',
+}
+
 export default function ContentCollection({
   form = 'grid',
   min = '320px',
+  cols,
   listMin,
   gap,
   stagger = true,
@@ -61,15 +81,19 @@ export default function ContentCollection({
     ? `${gap}px`
     : `var(--kol-gap-wall-${form === 'list' ? 'list' : 'grid'})`
 
+  const colsCls = form !== 'list' && COLS[cols] ? COLS[cols] : ''
   return (
     <ul
       key={form}
-      className={`m-0 list-none p-0 ${className}`.trim()}
+      className={`m-0 list-none p-0 ${colsCls} ${className}`.replace(/\s+/g, ' ').trim()}
       style={{
         display: 'grid',
-        gridTemplateColumns: form === 'list'
-          ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : '1fr')
-          : `repeat(auto-fill, minmax(${min}, 1fr))`,
+        /* with `cols` the classes carry the tracks — an inline template would outrank them */
+        gridTemplateColumns: colsCls
+          ? undefined
+          : form === 'list'
+            ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : '1fr')
+            : `repeat(auto-fill, minmax(${min}, 1fr))`,
         gap: g,
       }}
     >

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>,