@kolkrabbi/kol-component 0.55.0 → 0.56.0

package/package.json

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

@@ -172,8 +172,13 @@ const ContentFilters = ({
    * as the component tier's ONE documented exception to the no-casing law,
    * because a filter value is data with no authoring site. Consumers must not
    * uppercase these themselves. */
+  /* A group either STACKS its values in a narrow column or WRAPS them across
+   * the room it is given (`group.stack`). Both shapes are live on kol-website's
+   * /work: a short closed set like Type reads as a column you scan down, while
+   * ~45 tags must wrap or they run off the page. One shape for both meant the
+   * short group ate a full row it did not need. */
   const renderFilterGroup = (group) => (
-    <div key={group.key} className="flex flex-col gap-3">
+    <div key={group.key} className={`flex flex-col gap-3 ${group.stack ? 'shrink-0' : 'min-w-0 flex-1'}`}>
       {/* 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").
@@ -187,7 +192,7 @@ const ContentFilters = ({
       <h4 className={labelClassName} style={labelUppercase ? { textTransform: 'uppercase' } : undefined}>
         {group.label}
       </h4>
-      <div className="flex flex-wrap gap-4">
+      <div className={group.stack ? 'flex flex-col items-start gap-2' : 'flex flex-wrap gap-2'}>
         {group.values.map((value) => (
           <Tag
             key={value}