@kolkrabbi/kol-theme 0.188.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-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.188.0",
+  "version": "0.189.0",
   "description": "Tokens and base CSS",
   "license": "MIT",
   "type": "module",