@kolkrabbi/kol-theme 0.135.0 → 0.137.0

package/kol-components-organisms.css

@@ -670,8 +670,26 @@
 .kol-filters-row {
   container-type: inline-size;
 }
+/* THE TRACK COUNT, COMPUTED ONCE AND READ TWICE (CatalogFilterFirstGroupTrackCount,
+ * kol-client-olina 2026-09-03). The first group was `(100cqw − 120px) / 6` — one
+ * column of a six-track grid — while the catalog grid asks how many tracks FIT
+ * (ceiling 6, floor `--kol-catalog-min`): on a capped page at 1280 the grid
+ * renders five at 165 and the group measured 133, its right edge mid-card.
+ * The 2026-08-27 "sits over the first card" law was only true at six.
+ *
+ * Both now read one number: the count the grid actually renders —
+ * `min(cols, floor((W + gap) / (min + gap)))`, which is exactly what
+ * `repeat(auto-fill, minmax(max(min, (W − 5·gap) / 6), 1fr))` resolved to, so
+ * six-track pages are pixel-identical and narrower ones finally agree.
+ * `100cqw` is each element's own container — the filter row and the catalog
+ * grid's wrapper are both `inline-size` containers of the page's width.
+ * `round(down, …)` is CSS Values 4 (Firefox 118 · Chrome 125 · Safari 15.4). */
+.kol-filters-first,
+.kol-catalog-grid {
+  --_kol-catalog-n: max(1, min(var(--kol-catalog-cols, 6), round(down, (100cqw + 24px) / (var(--kol-catalog-min, 160px) + 24px), 1)));
+}
 .kol-filters-first {
   flex: none;
-  width: calc((100cqw - 120px) / 6);
+  width: calc((100cqw - (var(--_kol-catalog-n) - 1) * 24px) / var(--_kol-catalog-n));
 }
 

package/kol-components-shell.css

@@ -64,10 +64,34 @@
  * real difference between a shell page and a `.kol-page`, and it is a prop
  * now so a site adopting the shipped catalog page does not silently get app
  * geometry. */
-.kol-shell-page--capped { max-width: var(--kol-container-max, none); margin-inline: auto; width: 100%; }
+.kol-shell-page--capped {
+  max-width: var(--kol-container-max, none);
+  margin-inline: auto;
+  width: 100%;
+  /* the site tier's VERTICAL rung too: `.kol-page` pads `64px` block, and a
+   * capped page beside twenty `.kol-page` siblings sat 16px higher on the 48
+   * gutter (kol-client-olina 2026-09-03, on the link). Verbatim to `.kol-page`;
+   * the app tier (bleed) keeps its 48 — every monitor / mirror / fxr page. */
+  padding-block: 64px;
+}
 /* PageBleed — cancels the gutter for a full-width embed (monitor's rack) */
 .kol-shell-page-bleed { margin-inline: calc(var(--kol-shell-page-pad) * -1); }
 
+/* ── CatalogPage ────────────────────────────────────────────────────────── */
+
+/* THE CATALOG GRID — a ceiling with a floor: up to `--kol-catalog-cols` (6)
+ * tracks, none narrower than `--kol-catalog-min` (160; `CatalogPage minColumn`
+ * sets it), gap 24. The count `--_kol-catalog-n` is computed in
+ * kol-components-organisms.css and shared with `.kol-filters-first`, so the
+ * filter row's first group is one track of THIS grid at every width — the
+ * grid used to be an inline `auto-fill` that resolved to the same tracks but
+ * told nobody how many (CatalogFilterFirstGroupTrackCount, 2026-09-03). */
+.kol-catalog-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(var(--_kol-catalog-n), minmax(0, 1fr));
+}
+
 /* ── NavRail ────────────────────────────────────────────────────────────── */
 
 /* The flat rail's own stacking. Geometry (the fixed box, the padding, the gap)

package/package.json

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