@kolkrabbi/kol-component 0.61.0 → 0.62.0

package/package.json

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

@@ -81,6 +81,8 @@ export default function SearchInput({
   open,
   onOpenChange,
   expandedWidth = 280,
+  iconSize,
+  fieldHeight,
   triggerLabel = 'Open search',
   className = '',
   ...inputProps
@@ -100,11 +102,14 @@ export default function SearchInput({
 
   /* the pinned squares, 05-control-chrome.md — sm 28 · md 32 · lg 36 */
   const square = { sm: 28, md: 32, lg: 36 }[size] ?? 32
-  /* THE OPEN FIELD IS SHORTER THAN THE TRIGGER'S HIT AREA. The square is the
-   * click target and it is INVISIBLE at rest (no fill), so the pill does not
-   * have to inherit its height — at 32 the field read as a chunky input beside
-   * two bare glyphs. It sits one rung down and centres inside the same box. */
-  const fieldH = square - 4
+  /* THE OPEN FIELD'S HEIGHT IS ITS OWN KNOB, defaulting to the square.
+   *
+   * /work's pill is `h-9` open AND closed, sitting level with a 36px toggle —
+   * that is the shipped design and the default must reproduce it. But a field
+   * beside two BARE 32px glyphs (ContentFilters) read as chunky at the full
+   * square, so that surface asks for a shorter one. Deriving it (`square - 4`)
+   * served the second case and silently broke the first. */
+  const fieldH = fieldHeight ?? square
 
   /* Escape closes, and so does clicking away — a field that can only be closed
    * by emptying it and blurring is a trap, and this one had neither wired. The
@@ -154,7 +159,7 @@ export default function SearchInput({
             {/* SOLO ladder, and NO ink class — it inherits from its chrome
                 exactly as IconFrame's glyph does, so it cannot drift from the
                 icon beside it. */}
-            <Icon name="search" size={glyphSize(size, true)} />
+            <Icon name="search" size={iconSize ?? glyphSize(size, true)} />
           </button>
         )}
         {isOpen && (
@@ -201,7 +206,7 @@ export default function SearchInput({
         className={`flex items-center shrink-0 ${bare ? 'text-fg-48' : 'text-auto opacity-50'}`}
       >
         {/* ADJACENT — this glyph sits in the field's line box beside the query */}
-        <Icon name="search" size={glyphSize(size)} />
+        <Icon name="search" size={iconSize ?? glyphSize(size)} />
       </span>
       <input
         type="search"

package/src/organisms/ContentFilters.jsx

@@ -321,6 +321,9 @@ const ContentFilters = ({
                * The organism's own field never had one. */
               placeholder=""
               size="md"
+              /* a rung under the 32 square: this field sits beside two BARE
+               * glyphs, and at the full square it read as a chunky input. */
+              fieldHeight={28}
             />
             {headerActions}
           </div>