@kolkrabbi/kol-component 0.12.18 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.18",
+  "version": "0.13.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "0.8.4"
+    "@kolkrabbi/kol-icons": "0.8.10"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/Pill.jsx

@@ -1,16 +1,25 @@
 /**
- * Pill Component
+ * Pill — the STATIC chip: a label, category, or status word. Not clickable.
  *
- * Small badge/tag component for labels, categories, or status indicators
- * Uses existing pill classes from components.css (pill-outline, pill-subtle, pill-inverse)
+ * The chip family, so the right one gets reached for (documented at source,
+ * 2026-07-30):
+ *   Pill  — static label. No states, no handlers. THIS component.
+ *   Tag   — interactive/filterable. Its active/onClick/onRemove states are the
+ *           whole point; a Tag with no handler is a Pill wearing the wrong name.
+ *   Badge — system status or a count.
+ *
+ * Defaults follow the standing laws: `subtle` (nothing defaults to outline —
+ * outline needs a stated reason) and `sm` (chip law). Both were wrong until
+ * 2026-07-30 — the component defaulted outline/md, so every correct call site
+ * had to pass both props explicitly.
  *
  * @param {Object} props
  * @param {string} props.children - Text content of the pill
- * @param {string} props.variant - Visual variant: 'outline' | 'subtle' | 'inverse' (default: 'outline')
- * @param {string} props.size - Size variant: 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {string} props.variant - Visual variant: 'subtle' | 'outline' | 'inverse' (default: 'subtle')
+ * @param {string} props.size - Size variant: 'sm' | 'md' | 'lg' (default: 'sm')
  * @param {string} props.className - Additional classes for customization
  */
-const Pill = ({ children, variant = 'outline', size = 'md', className = '' }) => {
+const Pill = ({ children, variant = 'subtle', size = 'sm', className = '' }) => {
   const variantClasses = {
     outline: 'pill-outline',
     subtle: 'pill-subtle',

package/src/atoms/Tag.jsx

@@ -3,19 +3,29 @@ import { Icon } from '@kolkrabbi/kol-icons'
 const ICON_SIZES = { sm: 10, md: 12, lg: 14 }
 
 /**
- * Tag — canonical (merged web rich + brand compat).
+ * Tag — the INTERACTIVE chip: filterable, selectable, removable.
  *
- * Web's rich API: variant (default/naked/inverse/solid), size, color, solid,
- * active, icon, onRemove, onClick. Plus:
+ * The chip family (documented at source, 2026-07-30):
+ *   Pill  — static label. No states, no handlers. Reach for this for decoration.
+ *   Tag   — interactive/filterable. THIS component. Its `active`/`onClick`/
+ *           `onRemove` states are the point — a Tag with no handler renders a
+ *           <span> and is a Pill wearing the wrong name.
+ *   Badge — system status or a count.
+ *
+ * Canonical (merged web rich + brand compat). Web's rich API: variant
+ * (default/naked/inverse/solid), size, color, solid, active, icon, onRemove,
+ * onClick. Plus:
  *  - `hash` (default true) — prepend `#` (web's tag style). Pass hash={false}
  *    for plain labels (brand usage).
  *  - `text` — content fallback when no children (brand SwatchControls passes text=).
+ *
+ * `size` defaults to `sm` per the chip law (2026-07-30, same pass as Pill).
  */
 export default function Tag({
   children,
   text,
   variant = 'default',
-  size = 'md',
+  size = 'sm',
   color,
   solid = false,
   active = false,

package/src/organisms/ContentFilters.jsx

@@ -146,14 +146,15 @@ const ContentFilters = ({
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
-            <Button
-              iconOnly="filter"
-              iconSize={20}
-              size="md"
-              variant="ghost"
+            <button
+              type="button"
               onClick={() => setIsExpanded(!isExpanded)}
+              className="kol-btn kol-btn-md kol-btn-icon"
               aria-label="Toggle filters"
-            />
+              style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
+            >
+              <Icon name="filter" size={20} />
+            </button>
             <div
               className="flex items-center justify-center rounded-sm cursor-pointer hover:bg-fg-04 transition-colors"
               style={{
@@ -170,7 +171,7 @@ const ContentFilters = ({
               }}
             >
               <span
-                className="kol-btn kol-btn-ghost kol-btn-md kol-btn-icon flex items-center justify-center flex-shrink-0"
+                className="kol-btn kol-btn-md kol-btn-icon flex items-center justify-center flex-shrink-0"
                 style={{
                   opacity: searchOpen ? 0 : 1,
                   transition: 'opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)',