@kolkrabbi/kol-component 0.86.0 → 0.88.0

package/package.json

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

@@ -31,8 +31,18 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * 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.
  *
+ * `cols` is the PAGE's call (ContentCollectionCols, kol-website 2026-08-27 —
+ * user: "translate that to something usable, consistent"): every filtered grid
+ * on the website was ruled as a COLUMN COUNT (`/stack`: one below md, three
+ * from md), and back-solving a `min` that happens to yield three on the
+ * container ladder is a number nobody picked. `cols={N}` says the count;
+ * `min` stays the default for the fluid wall above. Literal class strings —
+ * a class built at runtime is never emitted.
+ *
  * @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 {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
@@ -43,9 +53,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',
+}
+
 export default function ContentCollection({
   form = 'grid',
   min = '320px',
+  cols,
   listMin,
   gap,
   stagger = true,
@@ -61,15 +81,19 @@ export default function ContentCollection({
     ? `${gap}px`
     : `var(--kol-gap-wall-${form === 'list' ? 'list' : 'grid'})`
 
+  const colsCls = form !== 'list' && COLS[cols] ? COLS[cols] : ''
   return (
     <ul
       key={form}
-      className={`m-0 list-none p-0 ${className}`.trim()}
+      className={`m-0 list-none p-0 ${colsCls} ${className}`.replace(/\s+/g, ' ').trim()}
       style={{
         display: 'grid',
-        gridTemplateColumns: form === 'list'
-          ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : '1fr')
-          : `repeat(auto-fill, minmax(${min}, 1fr))`,
+        /* with `cols` the classes carry the tracks — an inline template would outrank them */
+        gridTemplateColumns: colsCls
+          ? undefined
+          : form === 'list'
+            ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : '1fr')
+            : `repeat(auto-fill, minmax(${min}, 1fr))`,
         gap: g,
       }}
     >