@kolkrabbi/kol-component 0.52.0 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/organisms/ContentCollection.jsx

@@ -26,22 +26,26 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * never a fixed track count — 05-layout-systems.md, the card-wall law: *"the
  * shell rails eat width that viewport breakpoints can't see, so a forced count
  * compresses every card"* (user call 2026-08-09). Hence `auto-fill` +
- * `minmax()`, with the law's 20rem minimum as the default.
+ * `minmax()`, with the law's minimum as the default — written in PX, not rem
+ * (user ruling 2026-08-15). A track width is a LAYOUT measure, not type: rem
+ * ties it to the root font-size, so a user bumping their browser text size
+ * silently re-counts the columns of every wall in the estate.
  *
  * @param {string}  form     'grid' | 'list'
- * @param {string}  min      grid track minimum, card form (default 20rem — the law)
+ * @param {string}  min      grid track minimum, card form (default 320px)
  * @param {string}  listMin  OPT-IN: makes the list multi-column too, for a dense
  *                           file-browser cut. Unset = one full-width column
- * @param {number}  gap      px between items — defaults PER FORM (grid 24,
- *                           list 8), the values every shipped consumer
- *                           re-typed as a ternary at its own call site. A
- *                           single default meant the ternary survived the
- *                           migration, which is half the duplication
+ * @param {number}  gap      px between items. UNSET reads the token for the
+ *                           form — `--kol-gap-wall-grid` (24) or
+ *                           `--kol-gap-wall-list` (8) — the same treatment
+ *                           `--kol-pad-card-*` gets, and for the same reason:
+ *                           these two numbers were re-typed as a ternary at
+ *                           nine call sites. Pass a number only to differ
  * @param {boolean} stagger  enter animation on/off (reduced motion wins)
  */
 export default function ContentCollection({
   form = 'grid',
-  min = '20rem',
+  min = '320px',
   listMin,
   gap,
   stagger = true,
@@ -51,9 +55,11 @@ export default function ContentCollection({
   const reduced = usePrefersReducedMotion()
   const animate = stagger && !reduced
   const items = Array.isArray(children) ? children.flat() : [children]
-  /* ruled 2026-08-15 — the shipped 24/8 become the defaults, so `gap` is only
-   * passed when a consumer genuinely differs from the house. */
-  const px = gap ?? (form === 'list' ? 8 : 24)
+  /* ruled 2026-08-15 — the shipped 24/8 are TOKENS now, so `gap` is only passed
+   * when a consumer genuinely differs from the house. A number still wins. */
+  const g = gap != null
+    ? `${gap}px`
+    : `var(--kol-gap-wall-${form === 'list' ? 'list' : 'grid'})`
 
   return (
     <ul
@@ -64,7 +70,7 @@ export default function ContentCollection({
         gridTemplateColumns: form === 'list'
           ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : '1fr')
           : `repeat(auto-fill, minmax(${min}, 1fr))`,
-        gap: `${px}px`,
+        gap: g,
       }}
     >
       {items.map((child, i) =>