npm - @kolkrabbi/kol-theme - Versions diffs - 0.128.0 → 0.130.0 - Mend

@kolkrabbi/kol-theme 0.128.0 → 0.130.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 (3) hide show

package/kol-components-atoms.css +18 -1
package/kol-components-molecules.css +44 -2
package/package.json +1 -1

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);
 }
 /* ═══════════════════════════════════════════════════════════════
@@ -241,6 +251,13 @@
  * Chrome belongs here, layered, so utilities stay sovereign. The flex
  * centering comes from .kol-btn; the icon-only extra is only line-height. */
 .kol-btn-icon {
+  /* A FIXED SQUARE ON EVERY RUNG (IconButtonNoFlexShrink, kol-monitor
+   * 2026-09-02): in a shrink-to-fit flex row WebKit measured the icon-only
+   * button's contribution as its GLYPH (20 + 2 border = 22), not the 32px
+   * rule, so the row came out short and squeezed the square to 22×32 — the
+   * gear a sliver beside a 32px Dropdown. `flex: none` fixes the measurement
+   * AND the shrink; `flex-shrink: 0` alone fixed only the shrink. */
+  flex: none;
   line-height: 0;
 }
 /* Icon-only is a GEOMETRY condition, not a variant (2026-07-28, user-ordered):

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

package/package.json CHANGED Viewed

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