@kolkrabbi/kol-component 0.134.0 → 0.136.0

package/package.json

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

@@ -15,8 +15,16 @@ import ContentText from './ContentText.jsx'
  * @param {ReactNode} media     thumb content (omit → placeholder)
  * @param {number|'fill'} thumb  thumb edge px — overrides the ruled default; 0 hides; `'fill'` = a square
  *                             the height of the row's content, whatever the rung (WorkListingRowsAndFilters)
- * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default
+ * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default.
+ *                             Under `thumb="fill"` the rung is the thumb's HEIGHT,
+ *                             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
@@ -78,6 +86,8 @@ export default function ContentRow({
   actions,
   footer,
   specs,
+  minHeight,
+  ratioAxis = 'width',
   selected = false,
   onClick,
   href,
@@ -101,13 +111,31 @@ 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
+     * passed ContentMedia `ratio={null}` and kol-theme hard-coded `1 / 1`, so a
+     * consumer setting it got no error and no change. Undefined publishes
+     * nothing and the CSS fallback keeps every current row square. */
+    '--kol-row-thumb-ratio': ratio ?? box.ratio,
     '--kol-content-hover-bg': box.hover,
     '--kol-content-hover-border': box.frameHover,
     /* rest values are PROPERTIES, not inline declarations — an inline
@@ -141,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}