@kolkrabbi/kol-theme 0.87.1 → 0.89.0

package/kol-animation.css

@@ -353,3 +353,82 @@
 @media (prefers-reduced-motion: reduce) {
   .kol-rail-grab::before { transition: none; }
 }
+
+/* ═════════════════════════════════════════════════════════════════════
+ * SCROLL ENTRANCE — the reveal family (promoted from kol-website's
+ * apps/web/src/styles/animations.css, 2026-08-28, on the user's "it's good to
+ * localise it"; that file's own header had marked it a DS candidate since
+ * 2026-07-28, and it was itself vendored from the elder @kol/ui).
+ *
+ * A consumer's IntersectionObserver adds `.is-visible`; the class is the whole
+ * API. `--kol-reveal-delay` staggers a group without a rule per child.
+ *
+ * The bare `.reveal*` names are kept as ALIASES beside the `kol-*` ones: they
+ * are live in dozens of kol-website call sites and renaming them would be a
+ * migration the promotion does not need. New code takes the prefixed name —
+ * `.reveal` is exactly the sort of word a consumer's own stylesheet also owns.
+ * ═════════════════════════════════════════════════════════════════════ */
+.kol-reveal, .reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 600ms var(--kol-ease-house), transform 600ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 0s));
+}
+/* the group rung: a shorter travel and a default 1s beat, so a set of children
+ * arrives after the block that introduces them */
+.kol-reveal-group, .reveal-group {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 600ms var(--kol-ease-house), transform 600ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 1s));
+}
+/* the diagonal assembly: 40px in from the side AND 32 up, so a row of blocks
+ * converges rather than sliding in parallel */
+.kol-reveal-from-left, .reveal-from-left {
+  opacity: 0;
+  transform: translate(-40px, 32px);
+  transition: opacity 700ms var(--kol-ease-house), transform 700ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 0s));
+}
+.kol-reveal-from-right, .reveal-from-right {
+  opacity: 0;
+  transform: translate(40px, 32px);
+  transition: opacity 700ms var(--kol-ease-house), transform 700ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 0s));
+}
+.kol-reveal.is-visible, .reveal.is-visible,
+.kol-reveal-group.is-visible, .reveal-group.is-visible,
+.kol-reveal-from-left.is-visible, .reveal-from-left.is-visible,
+.kol-reveal-from-right.is-visible, .reveal-from-right.is-visible {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kol-reveal, .reveal,
+  .kol-reveal-group, .reveal-group,
+  .kol-reveal-from-left, .reveal-from-left,
+  .kol-reveal-from-right, .reveal-from-right {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+/* ═════════════════════════════════════════════════════════════════════
+ * AnimatedTitle — the word's rest state (promoted 2026-08-28, same pass).
+ *
+ * The DS has shipped `atoms/AnimatedTitle.jsx` for months while the CSS its
+ * words start from lived in kol-website: the component queried `.animatedWord`
+ * and set `opacity: 0` on nothing, so outside that one app the title rendered
+ * static and visible with no error. A component whose motion is in a consumer
+ * is not shipped. GSAP animates FROM this state; reduced motion skips the
+ * tween entirely (the hook), which is why the fallback below is not optional.
+ * ═════════════════════════════════════════════════════════════════════ */
+.kol-animated-word, .animatedWord {
+  opacity: 0;
+  transform: translate3d(150vw, 3.125rem, 0) rotateY(-45deg) rotateX(15deg);
+  color: inherit;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kol-animated-word, .animatedWord { opacity: 1; transform: none; }
+}

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.89.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",