@kolkrabbi/kol-theme 0.87.1 → 0.88.0

package/kol-components-shell.css

@@ -8,31 +8,45 @@
  */
 
 :root {
-  /* THE RAIL WIDTH IS LIVE (RailSideNavPixelParity, kol-fxr 2026-08-28 — user:
-   * "same component both states super nice"): AppShell's rail is kol-framework's
-   * SideNav since kol-shell 0.13.0, so the token that was a fixed 48 now reads
-   * the sidenav's width in whichever state it is in — 16rem open, 56px
-   * collapsed, 0 in the ≤767 drawer — and every consumer that offsets a fixed
-   * element by it (`--monitor-rail`, `--fxr-rail`) follows the drag. AppShell
-   * writes `0px` inline while the rail is hidden (useNavHidden). One rail, one
-   * width, one name: 48 and 56 were two components never measured against
-   * each other. */
-  --kol-shell-rail-width: var(--kol-sidenav-w, 16rem);
+  /* THE RAIL OWNS THIS VARIABLE (RailFlatGrabOpen, kol-mirror 2026-08-28). It
+   * is the rail's LIVE width: `NavRail` sets 48 on mount, writes it per
+   * pointermove while the grab is dragged and gsap-tweens it on release, and
+   * AppShell's content is offset by the same value — so the page is pushed
+   * through the drag. The 48 here is the closed default and the value a
+   * consumer's own fixed chrome (`--monitor-rail`, `--fxr-rail`) reads before
+   * the rail mounts. 0.80.0–0.87.x had it derive from the sidenav tokens,
+   * while the rail WAS a collapsed SideNav; that is reversed. */
+  --kol-shell-rail-width: 48px;
   /* Page gutter — PageShell's padding and PageBleed's negative margin. */
   --kol-shell-page-pad: 48px;
 }
-:root[data-sidenav="collapsed"] { --kol-shell-rail-width: var(--kol-sidenav-w-collapsed, 56px); }
-@media (max-width: 1024px) { :root { --kol-shell-rail-width: var(--kol-sidenav-w-collapsed, 56px); } }
-@media (max-width: 767px) { :root { --kol-shell-rail-width: 0px; } }
 
 /* ── NavRail ────────────────────────────────────────────────────────────── */
 
-/* RETIRED 0.80.0 (RailSideNavPixelParity): `.kol-shell-rail` — the fixed
- * 48px rail's geometry, stacking and its 2026-08-12 active-state rules (ink
- * oq-96, the oq-04 wash held on via aria-current). The shell rail is a
- * SideNav now and wears the sidenav's hop, collapse and active rules
- * (kol-framework.css + the `.kol-sidenav-hop` atoms). Nothing selects the
- * class; it is kept out of the sheet so no consumer copies a dead geometry. */
+/* The flat rail's own stacking. Geometry (the fixed box, the padding, the gap)
+ * rides the element as utilities — it is one div and every child is a direct
+ * child of it, which is the shape the ruling asked for; only the z-tier needs a
+ * rule, because it must join the DS ladder rather than a consumer's raw number
+ * (monitor's z-70 rail sat above its own z-50 overlays, a live stacking bug).
+ * Above page content, BELOW overlay (50) and modal (100). */
+.kol-shell-rail {
+  z-index: var(--kol-z-sticky);
+}
+
+/* The 2026-08-12 active-state ruling, carried natively so consumers delete
+ * their overrides: ink full-strength in EVERY state (the nav variant's oq-64
+ * rest is site-nav quiet, wrong on an icon rail — the rail also sets oq-96
+ * inline per rung); hover = the oq-04 wash from the variant; active route =
+ * that wash HELD ON. Never `selected`/`pressed` — navigation is location, not
+ * a toggled tool. Scoped to the rail: the global
+ * `.kol-btn-nav[aria-current="page"]` brightness-only rule stays the site-nav law. */
+.kol-shell-rail .kol-btn-nav {
+  color: var(--kol-oq-96);
+}
+.kol-shell-rail .kol-btn-nav[aria-current="page"] {
+  background-color: var(--kol-oq-04);
+  color: var(--kol-oq-96);
+}
 
 /* ── GridCard preview fits ──────────────────────────────────────────────── */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.87.1",
+  "version": "0.88.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",