@kolkrabbi/kol-theme 0.130.0 → 0.132.0

package/kol-animation.css

@@ -333,8 +333,9 @@
  * kol-component's `utilities/motion.js`, GRAB); `clamp()` holds it half its own
  * length from either end so it stops flush, never past.
  *
- * Longer and finer than the ColumnBrowser's 3 × 32 — on a rail it should read
- * as a thickening of the line, not a tab stuck to it. The fade is long and
+ * Fine and long — it should read as a thickening of the line, not a tab stuck
+ * to it. (This said "longer and finer than the ColumnBrowser's 3 × 32" until
+ * 2026-09-02; that handle takes the same 0.125 × 4.5rem now.) The fade is long and
  * unhurried at BOTH ends on a symmetric in-out: an ease-out popped the first
  * 20 % and crawled the rest, which the user read as a jerk.
  * ═════════════════════════════════════════════════════════════════════ */
@@ -370,6 +371,18 @@
   .kol-rail-grab::before { transition: none; }
 }
 
+/* The ColumnBrowser's two handles wear the SAME pill (BrowsePageRulingsAndSeams,
+ * kol-r2b2 2026-09-02, user ruling) — `useGrabEdge` drives both. Their geometry
+ * and placement differ and stay with the component in
+ * kol-components-molecules.css (the strips sit INSIDE the border they grab, and
+ * there are two axes); only the reduced-motion cut belongs here, with every
+ * other one. The 08-28 note on the rail's pill — "Longer and finer than the
+ * ColumnBrowser's 3 × 32" — is stale: they are the same 0.125 × 4.5rem now. */
+@media (prefers-reduced-motion: reduce) {
+  .kol-column-browser-resize-x::before,
+  .kol-column-browser-resize-y::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

package/kol-components-atoms.css

@@ -133,7 +133,7 @@
  * sm (12px in 26–28), which is the one reason the rack's TextInput / Dropdown /
  * Selector could not collapse onto Input / Dropdown / Stepper. xs = kol-mono-8
  * (line-height 12) + 4px vertical + the shell's 1px ring = 22px, 8px sides,
- * the xs radius; the icon-only square is 20.
+ * the xs radius; the icon-only square is 22, the same height (2026-09-02).
  * Opt-in by prop only — the 2026-07-28 "dropdowns are sm at every viewport"
  * law is untouched; nothing ramps to xs by viewport. */
 .kol-control-xs { padding: 4px 8px; border-radius: var(--kol-radius-xs); }
@@ -261,13 +261,23 @@
   line-height: 0;
 }
 /* Icon-only is a GEOMETRY condition, not a variant (2026-07-28, user-ordered):
- * a lone glyph gets a PINNED SQUARE per rung — sm 28 / md 32 / lg 36 — equal to
- * the rung's button height and independent of glyph size (padding-derived
- * squares drifted with icon size; user law: the box never moves). */
-.kol-btn-icon.kol-btn-xs { width: 20px; height: 20px; padding: 0; }
-.kol-btn-icon.kol-btn-sm { width: 28px; height: 28px; padding: 0; }
+ * a lone glyph gets a PINNED SQUARE per size, equal to that size's button height
+ * and independent of glyph size (padding-derived squares drifted with icon size;
+ * user law: the box never moves).
+ *
+ * EVERY FAMILY HITS THE SAME HEIGHT AT THE SAME SIZE (user ruling 2026-09-02:
+ * *"xs sm md and lg all have height in pixels that has to match"* · *"so button
+ * and dropdown can align and input and whatever else"*). These squares read
+ * 20/28/32/36 while the text control on the same row — padding + that size's
+ * mono line-height + the 1px ring — measures 22/26/32/40. Only `md` lined up: at
+ * `sm` an icon button stood 2px TALLER than the Input beside it, at `lg` 4px
+ * shorter, at `xs` 2px shorter. Three families (control shell, text button,
+ * segmented) already agreed on 22/26/32/40, so the squares conform to them, not
+ * the other way round. Glyphs are untouched — SOLO still resolves 16/20/24. */
+.kol-btn-icon.kol-btn-xs { width: 22px; height: 22px; padding: 0; }
+.kol-btn-icon.kol-btn-sm { width: 26px; height: 26px; padding: 0; }
 .kol-btn-icon.kol-btn-md { width: 32px; height: 32px; padding: 0; }
-.kol-btn-icon.kol-btn-lg { width: 36px; height: 36px; padding: 0; }
+.kol-btn-icon.kol-btn-lg { width: 40px; height: 40px; padding: 0; }
 
 .kol-btn-primary {
   background: var(--kol-surface-secondary);
@@ -338,9 +348,10 @@
 }
 
 /* Navigation (2026-07-28, user-ordered) — chrome for links that move between
- * pages, not tool actions. SQUARE container: padding = the rung's vertical pad
- * on all four sides (sm 24 / md 30 / lg 36 outer — the text-button height of
- * the same rung, so mixed bars line up). Quiet states: rest dimmed, hover the
+ * pages, not tool actions. The SQUARE comes from `.kol-btn-icon` above — one
+ * height per size, 22/26/32/40, so mixed bars line up (this rule described a
+ * padding-derived box, `sm 24 / md 30 / lg 36`, from before the square was
+ * pinned; corrected 2026-09-03). Quiet states: rest dimmed, hover the
  * ghost wash, and ACTIVE keys off aria-current="page" (NavLink sets it
  * natively) — brighter glyph on a faint wash, never the pressed fill;
  * navigation is location, not a toggled tool. */
@@ -1238,12 +1249,13 @@ a.kol-icon-frame {
 .kol-icon-frame-radius-full,
 .kol-btn-radius-full { border-radius: 9999px; }
 
-/* pinned squares — the box never moves with glyph size (user law 2026-07-28) */
-/* xs — the panel rung; the ladder is one ladder (user ruling 2026-09-01: "obviously we apply xs as an option") */
-.kol-icon-frame-xs { width: 20px; height: 20px; }
-.kol-icon-frame-sm { width: 28px; height: 28px; }
+/* pinned squares — the box never moves with glyph size (user law 2026-07-28),
+ * on the size's HEIGHT so a frame lines up with the Button, Input and Dropdown
+ * beside it (user ruling 2026-09-02 — see .kol-btn-icon above). 22/26/32/40. */
+.kol-icon-frame-xs { width: 22px; height: 22px; }
+.kol-icon-frame-sm { width: 26px; height: 26px; }
 .kol-icon-frame-md { width: 32px; height: 32px; }
-.kol-icon-frame-lg { width: 36px; height: 36px; }
+.kol-icon-frame-lg { width: 40px; height: 40px; }
 
 .kol-icon-frame-primary {
   background: var(--kol-surface-secondary);

package/kol-components-molecules.css

@@ -45,9 +45,12 @@
  * 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; }
+/* 22/26/32/40 since 2026-09-02 — one height per size, so the trigger, the
+ * IconFrame and the Input on a row are the same box (see .kol-btn-icon). */
+.kol-dd-trigger.kol-btn-xs { height: 22px; padding-block: 0; }
+.kol-dd-trigger.kol-btn-sm { height: 26px; 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; }
+.kol-dd-trigger.kol-btn-lg { height: 40px; padding-block: 0; }
 /* REST AND OPEN ARE THE ONLY STATES (2026-07-15, re-called 2026-08-09 and
  * 2026-08-28). No :hover or :active rules for the trigger live here any more —
  * kol-components-atoms.css excludes `.kol-dd-trigger` from every variant's
@@ -866,7 +869,13 @@
  * compositing layer on every overlay open, on a phone, for a separation the
  * 60% tint already carries. */
 .kol-overlay-scrim {
-  background-color: color-mix(in srgb, #000 60%, transparent);
+  /* ONE SCRIM, ONE TINT (user ruling 2026-09-03: *"makes sense to me they are
+   * the same no?"*). Was a raw `#000` at 60 % — a literal in a token system, and
+   * 60 is not a ladder stop (…40 · 48 · 64 · 72…). `.kol-shell-drawer-scrim`
+   * already spelled it correctly at 48, so the same gesture dimmed to 60 in the
+   * site shell and 48 in the app shell. 48 for both: on the ladder, already
+   * shipping, and the class was minted to BE one tint. */
+  background-color: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
 }
 
 .kol-overlay-panel {
@@ -1351,33 +1360,76 @@
   cursor: row-resize;
   touch-action: none;
 }
-/* THE GRAB IS A PILL, NOT A WASH (ColumnBrowserChromeCorrections, kol-r2b2
- * 2026-08-28 — user: "dont show me this way to grab" · "like in the sidenav" ·
- * "MIDDLE smack middle" · "more smooth animation longer in and out"): the same
- * affordance as the framework's `.kol-sidenav-grab::before` — 0.1875rem × 2rem,
- * radius-full, fg-64, dead centre (pointer-following was built and rejected).
- * Two deliberate differences: hidden at rest rather than dim (N handles standing
- * at rest is noise where the SideNav has one) and 420ms rather than 150ms. */
+/* THE GRAB PILL — ON THE LINE, FOLLOWING THE POINTER (BrowsePageRulingsAndSeams,
+ * kol-r2b2 2026-09-02, user ruling; supersedes the "pointer-following was built
+ * and rejected" note that stood here from ColumnBrowserChromeCorrections
+ * 2026-08-28).
+ *
+ * The rejection was already contradicted by the DS itself: the rail's grab
+ * (`kol-animation.css` § THE GRAB PILL, RailFlatGrabOpen, kol-mirror 2026-08-28
+ * — *"make it like it is in kol-r2b2, it has animation and gsap"*) shipped the
+ * pointer-follow, the 0.125 × 4.5rem geometry and the slow proximity fade the
+ * SAME DAY, and its own comment noted the two handles were knowingly different.
+ * One gesture, two shapes, is the ruling now. `useGrabEdge` drives both.
+ *
+ * THESE HANDLES ARE NOT THE SIDENAV'S, and that is the part to keep straight:
+ *
+ *   ACROSS  the rail's strip STRADDLES its line, so a strip-centred pill IS the
+ *           line. These strips lie INSIDE the border they grab — the x strip is
+ *           pulled back over the column's right edge (`margin-left: -8px`), the
+ *           y strip sits on the root's inner bottom edge — so a strip-centred
+ *           pill is always ~4px short of it. The FAR edge plus half the 1px
+ *           border is the line: `calc(100% + 0.5px)`.
+ *   AXES    the rail has one vertical edge; there are two here, and the pill on
+ *           each travels the other way from what it resizes. The x handle reads
+ *           `--kol-rail-grab-y`, the y handle `--kol-rail-grab-x`.
+ *   REST    hidden, not dim — N handles standing at rest is noise where the
+ *           SideNav has one. The rail's pill rests visible; these do not.
+ *
+ * Shared with the rail: the fine/long geometry and the 1800ms fade with its
+ * 400ms rest delay and 40ms engaged delay. NOT shared, on the user's ruling
+ * 2026-09-02 (*"its a bit different, its not like the sidenav"*): the CURVE is
+ * kol-r2b2's ease-out, and the travel is `GRAB_COLUMN` in kol-component's
+ * motion.js — a 2.8s chase on a 30px retarget, so the pill tracks the pointer
+ * down the edge rather than landing and holding on the rail's 90px dwell. The
+ * rail's own symmetric in-out was ruled for the rail, on a pill that rests
+ * VISIBLE and only brightens; these are hidden at rest and the whole fade is
+ * the reveal. `clamp()` holds the pill half its own length from each end. */
 .kol-column-browser-resize-x::before,
 .kol-column-browser-resize-y::before {
   content: '';
   position: absolute;
-  top: 50%;
-  left: 50%;
   translate: -50% -50%;
   border-radius: var(--kol-radius-full);
   background: var(--kol-fg-64);
   opacity: 0;
-  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1) 400ms, background-color 500ms ease;
 }
-.kol-column-browser-resize-x::before { width: 0.1875rem; height: 2rem; }
-.kol-column-browser-resize-y::before { width: 2rem; height: 0.1875rem; }
-.kol-column-browser-resize-x:hover::before,
+.kol-column-browser-resize-x::before {
+  width: 0.125rem;
+  height: 4.5rem;
+  left: calc(100% + 0.5px);
+  top: clamp(2.25rem, var(--kol-rail-grab-y, 50%), calc(100% - 2.25rem));
+}
+.kol-column-browser-resize-y::before {
+  width: 4.5rem;
+  height: 0.125rem;
+  top: calc(100% + 0.5px);
+  left: clamp(2.25rem, var(--kol-rail-grab-x, 50%), calc(100% - 2.25rem));
+}
+/* `is-near` = the pointer is within GRAB.near of THIS handle's line (JS,
+ * hysteresis at GRAB.sleep). The pill shows before you are on the 8px strip, so
+ * the grab is discoverable instead of hidden. */
+.kol-column-browser-resize-x.is-near::before,
 .kol-column-browser-resize-x.is-dragging::before,
-.kol-column-browser-resize-y:hover::before,
+.kol-column-browser-resize-y.is-near::before,
 .kol-column-browser-resize-y.is-dragging::before {
   opacity: 1;
+  transition-delay: 40ms;
 }
+.kol-column-browser-resize-x.is-dragging::before,
+.kol-column-browser-resize-y.is-dragging::before { background: var(--kol-fg-96); }
+
 .kol-overlay .kol-prose {
   max-width: var(--kol-content-measure);
   margin-inline: auto;

package/kol-typography-mono.css

@@ -23,8 +23,10 @@
  * the next question would have meant another one.
  *
  * The axis removes the question. `wght 100 800` means any weight is a NUMBER,
- * not a new file — and the payload went DOWN: two variable faces at ~230 kb
+ * not a new file — and the payload went DOWN: two variable faces at ~148 kb
  * against 1024 kb of statics, with four weights the statics never had.
+ * (This read ~230 kb until 2026-09-03; measured on disk, roman 72K + italic
+ * 76K. 03-typography.md's 151 kb was the correct figure all along.)
  *
  * The tradeoff, stated: a variable file is one download, so the page fetches
  * the whole axis or none of it. At this size that is still less than the two

package/package.json

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