@kolkrabbi/kol-component 0.60.0 → 0.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.60.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",
@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "^0.17.0"
+    "@kolkrabbi/kol-icons": "^0.18.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

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,10 +102,35 @@ 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'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
+   * listener only exists while open. */
+  const shellRef = useRef(null)
+  useEffect(() => {
+    if (!expanding || !isOpen) return undefined
+    const away = (e) => { if (shellRef.current && !shellRef.current.contains(e.target)) setOpen(false) }
+    const esc = (e) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', away)
+    document.addEventListener('keydown', esc)
+    return () => {
+      document.removeEventListener('mousedown', away)
+      document.removeEventListener('keydown', esc)
+    }
+  }, [expanding, isOpen])
 
   if (expanding) {
     return (
       <div
+        ref={shellRef}
         /* 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
@@ -114,19 +141,27 @@ export default function SearchInput({
            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 }}
+        style={{ height: isOpen ? fieldH : square, width: isOpen ? expandedWidth : square }}
       >
-        <button
-          type="button"
-          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}
-        >
-          {/* SOLO ladder — the glyph moves WITH the square, never independently */}
-          <Icon name="search" size={glyphSize(size, true)} className="text-oq-80" />
-        </button>
+        {/* THE GLYPH IS THE CLOSED STATE, and only that (user ruling
+            2026-08-15). Once the field is open the caret is the affordance;
+            keeping the magnifier there spends the widest part of the pill
+            restating what the blinking cursor already says. */}
+        {!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"
+            style={{ width: square, height: square }}
+            onClick={() => setOpen(true)}
+            aria-label={triggerLabel}
+            aria-expanded={false}
+          >
+            {/* 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={iconSize ?? glyphSize(size, true)} />
+          </button>
+        )}
         {isOpen && (
           <input
             ref={inputRef}
@@ -136,7 +171,7 @@ export default function SearchInput({
             readOnly={!onChange || undefined}
             placeholder={placeholder}
             spellCheck={false}
-            className={`bg-transparent outline-none ${SIZE_TYPE[size] ?? SIZE_TYPE.md} flex-1 text-oq-80 caret-current pr-4 min-w-0 appearance-none [&::-webkit-search-cancel-button]:hidden`}
+            className={`bg-transparent outline-none ${SIZE_TYPE[size] ?? SIZE_TYPE.md} flex-1 text-oq-80 caret-current px-4 min-w-0 appearance-none [&::-webkit-search-cancel-button]:hidden`}
             onKeyDown={(e) => { if (e.key === 'Escape') setOpen(false) }}
             {...inputProps}
           />
@@ -171,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,8 +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. */
   titleClassName = 'kol-helper-14',
-  titleUppercase = false,
+  titleUppercase = true,
   labelClassName = 'kol-helper-12 text-fg-96',
   labelUppercase = true,
   tagVariant = 'primary',
@@ -91,8 +95,13 @@ const ContentFilters = ({
   tagRestClassName = 'text-fg-48',
   viewClassName = 'kol-helper-14',
   layoutClassName = 'kol-helper-12',
-  stripActiveClassName = 'text-fg-96',
-  stripRestClassName = 'text-fg-32 hover:text-fg-48',
+  /* REST WAS TOO DARK (user ruling 2026-08-15). `fg-32` is a third of the ink
+   * and read as DISABLED rather than unselected — the same complaint the
+   * IconFrame `nav` variant already settled ("the dimmed row read as disabled
+   * beside the ThemeToggle"). Rest is now the ghost rung, oq-48, and the whole
+   * 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',
 }) => {
   /* Icon seam — consumers on a local icon shelf pass their own component
@@ -261,7 +270,7 @@ const ContentFilters = ({
             * states"); the span here was the same defect that promoted it. */}
           <h2 className="flex items-center gap-2">
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
-            <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase' } : undefined}>{title}</span>
+            <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
@@ -275,9 +284,16 @@ const ContentFilters = ({
               *
               * `nav` rests at oq-64 and lights to full ink when the panel is
               * open, so the toggle finally SHOWS that it is on. */}
+            {/* MD — 32px square, 20px glyph (user ruling 2026-08-15). The
+              * squares are 28 · 32 · 36, so 32 is the MIDDLE rung, not a large
+              * one; the search beside it takes the same. */}
             <IconFrame
               name="filter"
-              variant={isExpanded ? 'primary' : 'nav'}
+              /* `nav` ALWAYS — no container. The open state is the panel
+               * appearing below; painting a filled square behind the glyph as
+               * well says the same thing twice and puts a box in a row that
+               * has none. */
+              variant="nav"
               size="md"
               onClick={() => setIsExpanded(!isExpanded)}
               aria-label="Toggle filters"
@@ -305,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>
@@ -386,7 +405,9 @@ const ContentFilters = ({
             * it always reads "N of N", a number that has never told anyone
             * anything. Ink stays `text-fg-64`: static information, not a
             * toggle, so it takes neither the 96 active nor the 32 rest. */}
-          <div className="flex flex-shrink-0 flex-col items-end gap-4">
+          {/* 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">
             {showCount && isExpanded && (
               <span className={countClassName} style={{ letterSpacing: 1 }}>
                 {filteredItems.length} of {totalCount}