@kolkrabbi/kol-component 0.13.1 → 0.14.1

package/package.json

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

@@ -8,22 +8,28 @@
  *           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.
+ * Defaults follow the standing laws: `primary` (the grey fill; nothing defaults
+ * to outline — outline needs a stated reason) and `sm` (chip law).
+ *
+ * Variant vocabulary joined Button's (user ruling 2026-07-30): `primary` is the
+ * grey/filled chip (was `subtle`), `secondary` is the outlined chip (was
+ * `outline`). The old names remain as deprecated aliases — same classes, no
+ * visual change at any call site.
  *
  * @param {Object} props
  * @param {string} props.children - Text content of the pill
- * @param {string} props.variant - Visual variant: 'subtle' | 'outline' | 'inverse' (default: 'subtle')
+ * @param {string} props.variant - Visual variant: 'primary' | 'secondary' | 'inverse' (deprecated aliases: 'subtle' → primary, 'outline' → secondary) (default: 'primary')
  * @param {string} props.size - Size variant: 'sm' | 'md' | 'lg' (default: 'sm')
  * @param {string} props.className - Additional classes for customization
  */
-const Pill = ({ children, variant = 'subtle', size = 'sm', className = '' }) => {
+const Pill = ({ children, variant = 'primary', size = 'sm', className = '' }) => {
   const variantClasses = {
-    outline: 'pill-outline',
+    primary: 'pill-subtle',
+    secondary: 'pill-outline',
+    inverse: 'pill-inverse',
+    /* deprecated aliases (pre-2026-07-30 vocabulary) */
     subtle: 'pill-subtle',
-    inverse: 'pill-inverse'
+    outline: 'pill-outline'
   }
 
   const sizeClasses = {

package/src/molecules/CodeBlock.jsx

@@ -62,7 +62,10 @@ const syntaxTheme = (foregroundToken = 80) => ({
   }
 })
 
-export default function CodeBlock({ children, code: codeProp, language: languageProp, filename: filenameProp, value }) {
+/* `bare` (2026-07-30): highlight + chip + copy WITHOUT the framed chrome — for
+ * hosts that already own the frame (PreviewCard's Code tab sat a full
+ * CodeBlock frame inside the kol-doc-figure border: frame-in-frame). */
+export default function CodeBlock({ children, code: codeProp, language: languageProp, filename: filenameProp, value, bare = false }) {
   const [copied, setCopied] = useState(false)
 
   const code = String(value?.code ?? codeProp ?? children ?? '')
@@ -80,8 +83,8 @@ export default function CodeBlock({ children, code: codeProp, language: language
   }
 
   return (
-    <div className="kol-codeblock-wrapper">
-      <div className="kol-codeblock">
+    <div className={bare ? '' : 'kol-codeblock-wrapper'}>
+      <div className={`kol-codeblock${bare ? ' kol-codeblock--bare' : ''}`}>
         {(filename || (language && language !== 'text')) && (
           <div className="kol-codeblock-filename">{filename || language}</div>
         )}