@kolkrabbi/kol-component 0.61.0 → 0.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.61.0",
+  "version": "0.63.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
@@ -145,7 +150,7 @@ export default function SearchInput({
         {!isOpen && (
           <button
             type="button"
-            className="flex items-center justify-center rounded-full text-auto flex-shrink-0 border border-transparent transition-colors hover:border-oq-16"
+            className="flex items-center justify-center rounded-full text-auto flex-shrink-0 border border-transparent transition-colors hover:border-oq-08"
             style={{ width: square, height: square }}
             onClick={() => setOpen(true)}
             aria-label={triggerLabel}
@@ -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

@@ -81,12 +81,12 @@ const ContentFilters = ({
   /* THE LOOK SEAMS. Every one defaults to what the component shipped, so
    * passing nothing renders exactly as before — these exist because the
    * hardcoded values were the wrong call for every consumer but one. */
-  /* The title is the SAME as RECENT/SAVED (user ruling 2026-08-15) — same
-   * rung, same casing, same tracking. It sits at the other end of the same
-   * row, so a different treatment reads as two unrelated things rather than
-   * one strip of chrome. */
+  /* SENTENCE CASE (user ruling 2026-08-15, reversing the uppercase pass an
+   * hour earlier). The title is a NAME, not a label — the strips are chrome and
+   * wear caps; the thing being filtered keeps its own casing. Same rung as
+   * RECENT/SAVED, different casing, and that difference is the point. */
   titleClassName = 'kol-helper-14',
-  titleUppercase = true,
+  titleUppercase = false,
   labelClassName = 'kol-helper-12 text-fg-96',
   labelUppercase = true,
   tagVariant = 'primary',
@@ -102,7 +102,11 @@ const ContentFilters = ({
    * pair moves to the opaque tier so it never washes out over a tinted surface. */
   stripActiveClassName = 'text-oq-96',
   stripRestClassName = 'text-oq-48 hover:text-oq-64',
-  countClassName = 'kol-helper-12 text-fg-64',
+  /* THE COUNT IS PART OF THE STRIP IT SITS ON — same rung as LIST/GRID
+   * (`kol-helper-12`), same opaque tier. It carried `text-fg-64`, a
+   * translucent value on neither the active nor the rest rung, so it read as a
+   * third state that means nothing. It is static information: the REST ink. */
+  countClassName = 'kol-helper-12 text-oq-48',
 }) => {
   /* Icon seam — consumers on a local icon shelf pass their own component
    * rather than being forced onto the DS set. Needs `filter` + `search`. */
@@ -321,6 +325,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>
@@ -404,7 +411,9 @@ const ContentFilters = ({
             * toggle, so it takes neither the 96 active nor the 32 rest. */}
           {/* ONE LINE — the count sits BESIDE LIST/GRID, not stacked above it.
             * They are the same strip of chrome reading left to right. */}
-          <div className="flex flex-shrink-0 items-center gap-4">
+          {/* ONE LINE, and the count needs room off the strip — at gap-4 the
+            * two read as one run of text rather than a label and a control. */}
+          <div className="flex flex-shrink-0 items-center gap-6">
             {showCount && isExpanded && (
               <span className={countClassName} style={{ letterSpacing: 1 }}>
                 {filteredItems.length} of {totalCount}