@kolkrabbi/kol-component 0.57.1 → 0.59.0

package/package.json

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
  * SearchInput — controlled search field on the .kol-control shell. The
@@ -76,21 +77,34 @@ export default function SearchInput({
     if (expanding && isOpen) inputRef.current?.focus()
   }, [expanding, isOpen])
 
+  /* the pinned squares, 05-control-chrome.md — sm 28 · md 32 · lg 36 */
+  const square = { sm: 28, md: 32, lg: 36 }[size] ?? 32
+
   if (expanding) {
     return (
       <div
-        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 }}
+        /* THE FILL BELONGS TO THE FIELD, NOT THE TRIGGER. At rest this is a
+           glyph you click, and it must read as one — bare, exactly like the
+           filter icon it sits beside. `bg-fg-04` was unconditional, so the
+           collapsed pill rendered as a filled circle next to a bare glyph and
+           the pair looked like two different kinds of control. */
+        /* THE SQUARE FOLLOWS THE LADDER, and it follows `size` like every other
+           control: sm 28 · md 32 · lg 36 (hooks/glyphLadders.js). This was a
+           hardcoded 36 — the LG square — so an expanding search sat beside a
+           `kol-btn-md` filter button at two different sizes. */
+        className={`kol-expand flex items-center rounded-full ${isOpen ? 'bg-fg-04' : ''} ${className}`.trim()}
+        style={{ height: square, width: isOpen ? expandedWidth : square }}
       >
         <button
           type="button"
-          className={`flex items-center justify-center w-9 h-9 rounded-full text-auto flex-shrink-0 border border-transparent ${isOpen ? '' : 'transition-colors hover:border-fg-12'}`}
+          className={`flex items-center justify-center rounded-full text-auto flex-shrink-0 border border-transparent ${isOpen ? '' : 'transition-colors hover:border-oq-16'}`}
+          style={{ width: square, height: square }}
           onClick={() => !isOpen && setOpen(true)}
           aria-label={triggerLabel}
           aria-expanded={isOpen}
         >
-          <Icon name="search" size={16} className="text-fg-80" />
+          {/* SOLO ladder — the glyph moves WITH the square, never independently */}
+          <Icon name="search" size={glyphSize(size, true)} className="text-oq-80" />
         </button>
         {isOpen && (
           <input

package/src/organisms/ContentFilters.jsx

@@ -237,7 +237,18 @@ const ContentFilters = ({
      * child refuses to shrink past its content, so a scrollable body pushed
      * the whole card taller instead of scrolling inside it. */
     <div className={`w-full ${className}`.trim()} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
-      <div className="flex items-center justify-between mb-4">
+      {/* ONE VERTICAL RHYTHM for the whole block, chosen together instead of
+        * four independent literals (header mb-4, divider mb-4, strip row pb-4,
+        * body mt-8 — none of which knew about the others):
+        *
+        *   header  → divider   12  the divider belongs TO the header, close
+        *   divider → strip     12  same, it belongs to what follows
+        *   strip   → content   24  the one real break, wall starts here
+        *
+        * 12/12/24 on the --kol-spacing-* rungs. The old 16/16/32 spaced the
+        * divider equally from both sides, so it read as a free-floating line
+        * rather than the header's own baseline. */}
+      <div className="flex items-center justify-between" style={{ marginBottom: 'var(--kol-spacing-3)' }}>
         <div className="flex items-center gap-6">
           {/* IconFrame, NOT a kol-btn span: this is decoration and clicks
             * nothing, so it must not wear a button's chrome. The atom exists
@@ -249,19 +260,23 @@ const ContentFilters = ({
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
-            <button
-              type="button"
+            {/* IconFrame, not a kol-btn with its chrome cancelled inline.
+              * 05-control-chrome.md:109 — "any icon-only control in chrome is
+              * IconFrame; nothing hand-writes the square". This wore
+              * `kol-btn-md kol-btn-icon` and then removed the background, the
+              * border and the colour by inline style, which is the whole button
+              * paid for and thrown away — and it left the control with no
+              * states at all while the search beside it had hover.
+              *
+              * `nav` rests at oq-64 and lights to full ink when the panel is
+              * open, so the toggle finally SHOWS that it is on. */}
+            <IconFrame
+              name="filter"
+              variant={isExpanded ? 'primary' : 'nav'}
+              size="md"
               onClick={() => setIsExpanded(!isExpanded)}
-              className="kol-btn kol-btn-md kol-btn-icon"
               aria-label="Toggle filters"
-              style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
-            >
-              {/* SOLO ladder, md rung — a 32px square takes a 20px glyph.
-                * Both header glyphs were 16 (the sm rung) in md boxes, which is
-                * the exact hand-transcription hooks/glyphLadders.js exists to
-                * stop and the one ActionButton's docstring already names. */}
-              <IconSeam name="filter" size={glyphSize('md', true)} />
-            </button>
+            />
             {/* THE SEARCH IS `SearchInput expanding` — the DS component, fully
               * round, the same pill the nav shelf uses (user ruling
               * 2026-08-15). This organism hand-rolled its own: a rounded-sm box
@@ -321,7 +336,9 @@ const ContentFilters = ({
         </div>
       </div>
 
-      <Divider className="mb-4" />
+      {/* Divider takes className, NOT style — a style prop here is silently
+        * dropped, which is how this margin nearly went missing. */}
+      <Divider className="mb-3" />
 
       {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
         * label above values — visible only while the filter toggle is open.
@@ -337,7 +354,7 @@ const ContentFilters = ({
         * the whole row on `isExpanded` hid the strip until you opened filters,
         * which is not a state anyone would guess at. */}
       {(isExpanded || (layoutPlacement === 'below' && layoutStrip)) && (
-        <div className="flex items-start justify-between gap-16 pb-4">
+        <div className="flex items-start justify-between gap-16">
           <div className="flex min-w-0 flex-1 items-start gap-16">
             {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
             {isExpanded && activeFilters.size > 0 && (
@@ -369,7 +386,7 @@ const ContentFilters = ({
         </div>
       )}
 
-      <div className="mt-8" style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <div style={{ marginTop: 'var(--kol-spacing-6)', display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
         {renderItem(filteredItems, viewMode, layout)}
       </div>
     </div>