@kolkrabbi/kol-component 0.94.0 → 0.95.0

package/package.json

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

@@ -104,6 +104,7 @@ export default function ContentCard({
   zoom,
   control,
   controlStart,
+  reveal,
   actions,
   expanded = false,
   expandedContent,
@@ -260,14 +261,21 @@ export default function ContentCard({
         {textNode && <div className="kol-card-drawer">{textNode}</div>}
       </>
     ) : (
-      /* canvas — media fills the frame, plate floats on top */
+      /* canvas — media fills the frame, plate floats on top. `reveal`
+       * (TypefaceCardAndRow, 2026-08-27): on hover the plate and the media
+       * fade out and the reveal node fades in — the card owns the
+       * choreography (kol-theme `.kol-card.has-reveal`), the consumer owns the
+       * node (what it says and which face it wears are never the family's). */
       <>
-        <div className="absolute" style={{ inset: 0 }}>
+        <div className="kol-card-canvas-media absolute" style={{ inset: 0 }}>
           <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
           {controlNode}
           {controlStartNode}
         </div>
         {textNode}
+        {reveal != null && (
+          <div className="kol-card-reveal absolute inset-0 flex items-center justify-center p-8 pointer-events-none" style={{ zIndex: 2 }}>{reveal}</div>
+        )}
       </>
     )
 
@@ -290,7 +298,7 @@ export default function ContentCard({
 
   const common = {
     'data-tags': isHero && Array.isArray(text.tags) && text.tags.length ? text.tags.join(' ') : undefined,
-    className: `kol-card group flex ${expanded ? 'flex-row-reverse' : 'flex-col'} ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${className}`.trim(),
+    className: `kol-card group flex ${box.layout === 'canvas' && reveal != null ? 'has-reveal' : ''} ${expanded ? 'flex-row-reverse' : 'flex-col'} ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${className}`.trim(),
     style: {
       /* same reason as ContentRow: rest colours are PROPERTIES, because an
        * inline background/borderColor outranks the hover class and the step

package/src/molecules/ContentText.jsx

@@ -88,13 +88,16 @@ const RAMP = {
     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: {
+    /* RULED ON SCREEN (TypefaceCardAndRow, kol-website 2026-08-27): name and
+     * classification are FULL ink, the year steps to 64; the card's title is the
+     * row's title string — one title voice for the typeface family. Ink only. */
     /* 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' },
+    card: { title: 'kol-mono-14 uppercase text-emphasis', 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' },
+    row:  { title: 'kol-mono-14 uppercase text-emphasis', body: 'kol-mono-12 text-meta', detail: 'kol-mono-14 text-emphasis', date: 'kol-mono-12 text-fg-64' },
   },
 }