@kolkrabbi/kol-component 0.104.0 → 0.104.2

package/package.json

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

@@ -40,10 +40,10 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * Look seams — all default to the shipped values, pass nothing and nothing changes:
  * @param {string}  props.titleClassName      — header title type/ink
  * @param {boolean} props.titleUppercase      — cases the title (default false)
- * @param {string}  props.labelClassName      — filter-group label type/ink
+ * @param {string}  props.labelClassName      — filter-group label type/ink (default `kol-eyebrow text-fg-96`)
  * @param {boolean} props.labelUppercase      — cases the group label (default true)
- * groups: `{ label, key, values, stack?, className?, wrapClassName? }` — a group with ≤ 6 values stacks by
- * default (`stack: false` opts out); `className` / `wrapClassName` are per-group seams
+ * groups: `{ label, key, values, stack?, className?, wrapClassName? }` — a short group (≤ 6 values) hugs its chips,
+ * a long one flows; `stack` pins either way; `className` / `wrapClassName` are per-group seams
  * @param {string}  props.tagVariant          — filter chip variant ('primary' grey fill)
  * @param {string}  props.tagSize             — filter chip size
  * @param {string}  props.tagActiveClassName  — chip ink, selected
@@ -104,7 +104,10 @@ const ContentFilters = ({
    * titles wrap can move to `kol-mono-14` without losing the casing. */
   titleClassName = 'kol-helper-14',
   titleUppercase = true,
-  labelClassName = 'kol-helper-12 text-fg-96',
+  /* the category label is the EYEBROW role (ContentFiltersEqualColumns, what stood —
+   * kol-fxr 2026-08-27: every section / category label in the app tier is
+   * kol-eyebrow; the role carries the uppercase) */
+  labelClassName = 'kol-eyebrow text-fg-96',
   labelUppercase = true,
   tagVariant = 'primary',
   tagSize = 'sm',
@@ -243,9 +246,10 @@ const ContentFilters = ({
   ) : null
 
   const renderFilterGroup = (group) => {
-    /* a SHORT group (≤ 6 values) stacks by default (WorkListingRowsAndFilters, 2026-08-27 —
-     * user: "why do I have to say it every time? why do you default to 50/50?");
-     * `stack: false` opts out, `stack: true` forces */
+    /* the FIRST group hugs its chips, the rest flow (the ruled shape — /prints;
+     * ContentFiltersEqualColumns was withdrawn 2026-08-27 same day: the "equal
+     * columns" ask was a misread). A short group (≤ 6) hugs by default;
+     * `stack` pins either way (kol-fxr passes `stack: i === 0`). */
     const stacked = group.stack ?? (group.values?.length ?? 0) <= 6
     return (
     <div key={group.key} className={`flex flex-col gap-3 ${stacked ? 'shrink-0' : 'min-w-0 flex-1'} ${group.className ?? ''}`.trim()}>
@@ -259,7 +263,7 @@ const ContentFilters = ({
         * never what anyone looked at. No inline letter-spacing: the helper ramp
         * carries its own, and the override the fork added was not in the
         * rendered path either. */}
-      <h4 className={labelClassName} style={labelUppercase ? { textTransform: 'uppercase' } : undefined}>
+      <h4 className={labelClassName} style={labelUppercase && !/\bkol-eyebrow\b/.test(labelClassName) ? { textTransform: 'uppercase' } : undefined}>
         {group.label}
       </h4>
       {/* the fluid group keeps 48px of room on its right (it ran flush to the