@kolkrabbi/kol-component 0.181.0 → 0.183.0

package/package.json

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

package/src/molecules/SplitToolButton.jsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
  * SplitToolButton — single-trigger split tool button + variant menu (the
- * tool-palette idiom: Select · Text · [Shape ◢] · Pattern). A 28×28
+ * tool-palette idiom: Select · Text · [Shape ◢] · Pattern). A pinned-square
  * quiet/pressed trigger shows the current variant while the group is `active`
  * (else the `lastPicked` variant) plus a corner fold indicator; ONE click both
  * arms that variant (`onChange`) and opens the variant menu (floating-ui's own
@@ -14,9 +15,17 @@ import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
  * The trigger is a plain `kol-btn` element, not DS Button: Button doesn't
  * forward refs (the popover must anchor on the real button), can't host the
  * corner fold inside its own box, and `blurOnClick` must blur the button
- * itself. The class output — kol-btn kol-btn-ghost + kol-btn-quiet /
- * kol-btn-pressed — is exactly what `<Button variant="ghost" quiet pressed>`
- * emits, so the visual contract stays Button's.
+ * itself. The class output — kol-btn kol-btn-ghost kol-btn-icon kol-btn-{size}
+ * + kol-btn-quiet / kol-btn-pressed — is exactly what
+ * `<Button variant="ghost" quiet pressed iconOnly>` emits, so the box and the
+ * visual contract stay Button's.
+ *
+ * `size` was a raw px number (28) with a transcribed 14px glyph until 0.182.0:
+ * off the 22 · 26 · 32 · 40 ladder in a set whose whole point is that one row
+ * is one box, and the glyph pinned where the SOLO ladder should have decided
+ * it. kol-fxr's tool rail hand-rolls this trigger at 36/22 rather than
+ * importing it (design-editor-set-is-a-half-port, 2026-09-03) — 36 is not a
+ * rung either, and the DS answer to a bespoke 36 is `size="lg"`.
  *
  * For a text-trigger single-select use `Dropdown`; for the two-button
  * action-half + chevron-half split use `ShapeDropdown`.
@@ -27,7 +36,7 @@ import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
  * @param {Function} props.onChange - Fires with a variant id — on menu pick, and on trigger click while inactive (arming)
  * @param {string} props.lastPicked - Variant id the trigger shows while the group is inactive (default: variants[0])
  * @param {boolean} props.active - Whether this tool group is the active tool — lit trigger, `aria-pressed`
- * @param {number} props.size - Trigger box in px (default: 28)
+ * @param {'xs'|'sm'|'md'|'lg'} props.size - Trigger box on the pinned-square ladder — 22 · 26 · 32 · 40 (default: 'md'). The glyph follows the SOLO ladder; it is never set at the call site
  * @param {boolean} props.blurOnClick - Blur the trigger after click so a canvas can reclaim focus and refresh its cursor (default: false)
  * @param {string} props.aria-label - Trigger label fallback when no variant resolves
  * @param {string} props.className - Additional classes on the trigger
@@ -54,7 +63,7 @@ const SplitToolButton = ({
   onChange,
   lastPicked,
   active = false,
-  size = 28,
+  size = 'md',
   blurOnClick = false,
   className = '',
   'aria-label': ariaLabel,
@@ -91,13 +100,12 @@ const SplitToolButton = ({
         ref={popover.refs.setReference}
         {...popover.getReferenceProps({ onClick: handleTriggerClick })}
         type="button"
-        className={`relative kol-btn kol-btn-ghost ${active ? 'kol-btn-pressed' : 'kol-btn-quiet'} ${className}`.trim()}
-        style={{ width: size, height: size, padding: 6 }}
+        className={`relative kol-btn kol-btn-ghost kol-btn-icon kol-btn-${size} ${active ? 'kol-btn-pressed' : 'kol-btn-quiet'} ${className}`.trim()}
         aria-pressed={active}
         aria-label={label}
         title={title}
       >
-        {triggerVariant && <Icon name={triggerVariant.icon} size={14} />}
+        {triggerVariant && <Icon name={triggerVariant.icon} size={glyphSize(size, true)} />}
         <FoldIndicator />
       </button>
       {/* w-max — floats size to content, the menu-family law (2026-08-09). */}