@kolkrabbi/kol-component 0.44.1 → 0.44.2

package/package.json

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

@@ -138,15 +138,18 @@ const ContentFilters = ({
    * uppercase these themselves. */
   const renderFilterGroup = (group) => (
     <div key={group.key} className="flex flex-col gap-3">
-      {/* The group label wears the layout strip's exact text treatment —
-        * `kol-helper-12` at 1px tracking — so TAGS / TYPES and LIST / GRID read
-        * as one family across the row (user ruling 2026-08-15: "LIST GRID text
-        * has style, that style also on TAGS and any other filter category").
-        * Rest ink, not active: the label is a heading, not a state. */}
-      <h4 className="kol-helper-12 text-fg-32" style={{ letterSpacing: 1 }}>
-        {group.label}
-      </h4>
-      <div className="flex flex-wrap gap-2">
+      {/* THE CATEGORY LABEL IS THE ACTIVE INK — `kol-helper-12` at `text-fg-96`,
+        * the same full opacity a SELECTED layout item wears (user ruling
+        * 2026-08-15: "TAGS and other categories are ACTIVE state full opacity").
+        *
+        * Read the RENDER, not the default: the retired fork defaulted this to
+        * `text-fg-32` and kol-monitor overrode it per call site with
+        * `labelClassName="kol-helper-12 text-fg-96"` — so the fork's default was
+        * 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="kol-helper-12 text-fg-96">{group.label}</h4>
+      <div className="flex flex-wrap gap-4">
         {group.values.map((value) => (
           <Tag
             key={value}
@@ -155,6 +158,7 @@ const ContentFilters = ({
             hash={false}
             active={activeFilters.has(`${group.key}:${value}`)}
             onClick={() => toggleFilter(group.key, value)}
+            className={activeFilters.has(`${group.key}:${value}`) ? 'text-fg-96' : 'text-fg-48'}
           >
             {value}
           </Tag>
@@ -283,7 +287,7 @@ const ContentFilters = ({
               <button
                 type="button"
                 onClick={clearAllFilters}
-                className="kol-helper-12 transition-colors underline text-fg-48"
+                className="kol-helper-12 transition-colors underline text-fg-32 hover:text-fg-48"
                 style={{ background: 'transparent', border: 'none', cursor: 'pointer' }}
               >
                 Clear all ({activeFilters.size})