@kolkrabbi/kol-component 0.63.0 → 0.65.0

package/package.json

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

@@ -111,6 +111,20 @@ export default function SearchInput({
    * served the second case and silently broke the first. */
   const fieldH = fieldHeight ?? square
 
+  /* THE GLYPH WAITS FOR THE COLLAPSE. Mounting it the instant `isOpen` flips
+   * put a search icon inside a 200px pill that was still shrinking around it —
+   * the one frame of the animation that looks like a bug. It reappears at
+   * 520ms, just under the 600ms `.kol-expand` width transition, so it lands as
+   * the pill arrives rather than riding it down. Opening hides it immediately:
+   * the field should take the space at once. */
+  const [glyphIn, setGlyphIn] = useState(!open)
+  useEffect(() => {
+    if (!expanding) return undefined
+    if (isOpen) { setGlyphIn(false); return undefined }
+    const t = setTimeout(() => setGlyphIn(true), 520)
+    return () => clearTimeout(t)
+  }, [expanding, isOpen])
+
   /* 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. */
@@ -147,7 +161,7 @@ export default function SearchInput({
             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 && (
+        {glyphIn && !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-08"

package/src/organisms/ContentFilters.jsx

@@ -81,12 +81,13 @@ 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. */
-  /* 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 = false,
+  /* MONO + UPPERCASE (user rulings 2026-08-15). Mono because the title is a
+   * NAME that can run long, and `kol-helper-*` is line-height-1 chrome carrying
+   * 500 weight and 0.06em tracking it should not inherit. Uppercase because it
+   * is still part of the header strip. Both knobs, set independently — which is
+   * the whole reason they are two props. */
+  titleClassName = 'kol-mono-14',
+  titleUppercase = true,
   labelClassName = 'kol-helper-12 text-fg-96',
   labelUppercase = true,
   tagVariant = 'primary',
@@ -288,9 +289,11 @@ 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. */}
+            {/* 16 GLYPH IN A 32 BOX — the house's quiet-control pairing (user
+              * ruling 2026-08-15). `.kol-copy-btn` is exactly this: an 8px pad
+              * around a `sm` 16px glyph, giving a 32 box. A 20 glyph fills a 32
+              * square far harder, which is why this row read too intense. The
+              * square stays md; only the glyph steps down. */}
             <IconFrame
               name="filter"
               /* `nav` ALWAYS — no container. The open state is the panel
@@ -299,6 +302,7 @@ const ContentFilters = ({
                * has none. */
               variant="nav"
               size="md"
+              iconSize={16}
               onClick={() => setIsExpanded(!isExpanded)}
               aria-label="Toggle filters"
             />
@@ -325,6 +329,9 @@ const ContentFilters = ({
                * The organism's own field never had one. */
               placeholder=""
               size="md"
+              /* 16 in the 32 box, matching the filter beside it and the copy
+               * button everywhere else. */
+              iconSize={16}
               /* 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}