@kolkrabbi/kol-component 0.88.0 → 0.89.0

package/package.json

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

@@ -41,8 +41,13 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  *
  * @param {string}  form     'grid' | 'list'
  * @param {string}  min      grid track minimum, card form (default 320px)
- * @param {number}  cols     OPT-IN column count, grid form: 1 below md, N from
- *                           md (2–6). Wins over `min`; the list form ignores it
+ * @param {number|object} cols  OPT-IN column count, grid form. A number: 1 below
+ *                           md, N from md (1–6). A map per breakpoint
+ *                           (`{ md: 3, xl: 4 }` — sm · md · lg · xl · 2xl): 1
+ *                           below the first rung, each rung's count from there
+ *                           (ContentCollectionColsResponsive, 2026-08-27 —
+ *                           user: "can we make it 4 in the biggest breakpoint?").
+ *                           Wins over `min`; the list form ignores it
  * @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. UNSET reads the token for the
@@ -53,13 +58,19 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  *                           nine call sites. Pass a number only to differ
  * @param {boolean} stagger  enter animation on/off (reduced motion wins)
  */
-const COLS = {
-  1: 'grid-cols-1',
-  2: 'grid-cols-1 md:grid-cols-2',
-  3: 'grid-cols-1 md:grid-cols-3',
-  4: 'grid-cols-1 md:grid-cols-4',
-  5: 'grid-cols-1 md:grid-cols-5',
-  6: 'grid-cols-1 md:grid-cols-6',
+/* literal per rung × count — a class built at runtime is never emitted */
+const COLS_AT = {
+  sm:  { 1: 'sm:grid-cols-1',  2: 'sm:grid-cols-2',  3: 'sm:grid-cols-3',  4: 'sm:grid-cols-4',  5: 'sm:grid-cols-5',  6: 'sm:grid-cols-6' },
+  md:  { 1: 'md:grid-cols-1',  2: 'md:grid-cols-2',  3: 'md:grid-cols-3',  4: 'md:grid-cols-4',  5: 'md:grid-cols-5',  6: 'md:grid-cols-6' },
+  lg:  { 1: 'lg:grid-cols-1',  2: 'lg:grid-cols-2',  3: 'lg:grid-cols-3',  4: 'lg:grid-cols-4',  5: 'lg:grid-cols-5',  6: 'lg:grid-cols-6' },
+  xl:  { 1: 'xl:grid-cols-1',  2: 'xl:grid-cols-2',  3: 'xl:grid-cols-3',  4: 'xl:grid-cols-4',  5: 'xl:grid-cols-5',  6: 'xl:grid-cols-6' },
+  '2xl': { 1: '2xl:grid-cols-1', 2: '2xl:grid-cols-2', 3: '2xl:grid-cols-3', 4: '2xl:grid-cols-4', 5: '2xl:grid-cols-5', 6: '2xl:grid-cols-6' },
+}
+const colsClasses = (cols) => {
+  const map = typeof cols === 'number' ? { md: cols } : cols
+  if (!map || typeof map !== 'object') return ''
+  const rungs = Object.keys(COLS_AT).map((bp) => COLS_AT[bp][map[bp]]).filter(Boolean)
+  return rungs.length ? ['grid-cols-1', ...rungs].join(' ') : ''
 }
 
 export default function ContentCollection({
@@ -81,7 +92,7 @@ export default function ContentCollection({
     ? `${gap}px`
     : `var(--kol-gap-wall-${form === 'list' ? 'list' : 'grid'})`
 
-  const colsCls = form !== 'list' && COLS[cols] ? COLS[cols] : ''
+  const colsCls = form !== 'list' ? colsClasses(cols) : ''
   return (
     <ul
       key={form}