@kolkrabbi/kol-component 0.87.0 → 0.89.0

package/package.json

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

@@ -65,8 +65,8 @@ const HOVER = {
   catalog:  'var(--kol-surface-tertiary)',
   print:    'var(--kol-oq-04)',
   /* article and work take NO surface hover, and that is a decision not a gap:
-   * article has no surface of its own (its media frame steps its border
-   * instead), and work's whole hover IS the drawer rising. A second wash under
+   * article has no surface of its own (its media frame, when on, steps its
+   * border instead), and work's whole hover IS the drawer rising. A second wash under
    * either would be two answers to one question. */
   article:  null,
   work:     null,
@@ -75,16 +75,18 @@ const HOVER = {
 
 /* per-variant media treatment. `ring` sits OVER the artwork, `frame` UNDER it —
  * see ContentMedia. print rings because an A4 print on a light page has no edge
- * of its own; article frames because its media is a 16/9 thumbnail that rarely
- * fills its box. */
+ * of its own; article CAN frame (opt-in since 0.88.0) because its media is a
+ * 16/9 thumbnail that rarely fills its box. */
 const MEDIA = {
   /* zoom is for IMAGE-LED cards — where the artwork is the content and the
    * card is a frame around it. A catalog tile whose preview is a diagram, or
    * a default file card whose thumb is a 48px chip, gets nothing from it. */
   print:   { ring: true, zoom: true },
   work:    { zoom: true },
-  /* ListingCard's card media steps its border on hover — fg-08 → fg-16 */
-  article: { frame: true, borderHover: true, zoom: true },
+  /* frame OFF by default (ListingCardThumbBorder, user 2026-08-27: "I hate
+   * border — remove border"): the article thumb's hairline is opt-in —
+   * `frame` turns it on, and with it the fg-08 → fg-16 hover step */
+  article: { frame: false, borderHover: true, zoom: true },
 }
 
 export default function ContentCard({

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}