@kolkrabbi/kol-component 0.182.0 → 0.183.0

package/package.json

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

@@ -167,6 +167,16 @@ export default function ContentCard({
   /* plateRule (CatalogCardFrameAndZoom): the plate's top hairline — default the variant's (catalog and
    * print draw it); `false` turns it off without an `!important` in a consumer sheet */
   plateRule,
+  /* `bg` — the card's REST fill, overriding the variant's. It sets
+   * `--kol-card-bg`, not a background, because the rest colours are custom
+   * properties so the hover class can win; that is also why
+   * `className="bg-oq-48"` does nothing here and a consumer reaching around the
+   * component had to write `className="[--kol-card-bg:var(--kol-oq-48)]"`
+   * (kol-client-hrafn, `contentcard-bg-and-text-props` 2026-09-03). The hover
+   * step is `--kol-content-hover-bg` and is set separately, so the two do not
+   * move together. For the card's INK, pass `text` — it falls through to
+   * ContentText with the rest of the slots. */
+  bg,
   control,
   controlStart,
   reveal,
@@ -242,7 +252,7 @@ export default function ContentCard({
         zIndex: box.layout === 'canvas' ? 1 : undefined,
       }}
     >
-      {hasText && <ContentText variant={variant} form={isHero ? 'hero' : 'card'} tagVariant={tagVariant ?? (/surface-/.test(box.bg ?? '') ? 'tertiary' : 'primary')} {...textSlots} />}
+      {hasText && <ContentText variant={variant} form={isHero ? 'hero' : 'card'} tagVariant={tagVariant ?? (/surface-/.test(bg ?? box.bg ?? '') ? 'tertiary' : 'primary')} {...textSlots} />}
       {/* ABSOLUTE, not a flex sibling: the plate's height moves with the title
         * and the meta, so a laid-out stack would stretch or drift with it. The
         * inset reads the SAME pad token the plate uses, so the icons sit the
@@ -390,7 +400,7 @@ export default function ContentCard({
       /* same reason as ContentRow: rest colours are PROPERTIES, because an
        * inline background/borderColor outranks the hover class and the step
        * would never render. */
-      '--kol-card-bg': box.bg ?? undefined,
+      '--kol-card-bg': bg ?? box.bg ?? undefined,
       '--kol-card-border': box.border ? (selected ? 'var(--kol-fg-64)' : box.border) : undefined,
       '--kol-content-hover-bg': hoverBg ?? undefined,
       '--kol-content-hover-border': box.frameHover ?? undefined,

package/src/molecules/ContentRow.jsx

@@ -160,6 +160,15 @@ export default function ContentRow({
   href,
   onNavigate,
   tagVariant,
+  /* `bg` — the row's REST fill, the twin of ContentCard's (filed against the
+   * card, `contentcard-bg-and-text-props` 2026-09-03; the pair ships together
+   * and a consumer that re-grounds one hits the same wall on the other in the
+   * same grid). It sets `--kol-row-bg`, not a background, because the rest
+   * colours are custom properties so the hover class can win — which is why
+   * `className="bg-oq-48"` does nothing here either. `selected` still wins:
+   * a selected row is the list's state, not the consumer's ground. For the
+   * row's INK, pass `text` — it falls through to ContentText. */
+  bg,
   className = '',
   ...text
 }) {
@@ -216,7 +225,7 @@ export default function ContentRow({
     /* rest values are PROPERTIES, not inline declarations — an inline
      * `background`/`borderColor` outranks every class, so the hover rules in
      * kol-theme could never win and no row hover fired at all. */
-    '--kol-row-bg': selected ? 'var(--kol-fg-04)' : box.bg,
+    '--kol-row-bg': selected ? 'var(--kol-fg-04)' : bg ?? box.bg,
     '--kol-row-border': box.frame || undefined,
   }
 
@@ -231,7 +240,7 @@ export default function ContentRow({
    * (a rendered alphabet, a waveform, a sparkline) is never the family's. */
   const inner = box.column ? (
     <>
-      <ContentText variant={variant} form="row" className="w-full" tagVariant={tagVariant ?? (/surface-/.test(box.bg ?? '') ? 'tertiary' : 'primary')} {...text} />
+      <ContentText variant={variant} form="row" className="w-full" tagVariant={tagVariant ?? (/surface-/.test(bg ?? box.bg ?? '') ? 'tertiary' : 'primary')} {...text} />
       {footer}
     </>
   ) : (
@@ -259,7 +268,7 @@ export default function ContentRow({
         * ruled it on screen): the two lines stack to 34 inside a 40 content box,
         * and pushing them fully apart puts the ascenders hard against the thumb's
         * top and bottom edges. It is the ROW's ruling, so the row passes it. */}
-      <ContentText variant={variant} form="row" className={`flex-1 ${box.height != null ? 'py-[2px]' : ''}`.trim()} tagVariant={tagVariant ?? (/surface-/.test(box.bg ?? '') ? 'tertiary' : 'primary')} {...text} />
+      <ContentText variant={variant} form="row" className={`flex-1 ${box.height != null ? 'py-[2px]' : ''}`.trim()} tagVariant={tagVariant ?? (/surface-/.test(bg ?? box.bg ?? '') ? 'tertiary' : 'primary')} {...text} />
       {/* `specs` rides the trailing edge on EVERY variant — year · material ·
        * edition is a content difference, not a geometry one, and minting a
        * seventh page-named box for it is the exact mistake §1 of the ticket is

package/src/molecules/ContentText.jsx

@@ -30,6 +30,7 @@
  *   solid surface fill — the /work row the variant was minted for — and `primary` otherwise
  * @param {string}    titleClass … eyebrowClass (alias `kickerClass`), bodyClass, detailClass,
  *                    dateClass, sizeClass, metaClass — full class overrides
+ * @param {'subtle'|'meta'|'body'|'lede'|'strong'|'shout'|'scream'|'emphasis'} text - ONE ink role for every slot, replacing the ink each ramp hardcodes (`text-emphasis` on a title, `text-meta` on a date). It also re-inks a `<slot>Class` override, which is the point: an override replaces the ramp string WHOLE, so `kickerClass="kol-sans-body-01"` silently drops the `text-meta` the ramp carried and the kicker jumps to inherited ink (kol-client-hrafn, `contentcard-bg-and-text-props` 2026-09-03). `text` sets the level once instead of re-specifying eight ramps. It FLATTENS the hierarchy by design — every slot lands on the same role — so a card that wants its own relative steps still passes per-slot classes
  */
 
 import Tag from '../atoms/Tag'
@@ -219,6 +220,7 @@ export default function ContentText({
   title, body, eyebrow, kicker, detail, date, size, meta, tags,
   gap, clamp, tagVariant = 'primary',
   titleClass, bodyClass, eyebrowClass, kickerClass, detailClass, dateClass, sizeClass, metaClass, tagsClass,
+  text,
   className = '',
 }) {
   /* `kicker` / `kickerClass` = aliases of `eyebrow` / `eyebrowClass` (2026-08-27) */
@@ -264,9 +266,24 @@ export default function ContentText({
     return v.map((item, i) => <span key={i}>{item}</span>)
   }
   const spread = (slot) => (Array.isArray(values[slot]) && slot !== 'tags' ? ' flex flex-wrap gap-2' : '')
+
+  /* `text` — one ink role across the slots. The ramps HARDCODE their ink, so
+   * neither inheritance nor a wrapper class can reach them; the only way in is
+   * to take the ink class out of the resolved string and put the role back.
+   * Applied after the override for the reason the prop exists: an override
+   * replaces the ramp whole and takes its ink with it.
+   *
+   * The alternation is closed on purpose — `text-right` / `text-center` are
+   * alignment, not ink, and must survive. `text-fg-NN` goes too: the hero ramps
+   * reach for stops (`text-fg-64`, `text-fg-48`) rather than roles, and leaving
+   * those behind would let two inks sit in one class string. */
+  const INK = /\btext-(?:subtle|meta|body|lede|strong|shout|scream|emphasis|fg-\d+)\b/g
+  const ink = (cls) =>
+    text ? `${cls.replace(INK, '').replace(/\s+/g, ' ').trim()} text-${text}` : cls
+
   const line = (slot) =>
     values[slot] == null ? null : (
-      <div key={slot} className={`${overrides[slot] ?? ramp[slot] ?? ''}${extra(slot)}${hook(slot)}${spread(slot)}`.trim()}>{content(slot)}</div>
+      <div key={slot} className={`${ink(overrides[slot] ?? ramp[slot] ?? '')}${extra(slot)}${hook(slot)}${spread(slot)}`.trim()}>{content(slot)}</div>
     )
 
   /* RECURSIVE (2026-08-15) — an entry inside a line/between/group may itself be