@kolkrabbi/kol-shell 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "description": "KOL application shell — fixed 48px NavRail + AppShell layout root, PageShell/PageHeader scaffolds, ContentFilters catalog organism, GridCard, SettingsScaffold, WalkthroughPanel, ShortcutsOverlay. App chrome (kol-framework owns site chrome). Nav items, content, shortcuts and settings are consumer-injected. Sits above @kolkrabbi/kol-{theme,component,framework}.",
   "license": "MIT",

package/src/ContentFilters.jsx

@@ -132,9 +132,12 @@ const ContentFilters = ({
     })
   }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
 
-  // Filter values wear the LIST/GRID strip idiom, not Tag chips — user ruling
-  // 2026-08-15 ("TAGS should be same style as LIST and GRID"). Label and values
-  // sit on ONE line so the group shares the row with the layout strip.
+  // A group is a COLUMN: label on top, values beneath it — never label-left /
+  // values-right on one line (user ruling 2026-08-15, second QA round). The
+  // label wears the full strip idiom too — tracked `kol-helper-12` at the
+  // strip's rest ink — so a category header and the LIST/GRID items read as one
+  // family ("LIST GRID text has style, that style also on TAGS and any other
+  // filter category"). Rest ink, not active: the label is not interactive.
   const renderFilterGroup = (group) => {
     const prefix = `${group.key}:`
     const selected = new Set(
@@ -144,15 +147,17 @@ const ContentFilters = ({
     )
 
     return (
-      <div key={group.key} className="flex items-center gap-4">
-        <h4 className="kol-helper-12 text-fg-48">{group.label}</h4>
+      <div key={group.key} className="flex flex-col gap-3">
+        <h4 className="kol-helper-12 text-fg-32" style={{ letterSpacing: 1 }}>
+          {group.label}
+        </h4>
         <TabStrip
           options={group.values.map((v) => ({ value: v, label: v }))}
           value={selected}
           onChange={(v) => toggleFilter(group.key, v)}
           size={12}
           tracked
-          className="gap-4"
+          className="gap-4 flex-wrap"
         />
       </div>
     )
@@ -238,19 +243,25 @@ const ContentFilters = ({
 
       <Divider className="mb-4" />
 
-      {/* ONE row BELOW the divider: filter groups on the LEFT (only while the
-          filter toggle is open), layout strip on the RIGHT and ALWAYS visible.
-          0.1.1 read "at the divider level" as the header row above it — the
-          filer's verdict corrected that; the strip never belongs in the header
+      {/* BELOW the divider: filter groups as left-aligned COLUMNS (only while
+          the filter toggle is open), layout strip RIGHT and ALWAYS visible.
+          `items-start` is load-bearing — it pins the strip to the label row, so
+          the strip and the group labels read as one line and the values hang
+          beneath. 0.1.1 read "at the divider level" as the header row above the
+          divider; the strip never belongs in the header
           (ShellHeaderFilterRefinements, 2026-08-15). */}
       {(layoutOptions || isExpanded) && (
-        <div className="flex items-center justify-between gap-16 mb-4">
-          <div className="flex items-center gap-16">
+        <div className="flex items-start justify-between gap-16 mb-4">
+          <div className="flex items-start gap-16">
             {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
             {isExpanded && activeFilters.size > 0 && (
+              // Strip rest recipe, not its own ink — this button shares the line
+              // with the labels and values, and that line carries exactly TWO
+              // ink states (user ruling 2026-08-15: "we are not maintaining 3
+              // opacity states for one line in a component").
               <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"
               >
                 Clear all ({activeFilters.size})
               </button>