@kolkrabbi/kol-theme 0.186.0 → 0.188.0

package/kol-animation.css

@@ -183,6 +183,59 @@
   .kol-card.has-reveal .kol-card-reveal { transition: none; }
 }
 
+/* ─────────────────────────────────────────────────────────────────────
+ * ContentCard `back` — the second cover (AppCardBackCover, kol-monitor
+ * 2026-10-24: a patch card's cover is the patch's OUTPUT now, and the rack
+ * it was built on is still worth seeing — "both on one card: the output in
+ * front and the rack revealed on hover"). Hover and keyboard focus reveal
+ * it; `selected` is never read, so the selected state does not move. The
+ * card root names the treatment in `data-back`; the three are on the
+ * open-questions page (round 17) for the user's pick:
+ *
+ *   flip-image  the media turns — the print flip's turn (0.4s ease-out,
+ *               preserve-3d, perspective 1000) with a real back face; the
+ *               plate and the corner controls stay put
+ *   flip-card   the whole card turns; the back fills it, bare
+ *   hover       the back CUTS in over the front — a swap, never an
+ *               opacity crossfade (user: "not fade")
+ *
+ * Touch has no hover and gets nothing: the front is the card. Reduced
+ * motion drops the turn's transition, so both flips become the cut.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-card[data-back] .kol-card-turn-inner {
+  position: relative;
+}
+.kol-card[data-back] .kol-card-face--back {
+  position: absolute;
+  inset: 0;
+}
+.kol-card[data-back^="flip"] .kol-card-turn,
+.kol-card[data-back="flip-card"] {
+  perspective: 1000px;
+}
+.kol-card[data-back^="flip"] .kol-card-turn-inner {
+  transform-style: preserve-3d;
+  transition: transform 0.4s ease-out;
+}
+.kol-card[data-back^="flip"] .kol-card-face {
+  backface-visibility: hidden;
+}
+.kol-card[data-back^="flip"] .kol-card-face--back {
+  transform: rotateY(180deg);
+}
+.kol-card[data-back="hover"] .kol-card-face--back {
+  opacity: 0;
+}
+@media (hover: hover) {
+  .kol-card[data-back^="flip"]:hover .kol-card-turn-inner { transform: rotateY(180deg); }
+  .kol-card[data-back="hover"]:hover .kol-card-face--back { opacity: 1; }
+}
+.kol-card[data-back^="flip"]:focus-visible .kol-card-turn-inner { transform: rotateY(180deg); }
+.kol-card[data-back="hover"]:focus-visible .kol-card-face--back { opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .kol-card[data-back^="flip"] .kol-card-turn-inner { transition: none; }
+}
+
 /* ─────────────────────────────────────────────────────────────────────
  * ContentMedia — the hover zoom
  *

package/kol-components-atoms.css

@@ -867,7 +867,9 @@
   width: 4px;
   height: 4px;
   border-radius: 50%;
-  background: var(--kol-accent-primary);
+  /* THE ROW'S INK, not the accent (SiteRailDotNoAccent, kol-studio 2026-10-24 — user: *"the dot is not supposed to be
+   * accented. remove the accent!"*): the active row is on-primary, and its dot is the same ink in both themes */
+  background: currentColor;
 }
 
 

package/kol-components-molecules.css

@@ -2342,6 +2342,11 @@ img.kol-quicklook-media--fill { width: var(--kol-ql-max-w); height: auto; max-he
   display: flex;
   flex-direction: column;
   padding-block: var(--kol-spacing-8);
+  /* THE RAIL STAYS IN ITS COLUMN (TocRailLongLabels, kol-studio 2026-10-24): fixed and content-sized, a long label grew
+   * the whole rail leftwards over the page. Capped at the frame's TOC column (kol-framework's `--kol-shell-toc-w`, 256),
+   * padding included; the rows are bounded by it and the labels ellipsize inside. */
+  box-sizing: border-box;
+  max-width: var(--kol-shell-toc-w, 16rem);
 }
 /* The lens scales about the edge the rail is pinned to, so the column's outer
  * edge stays a straight line while the type breathes. The wide inner padding is
@@ -2366,6 +2371,9 @@ img.kol-quicklook-media--fill { width: var(--kol-ql-max-w); height: auto; max-he
   gap: var(--kol-spacing-3);
   padding-block: 2px;
   text-decoration: none;
+  /* bounded by the rail's content box, so the label's cap below has a width to read (a content-sized row would take
+   * the long label's own width) */
+  max-width: 100%;
 }
 .kol-toc--right .kol-toc-row { justify-content: flex-end; }
 .kol-toc--left  .kol-toc-row { flex-direction: row-reverse; justify-content: flex-end; }
@@ -2379,6 +2387,14 @@ img.kol-quicklook-media--fill { width: var(--kol-ql-max-w); height: auto; max-he
    * the scale did not. */
   display: inline-block;
   white-space: nowrap;
+  /* A LONG LABEL STAYS IN THE COLUMN (TocRailLongLabels, kol-studio 2026-10-24: a doc's own title, "Rebrand — Expanded
+   * Scope (Campaign + Motion)", ran left out of the aside and over the page's table). The label is capped at the row's
+   * width over the lens's largest scale (0.78 + 0.42 = 1.2, growing from the outer edge), so even the lit row ends
+   * inside the rail; past that it ellipsizes. */
+  min-width: 0;
+  max-width: calc(100% / 1.2);
+  overflow: hidden;
+  text-overflow: ellipsis;
   opacity: calc(0.26 + 0.74 * var(--m));
   transform: scale(calc(0.78 + 0.42 * var(--m)));
   will-change: transform, opacity;

package/kol-components-organisms.css

@@ -99,6 +99,15 @@
   white-space: nowrap;
 }
 
+/* the WRAPPING body cell (TableWrapTextCell, kol-studio 2026-10-24): a long free-text column — a roster's notes — at the
+ * body cell's face and size, wrapping inside a measure instead of pushing the table sideways. `Table` puts it on a
+ * column's `wrap: true`; the measure is the meta cell's idea at the body size. */
+.kol-table-cell-text--wrap {
+  white-space: normal;
+  min-width: 12rem;
+  max-width: 32rem;
+}
+
 .kol-table-cell-meta {
   padding: 12px 16px;
   font-family: var(--kol-font-family-mono);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.186.0",
+  "version": "0.188.0",
   "description": "Tokens and base CSS",
   "license": "MIT",
   "type": "module",