@kolkrabbi/kol-theme 0.136.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

@@ -77,6 +77,21 @@
 /* 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.136.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",