@kolkrabbi/kol-component 0.66.0 → 0.68.0

package/package.json

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

@@ -57,6 +57,10 @@ const HOVER = {
   default:  'var(--kol-oq-04)',
   catalog:  'var(--kol-surface-tertiary)',
   print:    'var(--kol-oq-04)',
+  /* article and work take NO surface hover, and that is a decision not a gap:
+   * article has no surface of its own (its media frame steps its border
+   * instead), and work's whole hover IS the drawer rising. A second wash under
+   * either would be two answers to one question. */
   article:  null,
   work:     null,
   typeface: 'var(--kol-surface-inverse)',

package/src/molecules/ContentMedia.jsx

@@ -55,6 +55,12 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  * @param {boolean}   ring      hairline border OVER the media, inset
  * @param {boolean}   zoom      the artwork creeps up inside its frame on the
  *                              CARD's hover — image-led variants only
+ * @param {boolean}   fillHeight  size from the HEIGHT instead of the width: the
+ *                              media fills its parent's height and its width
+ *                              follows the ratio. What every ROW wants — a
+ *                              thumb sized off the row's own height keeps the
+ *                              row's rhythm, where a fixed width leaves it
+ *                              floating in a tall row.
  * @param {ReactNode} children  the real media
  */
 const FIT = {
@@ -73,6 +79,7 @@ export default function ContentMedia({
   borderHover,
   ring = false,
   zoom = false,
+  fillHeight = false,
   children,
   className = '',
 }) {
@@ -82,7 +89,7 @@ export default function ContentMedia({
   const round = radius ? 'rounded-[var(--kol-radius-sm)]' : ''
   return (
     <div
-      className={`relative w-full overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ? 'kol-media-zoom' : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
+      className={`relative ${fillHeight ? 'h-full w-auto' : 'w-full'} overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ? 'kol-media-zoom' : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
       style={{ ...(ratio != null ? { aspectRatio: ratio } : null), background: bg }}
     >
       {children}

package/src/molecules/ContentRow.jsx

@@ -31,10 +31,14 @@ const BOX = {
   catalog:  { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
   print:    { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
   /* ListingCard's row thumb is `bg-fg-12` bare — a tint, no border. */
-  article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)' },
+  /* article had NO hover of any kind — the only row in the family you could
+   * point at and get nothing back. It has no surface of its own, so it takes
+   * the lightest step there is. Its thumb zooms: on an article row the image
+   * IS the subject. */
+  article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)', hover: 'var(--kol-oq-02)', thumbZoom: true },
   /* work and typeface step UP at md — the shipped rows both do, and a work row
    * at a fixed 96 cannot hold the display-03 line it was ruled to carry. */
-  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true },
+  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true, thumbZoom: true },
   /* typeface's row is a COLUMN, not a line: a header (name/styles left,
    * classification/year right) with a full-width specimen band under it. The
    * shipped item is `flex-col gap-6`, and forcing it into the horizontal
@@ -100,11 +104,22 @@ export default function ContentRow({
   ) : (
     <>
       {thumbPx > 0 && (
-        <div className="kol-row-thumb shrink-0">
+        /* THE THUMB FILLS THE ROW'S HEIGHT (user ruling 2026-08-15).
+         *
+         * WIDTH stays pinned to `--kol-row-thumb` — that is what stops it
+         * running away. Only the height stretches, and `ratio={null}` puts
+         * ContentMedia on `h-full` so the image object-covers into whatever
+         * height the row is. An earlier cut freed the width instead and let
+         * `aspect-ratio` fall back to the image's intrinsic size, which is how
+         * one card ate the page. */
+        <div className="kol-row-thumb shrink-0 self-stretch">
           <ContentMedia
-            ratio={ratio ?? box.ratio}
+            ratio={null}
             border={box.thumbBorder ?? false}
             bg={box.thumbBg}
+            /* zoom where the thumb IS the subject (article · work), never on a
+             * 48px file chip or a between-header with no media at all */
+            zoom={box.thumbZoom ?? false}
             className={box.thumbRadius ? 'rounded-[var(--kol-radius-xs)]' : ''}
           >
             {media}

package/src/molecules/ContentText.jsx

@@ -27,6 +27,23 @@
  *                    dateClass, sizeClass, metaClass — full class overrides
  */
 
+/* THE ROW INK LADDER — three rungs, and only three (2026-08-15).
+ *
+ * A work row was rendering its small title, its big description AND its type
+ * label all at full emphasis, with only the year stepped down: four fields
+ * wearing two values, so nothing led. The ladder is the same one the header
+ * strips already use, which is why it reads as one system rather than a
+ * per-variant guess:
+ *
+ *   emphasis  THE THING YOU CAME FOR — one per row, never two
+ *   body      what identifies it — the title, the type
+ *   meta      metadata — the year, the count, the file size
+ *
+ * The ROLES, not raw `fg-*` opacities and not raw `oq-*` rungs. A role is the
+ * only thing that survives a theme flip and a consumer's own palette; the three
+ * of them are exactly the three the family needs, which is why there are three
+ * and not fourteen. */
+
 /* [variant][form][slot] → 'type-class ink-role', verbatim from the ruled table */
 const RAMP = {
   default: {
@@ -38,28 +55,37 @@ const RAMP = {
     row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
   },
   print: {
-    card: { title: 'kol-mono-14 text-body', detail: 'kol-mono-10 text-meta' },
-    row:  { title: 'kol-mono-10 text-body', detail: 'kol-mono-10 text-meta' },
+    card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta' },
+    /* mono-12 + emphasis, matching catalog — print's row IS catalog's row, so
+     * the two must not disagree about their own type. */
+    row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
   },
   article: {
-    card: { kicker: 'kol-mono-12 text-body', title: 'kol-sans-heading-03 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-body', tags: 'flex flex-wrap gap-2' },
-    row:  { kicker: 'kol-mono-12 text-body', title: 'kol-sans-heading-04 text-emphasis', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-body', tags: 'flex flex-wrap gap-2' },
+    card: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis', 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', body: 'kol-mono-12 text-body', 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
      * these on `text-emphasis` painted light type on a light plate and the
      * caption disappeared. */
-    card: { title: 'kol-sans-display-03 text-fg-inverse', meta: 'kol-mono-12 text-fg-inverse-48', body: 'kol-mono-14 text-fg-inverse', date: 'kol-mono-12 text-fg-inverse-48', tags: 'flex flex-wrap gap-2' },
+    /* the drawer is an INVERSE surface, so the roles do not apply — but the
+     * ladder does: one full ink, the rest stepped. */
+    card: { title: 'kol-sans-display-03 text-fg-inverse', meta: 'kol-mono-12 text-fg-inverse-64', body: 'kol-mono-14 text-fg-inverse-64', date: 'kol-mono-12 text-fg-inverse-48', tags: 'flex flex-wrap gap-2' },
     /* verbatim from WorkListItem: title `kol-mono-14` truncated · type
      * `kol-mono-12 md:kol-mono-14` at FULL ink, no opacity step · year
      * `kol-mono-12 text-fg-64` · description `kol-sans-heading-03 text-auto`.
      * Title and type are the pair — same rung, same full ink; only the year
      * steps down. */
-    row:  { title: 'kol-mono-12 text-emphasis uppercase truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-12 text-emphasis', date: 'kol-mono-12 text-fg-64', tags: 'flex flex-wrap items-center gap-1.5' },
+    row:  { title: 'kol-mono-12 text-body uppercase truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', tags: 'flex flex-wrap items-center gap-1.5' },
   },
   typeface: {
-    card: { title: 'kol-mono-16 text-emphasis', body: 'kol-mono-14 text-fg-64', date: 'kol-mono-12 text-fg-64' },
-    row:  { title: 'kol-mono-14 uppercase text-emphasis', body: 'kol-mono-12 text-fg-64', detail: 'kol-mono-14 text-emphasis', date: 'kol-mono-12 text-fg-64' },
+    /* same as the row: the SPECIMEN carries the emphasis on a typeface card,
+     * so the name steps down. The glyph is what you came to look at. */
+    card: { title: 'kol-mono-16 text-body', body: 'kol-mono-12 text-meta', date: 'kol-mono-12 text-meta' },
+    /* the name steps DOWN to `body`: on a typeface row the SPECIMEN is the
+     * thing you came for and it carries the one emphasis. Two full inks in one
+     * block is the ladder broken, and the measurement caught it. */
+    row:  { title: 'kol-mono-14 uppercase text-body', body: 'kol-mono-12 text-meta', detail: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta' },
   },
 }
 
@@ -162,14 +188,18 @@ export default function ContentText({
    * needs exactly that: classification over year at the right edge, which a
    * flat slot list cannot express and which was previously collapsed into one
    * `date` slot that lost a value. */
-  const render = (entry, i) => {
+  const render = (entry, i, trailing = false) => {
     if (typeof entry === 'string') return line(entry)
     const [kind, ...slots] = entry
-    const parts = slots.map((s, j) => render(s, j)).filter(Boolean)
+    const parts = slots.map((s, j) => render(s, j, kind === 'between' && j === slots.length - 1)).filter(Boolean)
     if (!parts.length) return null
     if (kind === 'stack') {
+      /* A TRAILING column right-aligns (user ruling 2026-08-15) — it sits at
+       * the row's right edge, so its own right edge is the one that lines up
+       * down the list. `items-end` only applies where the stack is trailing;
+       * a leading stack still reads from the left. */
       return (
-        <div key={`stack-${i}`} className="flex w-full min-w-0 flex-col" style={{ gap: STACK[variant] ?? 'var(--kol-spacing-1)' }}>
+        <div key={`stack-${i}`} className={`flex w-full min-w-0 flex-col ${trailing ? 'items-end text-right' : 'items-start text-left'}`} style={{ gap: STACK[variant] ?? 'var(--kol-spacing-1)' }}>
           {parts}
         </div>
       )
@@ -190,7 +220,7 @@ export default function ContentText({
           * empty space sat between the two columns. */}
         {kind === 'between' && parts.length > 1
           ? parts.map((p, j) => (
-              <div key={j} className={j === 0 ? 'min-w-0 flex-1' : 'shrink-0'}>{p}</div>
+              <div key={j} className={j === 0 ? 'min-w-0 flex-1' : 'shrink-0 text-right'}>{p}</div>
             ))
           : parts}
       </div>