@kolkrabbi/kol-component 0.57.0 → 0.58.0

package/package.json

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

@@ -79,7 +79,12 @@ export default function SearchInput({
   if (expanding) {
     return (
       <div
-        className={`kol-expand flex items-center bg-fg-04 rounded-full h-9 ${className}`.trim()}
+        /* 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
+           collapsed pill rendered as a filled circle next to a bare glyph and
+           the pair looked like two different kinds of control. */
+        className={`kol-expand flex items-center rounded-full h-9 ${isOpen ? 'bg-fg-04' : ''} ${className}`.trim()}
         /* motion is `.kol-expand` in kol-theme; only the WIDTH is per-instance */
         style={{ width: isOpen ? expandedWidth : 36 }}
       >
@@ -90,7 +95,9 @@ export default function SearchInput({
           aria-label={triggerLabel}
           aria-expanded={isOpen}
         >
-          <Icon name="search" size={16} className="text-fg-80" />
+          {/* SOLO ladder, md rung — a 36px trigger is the md square and takes
+              a 20px glyph, not the sm rung's 16 */}
+          <Icon name="search" size={20} className="text-fg-80" />
         </button>
         {isOpen && (
           <input

package/src/organisms/ContentFilters.jsx

@@ -331,11 +331,16 @@ const ContentFilters = ({
         * below the divider" cut. It also settles the defect that ruling was
         * fighting for good: the strip cannot be pushed down the page by an
         * expanding filter group if it is not in the same row as one. */}
-      {isExpanded && (
+      {/* The row renders whenever it has ANYTHING to show. LIST/GRID is always
+        * visible — it is how you change the view, not a detail of filtering —
+        * while the groups and the count appear only with the panel open. Gating
+        * the whole row on `isExpanded` hid the strip until you opened filters,
+        * which is not a state anyone would guess at. */}
+      {(isExpanded || (layoutPlacement === 'below' && layoutStrip)) && (
         <div className="flex items-start justify-between gap-16 pb-4">
           <div className="flex min-w-0 flex-1 items-start gap-16">
-            {filterGroups.map((group) => renderFilterGroup(group))}
-            {activeFilters.size > 0 && (
+            {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
+            {isExpanded && activeFilters.size > 0 && (
               <button
                 type="button"
                 onClick={clearAllFilters}
@@ -354,7 +359,7 @@ const ContentFilters = ({
             * 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">
-            {showCount && (
+            {showCount && isExpanded && (
               <span className={countClassName} style={{ letterSpacing: 1 }}>
                 {filteredItems.length} of {totalCount}
               </span>