@kolkrabbi/kol-component 0.12.19 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.19",
+  "version": "0.13.1",
   "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/molecules/CodeBlock.jsx

@@ -3,6 +3,10 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { Icon } from '@kolkrabbi/kol-icons'
 
+/* taxonomy-ok: molecule — nests <Icon> from @kolkrabbi/kol-icons (the copy
+ * affordance). The gate only counts kol-component nesting, so a molecule whose
+ * only KOL child lives in a sibling package reads as an atom to it. */
+
 /**
  * CodeBlock — REPLICATED from the elder reference
  * (kol-website/packages/ui/src/molecules/CodeBlock.jsx, 2026-07-28 user