@kolkrabbi/kol-component 0.53.0 → 0.54.0

package/package.json

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

@@ -35,11 +35,12 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * @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({
@@ -54,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
@@ -67,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) =>