@kolkrabbi/kol-theme 0.88.0 → 0.90.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-molecules.css

@@ -36,6 +36,18 @@
   gap: var(--kol-spacing-1);
   width: 100%;
 }
+/* THE TRIGGER IS ON THE ICON LADDER (DropdownHeightAndHover, kol-fxr 2026-08-28).
+ * A text button takes its height from padding — `.kol-btn-sm` is `4px 12px` on
+ * mono-12, about 24 — while every icon control beside it is PINNED
+ * (`.kol-btn-icon.kol-btn-sm` is 28×28, the 2026-07-28 law: "the box never
+ * moves"). So a `sm` Dropdown sat 4px short of the `IconFrame` and `ThemeToggle`
+ * on its own row — the picker-then-icon-cluster header that kol-r2b2 draws and
+ * the estate is copying. The trigger is the one text control that always sits in
+ * an icon row, so it takes the icon rungs: 28 / 32 / 36. Horizontal padding is
+ * untouched; the vertical goes, because the flex box centres the label. */
+.kol-dd-trigger.kol-btn-sm { height: 28px; padding-block: 0; }
+.kol-dd-trigger.kol-btn-md { height: 32px; padding-block: 0; }
+.kol-dd-trigger.kol-btn-lg { height: 36px; padding-block: 0; }
 /* REST AND OPEN ARE THE ONLY STATES (2026-07-15 ruling, re-called twice
  * 2026-08-09). The trigger wears button chrome, and button chrome hovers AND
  * presses — so every kol-btn variant :hover and :active is PINNED BACK TO
@@ -47,11 +59,19 @@
   background: var(--kol-surface-secondary);
   color: var(--kol-surface-on-primary);
 }
+/* oq-08, NOT oq-16 (DropdownHeightAndHover, kol-fxr 2026-08-28). This is a
+ * pin-back to rest and it stopped being one: `.kol-btn-outline`'s rest border
+ * moved to `oq-08` on 2026-08-26 ("ONE outline border across the controls"),
+ * and this line kept the old `oq-16` — so the outline trigger quietly grew a
+ * hover the 2026-07-15 ruling forbids, and an untoned Dropdown lit while a
+ * sunken one beside it did not. A pin-back has to be re-read whenever the rest
+ * value it mirrors moves; that is the cost of expressing "no state" as a
+ * restatement rather than as an absence. */
 .kol-dd-trigger.kol-btn-outline:not(:disabled):hover,
 .kol-dd-trigger.kol-btn-outline:not(:disabled):active {
   background: transparent;
   color: var(--kol-surface-on-primary);
-  border-color: var(--kol-oq-16);
+  border-color: var(--kol-oq-08);
 }
 /* ONE PIECE MEANS ONE WIDTH (2026-08-09 user call — "they are connected").
  * The trigger reserves the widest option's width by stacking every label in

package/package.json

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