npm - @kolkrabbi/kol-theme - Versions diffs - 0.129.0 → 0.131.0 - Mend

@kolkrabbi/kol-theme 0.129.0 → 0.131.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/kol-animation.css +15 -2
package/kol-components-atoms.css +11 -1
package/kol-components-molecules.css +99 -16
package/package.json +1 -1

package/kol-animation.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -189,11 +189,21 @@
  * inside the content column's right edge — lined up with nothing the fields
  * below it establish. On the edge, the button's box sits on the same vertical
  * as the controls under it. */
+/* THE CLOSE MUST OUT-STACK THE SHEET'S OWN CONTENT (BrowsePageRulingsAndSeams,
+ * kol-r2b2 2026-09-02; user 2026-08-28: "doesnt work clicking close"). It sat
+ * at a bare `10` — the dropdown rung — and it is the FIRST child of the sheet,
+ * so any consumer content after it at 10 or above covered the corner and the
+ * click landed on the panel behind. Reproduces in the DS with any tall sheet.
+ * `--kol-z-overlay` (50), not the reported 60: the ladder IS the z-contract
+ * (01-foundations/01-tokens § Stacking) and a hand-typed number here is the
+ * thing that law exists to stop. 50 clears dropdown (10) and sticky (20) inside
+ * the sheet, and a Dropdown opened from the sheet still covers it — that one
+ * portals to <body> at 210, outside this stacking context, which is correct. */
 .kol-overlay-close {
   position: absolute;
   top: var(--kol-spacing-3);
   right: 0;
-  z-index: 10;
+  z-index: var(--kol-z-overlay);
 }
 /* ═══════════════════════════════════════════════════════════════

package/kol-components-molecules.css CHANGED Viewed

@@ -1231,15 +1231,26 @@
 .kol-doc-page .kol-prose td,
 .kol-doc-page .kol-prose th { overflow-wrap: anywhere; word-break: break-word; }
 .kol-doc-page .kol-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+/* 3:5 IS THE TALLEST A DOCUMENT PAGE MAY BE (BrowsePageRulingsAndSeams,
+ * kol-r2b2 2026-09-02; user 2026-08-28: "this is not an approved ratio"). The
+ * overlay page was A-series (1:√2) and the column preview had NO bound at all,
+ * so the FILE decided the height — a 7 KB JSON drew a pane taller than the
+ * browser. 3:5 is the portrait rung on the export-specs ladder below 4:5, and
+ * the floor before a page reads as a 9:16 strip. Both presentations take it:
+ * content scrolls inside the box, the box never grows to the file. */
 .kol-overlay .kol-doc-page {
+  aspect-ratio: 3 / 5;
   height: 85vh;
-  width: calc(85vh / 1.41421);
+  width: auto;
   max-width: calc(100vw - 10rem);
   overflow-y: auto;
   overflow-x: hidden;
   margin-inline: auto;
 }
 .kol-column-browser-preview .kol-doc-page {
+  aspect-ratio: 3 / 5;
+  height: auto;
+  overflow: auto;
   zoom: 0.5;
   background: transparent;
   border-radius: 0;
@@ -1277,11 +1288,42 @@
  * deepest one holding a selection — then it is the selection, full strength.
  * `:has(~ …)` says what a positional selector cannot: "no later column has a
  * selected row". */
+/* ONE FILL ON SCREEN, AND IT MEANS SELECTED (BrowsePageRulingsAndSeams, kol-r2b2
+ * 2026-09-02, user ruling 2026-08-28). Hover and the bare keyboard cursor now
+ * paint NOTHING. With `autoFocus` on there is always a cursor row, so the
+ * 08-28 fill sat on the list permanently and moved with every click — the hover
+ * fill the user removed the day before, back under another name, and at fg-04 it
+ * drowned the selection at fg-02.
+ *
+ * A selected row that is ALSO the cursor keeps its fill, and needs no rule of
+ * its own: `:hover` and `.is-cursor` are (0,2,0), `.is-selected` is (0,2,0) and
+ * comes LATER, so source order hands the tie to the selection. The consumer
+ * needed explicit `.is-selected.is-cursor` selectors only because its override
+ * sat in a later sheet; in one file the order is the mechanism. Do not reorder.
+ *
+ * The VALUES are unchanged and were never wrong — the trail at fg-02, the
+ * deepest column's selection at fg-04. This is a precedence fix, not a palette
+ * one; `autoFocus` and the three-state fill shipped together and have not been
+ * correct together since. */
 .kol-column-browser-row:hover,
-.kol-column-browser-row.is-cursor { background-color: var(--kol-fg-04); }
+.kol-column-browser-row.is-cursor { background-color: transparent; }
 .kol-column-browser-row.is-selected { background-color: var(--kol-fg-02); }
 .kol-column-browser-column:not(:has(~ .kol-column-browser-column .is-selected)) > .is-selected { background-color: var(--kol-fg-04); }
+/* THE ROW IS A PILL (same ticket, user ruling 2026-08-27: "dont make selected
+ * state move the layout"). A constant 4px inset on EVERY row, selected or not,
+ * so the fill appears inside a gutter that was already there instead of the row
+ * changing size; the column pads to match, so the first and last rows sit off
+ * the frame by the same 4. Dividers are gone from the JSX — ColumnBrowser's Row
+ * no longer emits `border-b`, because a hairline under a rounded fill draws the
+ * box the pill is not. `.kol-column-browser-preview` is deliberately NOT in the
+ * padding rule: it has no rows, and its own `p-4` is a Tailwind utility that
+ * would out-rank this layer anyway. */
+.kol-column-browser-row { margin-inline: 4px; }
+.kol-column-browser-column { padding-block: 4px; }
+.kol-column-browser-row.is-selected,
+.kol-column-browser-row.is-cursor { border-radius: var(--kol-radius-sm); }
 /* ColumnBrowser resize handles (ColumnBrowserResize, kol-r2b2 2026-08-27 —
  * Finder's edge handles, user ruling "that should be a set in ds"; native CSS
  * `resize:` rejected). The column border already there is the visual; the
@@ -1309,33 +1351,74 @@
   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, deliberately: the fine/long geometry, the 1800ms fade
+ * with its 400ms rest delay and 40ms engaged delay, and the symmetric in-out
+ * curve. The ease-out kol-r2b2 filed is the curve the rail moved OFF on
+ * 2026-08-28 (it popped the first 20 % and crawled the rest — the user read it
+ * as a jerk); the travel likewise comes from `GRAB` in kol-component's
+ * motion.js — dwell, not a 30px deadband — so one gesture cannot drift into two
+ * feels. `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.45, 0, 0.55, 1) 400ms, background-color 500ms ease;
+}
+.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-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-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/package.json CHANGED Viewed

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