@kolkrabbi/kol-component 0.135.0 → 0.136.0

package/package.json

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

@@ -20,6 +20,11 @@ import ContentText from './ContentText.jsx'
  *                             so a non-square ratio widens the thumb rather than
  *                             growing the row past its rung (ruled 2026-08-30)
  * @param {number}    paddingY  vertical padding px — overrides the ruled default
+ * @param {number}    minHeight the row's rung in px — overrides the variant's
+ * @param {'width'|'height'} ratioAxis  under `thumb="fill"`, WHICH AXIS PAYS for a
+ *                             non-square `ratio`. `width` (default) holds the height
+ *                             at the rung and narrows the thumb; `height` holds the
+ *                             width and lets the thumb grow taller than the rung
  * @param {{label: ReactNode, value: ReactNode}[]} specs  label/value pairs on the
  *                             row's trailing edge, independent of variant.
  *                             Horizontal variants only — `typeface` is a column
@@ -81,6 +86,8 @@ export default function ContentRow({
   actions,
   footer,
   specs,
+  minHeight,
+  ratioAxis = 'width',
   selected = false,
   onClick,
   href,
@@ -104,12 +111,24 @@ export default function ContentRow({
     '--kol-row-pad-md': box.padMd,
     '--kol-row-gap': box.gap,
     '--kol-row-gap-md': box.gapMd,
-    '--kol-row-min-h': box.minH != null ? `${box.minH}px` : undefined,
+    /* THE RUNG IS A PROP (RowRungAndFillThumb, kol-website 2026-08-30). It was
+     * the variant's literal published as an inline custom property, and an
+     * inline property cannot be reached from a stylesheet — so a page wanting a
+     * taller row carried `--kol-row-min-h: 224px !important`. */
+    '--kol-row-min-h': minHeight != null ? `${minHeight}px` : box.minH != null ? `${box.minH}px` : undefined,
     '--kol-row-min-h-md': box.minHMd != null ? `${box.minHMd}px` : undefined,
     /* `fill` = the rung minus the vertical padding — a definite number, not a
      * stretch (a min-height row has no definite cross size, so a stretched
-     * aspect-ratio square resolved to the image's intrinsic width) */
-    '--kol-row-thumb': thumbPx === 'fill' ? `calc(${box.minH ?? 96}px - 2 * ${padY})` : `${thumbPx}px`,
+     * aspect-ratio square resolved to the image's intrinsic width).
+     *
+     * THE EFFECTIVE RUNG, not the variant's. This read `box.minH` — the literal
+     * — so raising the rung grew the ROW and left the thumb at its old height,
+     * floating. It is now `--kol-row-min-h`, whatever set it, resolved in CSS.
+     * That was the second `!important` kol-website was carrying. */
+    '--kol-row-pad-y': padY,
+    '--kol-row-thumb': thumbPx === 'fill'
+      ? 'calc(var(--kol-row-min-h, 96px) - 2 * var(--kol-row-pad-y, 0px))'
+      : `${thumbPx}px`,
     '--kol-row-thumb-md': box.thumbMd != null ? `${box.thumbMd}px` : undefined,
     /* the documented `ratio` prop, finally connected (RowThumbRatioDead,
      * kol-website 2026-08-30). It was destructured and then dropped — the row
@@ -150,7 +169,7 @@ export default function ContentRow({
          * media object-covers into it; row height = max(thumb, text). This
          * retires the 2026-08-15 fill-the-height ruling and the `thumbSquare`
          * exception it needed. Rows never zoom their thumb — cards keep theirs. */
-        <div className={`kol-row-thumb shrink-0 self-start ${thumbPx === 'fill' ? 'is-fill' : ''}`.trim()}>
+        <div className={`kol-row-thumb shrink-0 self-start ${thumbPx === 'fill' ? 'is-fill' : ''} ${thumbPx === 'fill' && ratioAxis === 'height' ? 'pays-height' : ''}`.replace(/\s+/g, ' ').trim()}>
           <ContentMedia
             ratio={null}
             border={box.thumbBorder ?? false}