@kolkrabbi/kol-component 0.163.0 → 0.164.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.163.0",
+  "version": "0.164.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/organisms/ContentFilters.jsx

@@ -34,6 +34,10 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {ReactNode} props.belowActions — the RIGHT half of the below-divider row, beside the count
  *   (kol-r2b2 2026-08-27: the sort group, once SELECT/FLAT moved up into the header strip)
  * @param {ReactNode} props.trailingActions — the header's RIGHT slot, where the view strip sits
+ * @param {'auto'|'header'|'below'} props.trailingPlacement — WHERE `trailingActions` sit (the showcase's icons page,
+ *   2026-09-02: brand's ground + guide cluster in this slot measured 223px and scrolled `main` sideways at 390):
+ *   `auto` (default) the header from `md`, their OWN line under the divider below it — full width, wrapping; `header` / `below` pin it.
+ *   The same rung `viewPlacement` and LIST/GRID have.
  *   (kol-r2b2 2026-08-27: a consumer's own controls — sort, flat, select — belong there;
  *   `headerActions` is the left group beside search and was never that)
  * @param {Function} props.onFilterChange — optional callback when filters change
@@ -101,6 +105,7 @@ const ContentFilters = ({
   searchKeys = ['label', 'name', 'title', 'type'],
   headerActions,
   trailingActions,
+  trailingPlacement = 'auto',
   leadingActions,
   belowActions,
   showCountOnlyWhenFiltering = false,
@@ -346,7 +351,7 @@ const ContentFilters = ({
             * for exactly this (lobby ruling 2026-07-30 — "icons only, NO
             * states"); the span here was the same defect that promoted it. */}
           {/* the icon gap matches the specimen header — 16 from md (FoundrySpecimenSections, 2026-08-27) */}
-          <h2 className="flex items-center gap-2 md:gap-4">
+          <h2 className={`flex items-center gap-2 md:gap-4 ${searchOpen ? 'max-md:hidden' : ''}`}>
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
             {/* `pr-4` by rule (ContentFiltersTitleGap, kol-website 2026-08-27): the
               * divider sat 24px from the title's text edge but 32 from the
@@ -359,8 +364,13 @@ const ContentFilters = ({
               * spending 40px of a 390px viewport on one divider. */}
             <span className={`${titleClassName} pr-2 md:pr-4`} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
           </h2>
-          <Divider variant="vertical" />
-          <div className="flex items-center gap-1">
+          <Divider variant="vertical" className={searchOpen ? 'max-md:hidden' : ''} />
+          {/* THE OPEN SEARCH TAKES THE ROW BELOW `md` (2026-09-02, the showcase
+            * held to its own law): the pill is a fixed 200px, and beside the
+            * title at 390 it scrolled `main` sideways. Title and divider step
+            * aside while searching and return on close; the group grows to the
+            * row so the pill fits. */}
+          <div className="flex items-center gap-1 min-w-0 max-md:flex-1">
             {/* IconFrame, not a kol-btn with its chrome cancelled inline.
               * 05-control-chrome.md:109 — "any icon-only control in chrome is
               * IconFrame; nothing hand-writes the square". This wore
@@ -405,6 +415,7 @@ const ContentFilters = ({
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
               expandedWidth={200}
+              className="max-w-full"
               triggerLabel="Search"
               /* NO placeholder. The field opens from a glyph you just clicked —
                * the caret is the affordance, and a greyed "Search…" sitting in
@@ -433,10 +444,17 @@ const ContentFilters = ({
         </div>
 
         <div className="flex items-center gap-6">
-          {trailingActions}
-          {/* The divider between a consumer's trailing controls and the strip is
-            * the organism's, as it is on the left between title and icons. */}
-          {trailingActions && layoutPlacement === 'header' && layoutStrip && <Divider variant="vertical" />}
+          {/* the consumer's trailing controls ride the header from `md` under
+            * `auto`; below it they move to the below-divider row (same rung as
+            * the view strip and LIST/GRID) so the header row never scrolls */}
+          {trailingActions && trailingPlacement !== 'below' && (
+            <div className={`${trailingPlacement === 'auto' ? 'hidden md:flex' : 'flex'} items-center gap-6`}>
+              {trailingActions}
+              {/* The divider between a consumer's trailing controls and the strip is
+                * the organism's, as it is on the left between title and icons. */}
+              {layoutPlacement === 'header' && layoutStrip && <Divider variant="vertical" />}
+            </div>
+          )}
           {layoutPlacement === 'header' && layoutStrip}
           {/* RECENT / SAVED is the SAME STRIP as LIST / GRID, not a ViewToggle.
             * Read off kol-monitor's original (_tmp/2026-08-15-shell-adoption/
@@ -466,6 +484,14 @@ const ContentFilters = ({
           {viewStrip('flex flex-wrap gap-y-2')}
         </div>
       )}
+      {/* the consumer's trailing controls: their OWN line below md (`auto`) or
+        * always (`below`) — full width, wrapping. In the below row's right
+        * group they measured 223px beside LIST/GRID in a 342px track. */}
+      {trailingActions && trailingPlacement !== 'header' && (
+        <div className={`${trailingPlacement === 'auto' ? 'md:hidden ' : ''}mb-3 flex flex-wrap items-center gap-6 gap-y-2`}>
+          {trailingActions}
+        </div>
+      )}
 
       {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
         * label above values — visible only while the filter toggle is open.