@kolkrabbi/kol-component 0.57.0 → 0.57.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-component",
3
- "version": "0.57.0",
3
+ "version": "0.57.1",
4
4
  "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -331,11 +331,16 @@ const ContentFilters = ({
331
331
  * below the divider" cut. It also settles the defect that ruling was
332
332
  * fighting for good: the strip cannot be pushed down the page by an
333
333
  * expanding filter group if it is not in the same row as one. */}
334
- {isExpanded && (
334
+ {/* The row renders whenever it has ANYTHING to show. LIST/GRID is always
335
+ * visible — it is how you change the view, not a detail of filtering —
336
+ * while the groups and the count appear only with the panel open. Gating
337
+ * the whole row on `isExpanded` hid the strip until you opened filters,
338
+ * which is not a state anyone would guess at. */}
339
+ {(isExpanded || (layoutPlacement === 'below' && layoutStrip)) && (
335
340
  <div className="flex items-start justify-between gap-16 pb-4">
336
341
  <div className="flex min-w-0 flex-1 items-start gap-16">
337
- {filterGroups.map((group) => renderFilterGroup(group))}
338
- {activeFilters.size > 0 && (
342
+ {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
343
+ {isExpanded && activeFilters.size > 0 && (
339
344
  <button
340
345
  type="button"
341
346
  onClick={clearAllFilters}
@@ -354,7 +359,7 @@ const ContentFilters = ({
354
359
  * anything. Ink stays `text-fg-64`: static information, not a
355
360
  * toggle, so it takes neither the 96 active nor the 32 rest. */}
356
361
  <div className="flex flex-shrink-0 flex-col items-end gap-4">
357
- {showCount && (
362
+ {showCount && isExpanded && (
358
363
  <span className={countClassName} style={{ letterSpacing: 1 }}>
359
364
  {filteredItems.length} of {totalCount}
360
365
  </span>