@kolkrabbi/kol-component 0.62.0 → 0.64.0

package/package.json

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

@@ -150,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}

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`. */
@@ -284,9 +288,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
@@ -295,6 +301,7 @@ const ContentFilters = ({
                * has none. */
               variant="nav"
               size="md"
+              iconSize={16}
               onClick={() => setIsExpanded(!isExpanded)}
               aria-label="Toggle filters"
             />
@@ -321,6 +328,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}
@@ -407,7 +417,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}