@kolkrabbi/kol-theme 0.62.0 → 0.64.0

package/kol-components-molecules.css

@@ -900,8 +900,20 @@
 .kol-row--divided {
   border-bottom: 1px solid var(--kol-fg-08);
 }
+/* THE THUMB IS A FIXED SQUARE BOX (ContentRowsAndPrintCard, kol-website
+ * 2026-08-27 — user: "the image should not control height, image should fit
+ * the row image placeholder"). Verbatim from the /stack + /prints tune: the
+ * box is `--kol-row-thumb` wide and square, sits at the top of the row, and
+ * whatever is inside fills it (ContentMedia object-covers). Row height =
+ * max(thumb, text) — an image's intrinsic height never sizes a row again. */
 .kol-row > .kol-row-thumb {
   width: var(--kol-row-thumb);
+  aspect-ratio: 1 / 1;
+  align-self: flex-start;
+}
+.kol-row > .kol-row-thumb > * {
+  height: 100%;
+  width: 100%;
 }
 
 /* CONTAINER query, not a viewport one (2026-08-15). The row steps on the width
@@ -983,6 +995,33 @@
               border-color     300ms var(--kol-ease-house);
 }
 
+/* ContentCard `reveal` (TypefaceCardAndRow, kol-website 2026-08-27 — the
+ * shipped TypefaceLibraryItem's hover, verbatim): the plate and the media
+ * fade OUT, the reveal node fades IN, all 300ms on the house curve. Keyed
+ * on the card root, only when it carries a reveal (`has-reveal`). */
+.kol-card.has-reveal .kol-card-plate,
+.kol-card.has-reveal .kol-card-canvas-media,
+.kol-card.has-reveal .kol-card-reveal {
+  transition: opacity 300ms var(--kol-ease-house);
+}
+.kol-card.has-reveal .kol-card-reveal {
+  opacity: 0;
+}
+@media (hover: hover) {
+  .kol-card.has-reveal:hover .kol-card-plate,
+  .kol-card.has-reveal:hover .kol-card-canvas-media {
+    opacity: 0;
+  }
+  .kol-card.has-reveal:hover .kol-card-reveal {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kol-card.has-reveal .kol-card-plate,
+  .kol-card.has-reveal .kol-card-canvas-media,
+  .kol-card.has-reveal .kol-card-reveal { transition: none; }
+}
+
 /* ─────────────────────────────────────────────────────────────────────
  * The house expand — molecules/SearchInput.jsx · organisms/ContentFilters.jsx
  *
@@ -1049,6 +1088,16 @@
   }
 }
 
+/* ContentMedia `fade` — the image fades in on load (PrintGridCard's 500ms,
+ * carried to ContentCard print 2026-08-27). Opacity only; no relayout. */
+.kol-media-fade {
+  opacity: 0;
+  transition: opacity 500ms var(--kol-ease-house);
+}
+.kol-media-fade.is-loaded {
+  opacity: 1;
+}
+
 /* ─────────────────────────────────────────────────────────────────────
  * ContentText — the title dim (StackCardHover, 2026-08-27)
  *

package/kol-type-roles.css

@@ -270,6 +270,22 @@
   color: var(--kol-fg-emphasis);
 }
 
+/* THE EYEBROW HAS ONE NAME (ContentRowsAndPrintCard, user 2026-08-27: "you have
+ * a class for eyebrow that's not called eyebrow but kicker? you think that's
+ * good practice?"). `kol-eyebrow` is the role — mono 12 · 500 · 0.06em ·
+ * uppercase · fg-64; the slot is `eyebrow` on ContentText and SectionText.
+ * `kol-card-kicker` is the alias below, on the retirement ledger. */
+.kol-eyebrow {
+  font-family: var(--kol-font-family-mono);
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--kol-fg-64);
+}
+
+/* @deprecated 2026-08-27 → kol-eyebrow */
 .kol-card-kicker {
   font-family: var(--kol-font-family-mono);
   font-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.62.0",
+  "version": "0.64.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",