@kolkrabbi/kol-framework 0.6.2 → 0.6.3

package/README.md

@@ -17,9 +17,14 @@ npm i @kolkrabbi/kol-framework @kolkrabbi/kol-component @kolkrabbi/kol-theme
 @import "tailwindcss";
 @import "@kolkrabbi/kol-theme";
 @import "@kolkrabbi/kol-framework/kol-brand-color.css";
-@import "@kolkrabbi/kol-framework/kol-framework.css";
+@import "@kolkrabbi/kol-framework/kol-framework.css" layer(components);
 ```
 
+`layer(components)` is **required**, not optional. Unlayered rules outrank every
+layered rule regardless of specificity, so a bare import promotes framework
+chrome above the theme's type layer and the same package renders differently
+per consumer.
+
 ```jsx
 import { AppShell } from '@kolkrabbi/kol-framework'
 import { NAV_TREE, getActivePage } from './sidebars.config'

package/kol-framework.css

@@ -828,7 +828,13 @@ body {
   align-items: center;
   gap: 6px;
   font-family: var(--kol-font-family-mono, monospace);
-  font-size: 13px;
+  /* The tab IS kol-mono-14 (14/18). Stated here, not as a utility class on the
+     element: this rule and the utility have equal specificity, so whichever
+     stylesheet loads last wins — and that flipped per consumer depending on
+     whether kol-framework.css was imported into a layer. Type lives in the
+     rule; do not re-add a kol-mono-* class to the tab. */
+  font-size: 14px;
+  line-height: 18px;
   font-weight: 500;
   letter-spacing: 0.02em;
   color: var(--kol-fg-64);
@@ -856,7 +862,8 @@ body {
   }
 
   .kol-shell-header-tab {
-    font-size: 16px;
+    /* No type bump — 14/18 is the tab size at every viewport (user ruling
+       2026-07-30). Only the spacing breathes at wide widths. */
     gap: 8px;
     padding-top: 10px;
     padding-bottom: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "KOL app shell — sidenav, layout, theme toggle, footer, heroes + brand color layer. SideNav takes nav data as props so the tree stays app-local.",
   "license": "MIT",
   "type": "module",

package/src/ShellHeader.jsx

@@ -112,7 +112,7 @@ export default function ShellHeader({
                     <a
                       key={item.href ?? item.label}
                       href={item.href}
-                      className="kol-shell-header-tab kol-mono-14"
+                      className="kol-shell-header-tab"
                       aria-current={active ? 'page' : undefined}
                       onClick={onNavigate ? (event) => onNavigate(event, item) : undefined}
                     >