@kolkrabbi/kol-component 0.62.0 → 0.63.0

package/package.json

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

@@ -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`. */
@@ -407,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}