@kolkrabbi/kol-component 0.49.0 → 0.51.0

package/package.json

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

@@ -44,7 +44,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14' }
 const ICON_SIZE = { sm: 14, md: 14 }
-const CUBIC_EASE = 'var(--kol-ease-house)'
 
 export default function SearchInput({
   value = '',
@@ -80,8 +79,9 @@ export default function SearchInput({
   if (expanding) {
     return (
       <div
-        className={`flex items-center bg-fg-04 rounded-full h-9 ${className}`.trim()}
-        style={{ width: isOpen ? expandedWidth : 36, transition: `width 600ms ${CUBIC_EASE}` }}
+        className={`kol-expand flex items-center bg-fg-04 rounded-full h-9 ${className}`.trim()}
+        /* motion is `.kol-expand` in kol-theme; only the WIDTH is per-instance */
+        style={{ width: isOpen ? expandedWidth : 36 }}
       >
         <button
           type="button"

package/src/organisms/ContentCollection.jsx

@@ -14,20 +14,24 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * (measure → invert → play) when a consumer needs card↔row to tween.
  *
  * BOTH FORMS ARE GRIDS (user call 2026-08-15: *"layout always wraps the items
- * in a grid, at least 99% of the time"*). `list` is not a single column — it is
- * the same wall with WIDER tracks, so a compact row gets the room its fields
- * need. The shipped consumers already did this (`repeat(4, 1fr)` for list,
- * `repeat(6, 1fr)` for grid); what they got wrong was FORCING the count.
+ * in a grid, at least 99% of the time"*) — but a LIST IS ONE COLUMN. That is
+ * what a list is on a page: one entry per line, full width, fields laid across
+ * it. kol-website's /work listing is exactly that, and so is every listing
+ * anyone has built. A multi-column wall of rows is not a list, it is a wall.
  *
- * The count derives from the wall's OWN width, never the viewport, and 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
+ * (kol-monitor's `repeat(4, 1fr)` list is a dense file-browser cut, not the
+ * general case — a consumer that wants it passes `listMin`.)
+ *
+ * The GRID's count derives from the wall's OWN width, never the viewport, and
+ * 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.
  *
  * @param {string}  form     'grid' | 'list'
  * @param {string}  min      grid track minimum, card form (default 20rem — the law)
- * @param {string}  listMin  grid track minimum, list form (default 30rem)
+ * @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
@@ -38,7 +42,7 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 export default function ContentCollection({
   form = 'grid',
   min = '20rem',
-  listMin = '30rem',
+  listMin,
   gap,
   stagger = true,
   children,
@@ -57,7 +61,9 @@ export default function ContentCollection({
       className={`m-0 list-none p-0 ${className}`.trim()}
       style={{
         display: 'grid',
-        gridTemplateColumns: `repeat(auto-fill, minmax(${form === 'list' ? listMin : min}, 1fr))`,
+        gridTemplateColumns: form === 'list'
+          ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : '1fr')
+          : `repeat(auto-fill, minmax(${min}, 1fr))`,
         gap: `${px}px`,
       }}
     >

package/src/organisms/ContentFilters.jsx

@@ -231,13 +231,12 @@ const ContentFilters = ({
               <IconSeam name="filter" size={16} />
             </button>
             <div
-              className="flex items-center justify-center rounded-sm cursor-pointer hover:bg-fg-04 transition-colors"
+              className="kol-expand flex items-center justify-center rounded-sm cursor-pointer hover:bg-fg-04"
               style={{
                 height: 32,
                 width: searchOpen ? 200 : 32,
                 background: searchOpen ? 'var(--kol-surface-secondary)' : 'transparent',
                 border: 'none',
-                transition: 'width 600ms var(--kol-ease-house), background 400ms var(--kol-ease-house)',
                 overflow: 'hidden',
               }}
               onClick={() => {
@@ -249,10 +248,9 @@ const ContentFilters = ({
                 * wearing kol-btn chrome. The clickable thing is the wrapper
                 * div, not this span. */}
               <span
-                className="flex items-center justify-center flex-shrink-0"
+                className="kol-expand-content flex items-center justify-center flex-shrink-0"
                 style={{
                   opacity: searchOpen ? 0 : 1,
-                  transition: 'opacity 300ms var(--kol-ease-house)',
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >