@kolkrabbi/kol-framework 0.6.1 → 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.1",
+  "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

@@ -1,5 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
-import { SearchInput } from '@kolkrabbi/kol-component'
+import { SearchInput, Tooltip } from '@kolkrabbi/kol-component'
 import ThemeToggle from './ThemeToggle.jsx'
 
 /**
@@ -21,6 +21,11 @@ import ThemeToggle from './ThemeToggle.jsx'
  * Tab-strip chrome (mono type, active underline, hidden scrollbar, wide-
  * viewport bumps) lives in kol-framework.css under kol-shell-header-*.
  *
+ * Every icon-only control is Tooltip-wrapped and aria-labelled, the bar is a
+ * real `<header>` landmark, and the theme toggle steps up a rung at lg+ —
+ * folded in from the kol-website workshop fork (2026-07-30), which existed
+ * only to add these. Consumers get ONE header; the fork is retired.
+ *
  * @param {ReactNode} brand          Row-1 left slot — logo/wordmark + link, consumer-supplied
  * @param {Array}     nav            section tabs: [{ label, href, icon? }]
  * @param {Function}  isActive       (href) => boolean — marks the active tab
@@ -58,7 +63,7 @@ export default function ShellHeader({
   const hasTabRow = nav.length > 0 || Boolean(search) || Boolean(onNavToggle) || Boolean(onTocToggle)
 
   return (
-    <div className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
+    <header className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
       {/* Row 1: brand block + controls */}
       <div className="border-b border-fg-08">
         <div className="w-full px-4 py-4 md:px-5 lg:px-6">
@@ -70,16 +75,25 @@ export default function ShellHeader({
             </div>
             <div className="flex shrink-0 items-center gap-1">
               {actions}
-              {showThemeToggle && <ThemeToggle />}
+              {showThemeToggle && (
+                <Tooltip label="Toggle theme">
+                  {/* one rung up at lg+ — the bar has room, and the toggle is
+                    * the most-used control in the row */}
+                  <span className="hidden lg:inline-flex"><ThemeToggle size="lg" /></span>
+                  <span className="lg:hidden"><ThemeToggle /></span>
+                </Tooltip>
+              )}
               {onMenuClick && (
-                <button
-                  type="button"
-                  className={`${iconBtnCls} text-fg-64`}
-                  onClick={onMenuClick}
-                  aria-label="Open navigation menu"
-                >
-                  <Icon name="hamburger" size={18} />
-                </button>
+                <Tooltip label="Open navigation menu">
+                  <button
+                    type="button"
+                    className={`${iconBtnCls} text-fg-64`}
+                    onClick={onMenuClick}
+                    aria-label="Open navigation menu"
+                  >
+                    <Icon name="hamburger" size={18} />
+                  </button>
+                </Tooltip>
               )}
             </div>
           </div>
@@ -111,30 +125,37 @@ export default function ShellHeader({
               {search && (
                 <SearchInput
                   className="shrink-0 self-center"
+                  aria-label="Search"
                   {...(search === true ? {} : search)}
                 />
               )}
               {(onNavToggle || onTocToggle) && (
                 <div className="hidden lg:flex items-center gap-1 pb-2">
                   {onNavToggle && (
-                    <button
-                      type="button"
-                      className={`${iconBtnCls} ${navCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
-                      onClick={onNavToggle}
-                      aria-label="Toggle navigation sidebar"
-                    >
-                      <Icon name="panel-left" size={18} />
-                    </button>
+                    <Tooltip label="Toggle navigation sidebar">
+                      <button
+                        type="button"
+                        className={`${iconBtnCls} ${navCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
+                        onClick={onNavToggle}
+                        aria-label="Toggle navigation sidebar"
+                        aria-pressed={!navCollapsed}
+                      >
+                        <Icon name="panel-left" size={18} />
+                      </button>
+                    </Tooltip>
                   )}
                   {onTocToggle && (
-                    <button
-                      type="button"
-                      className={`${iconBtnCls} ${tocCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
-                      onClick={onTocToggle}
-                      aria-label="Toggle table of contents sidebar"
-                    >
-                      <Icon name="panel-right" size={18} />
-                    </button>
+                    <Tooltip label="Toggle table of contents sidebar">
+                      <button
+                        type="button"
+                        className={`${iconBtnCls} ${tocCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
+                        onClick={onTocToggle}
+                        aria-label="Toggle table of contents sidebar"
+                        aria-pressed={!tocCollapsed}
+                      >
+                        <Icon name="panel-right" size={18} />
+                      </button>
+                    </Tooltip>
                   )}
                 </div>
               )}
@@ -142,6 +163,6 @@ export default function ShellHeader({
           </div>
         </div>
       )}
-    </div>
+    </header>
   )
 }