@kolkrabbi/kol-theme 0.61.0 → 0.63.0

package/kol-components-atoms.css

@@ -612,6 +612,18 @@
   opacity: 1;
 }
 
+/* ON MEDIA (ContentFiltersCollection, kol-r2b2 2026-08-27): a hairline box
+ * over a photo nearly vanishes unchecked — the same reason .kol-media-control
+ * carries its own fill. The unchecked box takes that plate; checked is
+ * unchanged (white plate, black check). */
+.toggle-checkbox--media .toggle-checkbox-indicator {
+  background-color: var(--kol-oq-12);
+  border-color: transparent;
+}
+.toggle-checkbox--media.is-active .toggle-checkbox-indicator {
+  background-color: var(--kol-color-absolute-white);
+}
+
 
 /* ═══════════════════════════════════════════════════════════════
  * Slider — molecules/Slider.jsx

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
@@ -1049,6 +1061,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.61.0",
+  "version": "0.63.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",