@kolkrabbi/kol-theme 0.187.0 → 0.189.0

package/kol-animation.css

@@ -202,38 +202,47 @@
  * 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 {
+/* THE WHOLE CARD TURNS (AppCardWholeFlip, kol-monitor 2026-10-24 — user: *"it doesnt truly flip the card, there is
+ * still the background that remains"*): `flip-card`'s attributes ride a TURNER around the card root, so the root — its
+ * ground included — is the front face and nothing stays behind; `flip-image` and `hover` still mark the root. The
+ * reveal is OPT-IN: hover (and keyboard focus) turn a card only under `data-back-hover` (*"hover flips card? default
+ * off"*), and `data-flipped` turns it on the consumer's word (*"make the cards flip on a shortcut"*) — a page turns
+ * every card on a key. The turn is monitor's: 450ms ease, both faces backface-hidden, never a timed visibility. */
+[data-back] .kol-card-turn-inner {
   position: relative;
 }
-.kol-card[data-back] .kol-card-face--back {
+[data-back] .kol-card-face--back {
   position: absolute;
   inset: 0;
 }
-.kol-card[data-back^="flip"] .kol-card-turn,
-.kol-card[data-back="flip-card"] {
+[data-back^="flip"] .kol-card-turn,
+[data-back="flip-card"].kol-card-turn {
   perspective: 1000px;
 }
-.kol-card[data-back^="flip"] .kol-card-turn-inner {
+[data-back^="flip"] .kol-card-turn-inner {
   transform-style: preserve-3d;
-  transition: transform 0.4s ease-out;
+  transition: transform 450ms ease;
 }
-.kol-card[data-back^="flip"] .kol-card-face {
+[data-back^="flip"] .kol-card-face {
   backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
-.kol-card[data-back^="flip"] .kol-card-face--back {
+[data-back^="flip"] .kol-card-face--back {
   transform: rotateY(180deg);
 }
-.kol-card[data-back="hover"] .kol-card-face--back {
+[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; }
+  [data-back^="flip"][data-back-hover]:hover .kol-card-turn-inner { transform: rotateY(180deg); }
+  [data-back="hover"][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; }
+[data-back^="flip"][data-back-hover]:focus-within .kol-card-turn-inner,
+[data-back^="flip"][data-flipped] .kol-card-turn-inner { transform: rotateY(180deg); }
+[data-back="hover"][data-back-hover]:focus-within .kol-card-face--back,
+[data-back="hover"][data-flipped] .kol-card-face--back { opacity: 1; }
 @media (prefers-reduced-motion: reduce) {
-  .kol-card[data-back^="flip"] .kol-card-turn-inner { transition: none; }
+  [data-back^="flip"] .kol-card-turn-inner { transition: none; }
 }
 
 /* ─────────────────────────────────────────────────────────────────────

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/kol-design-tokens.css

@@ -49,6 +49,19 @@
    * 24. CommandOverlay (field-aligned rows) and the Quick Look header (a toolbar) keep their own. */
   --kol-pad-overlay: var(--kol-spacing-5);
 
+  /* RAIL TIERS (RailKit, kol-monitor 2026-10-24 — user: *"currently settings is showing 380 wide and padding is totally
+   * different in the rail and the settings"*). One width and one padding per tier, the same `app` · `site` split the
+   * cards and the page headers take; `Rail variant` and `SettingsPanel tier` read them, so a page rail and the settings
+   * rail of one app cannot disagree. `app` 320 is the shell rail's open width on a wide screen and the narrowest that
+   * keeps a 160 label column beside a usable control (fxr's inspector rides the shell rail's 264 · 320 ramp; monitor's
+   * patch table had 440); `site` 380 is the settings rail as locked 2026-08-27. The padding is the overlay inset in both
+   * — the 2026-10-18 ruling — named per tier so one can move without the other. The app number is decided for review
+   * (open questions round 18). */
+  --kol-rail-w-app: 320px;
+  --kol-rail-w-site: 380px;
+  --kol-pad-rail-app: var(--kol-pad-overlay);
+  --kol-pad-rail-site: var(--kol-pad-overlay);
+
   /* CARD padding (2026-08-15, content-card ruling) — flat, stepped by the
    * card's `size` prop, never by breakpoint. 12/16/24. */
   --kol-pad-card-sm: 0.75rem;

package/package.json

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