@kolkrabbi/kol-framework 0.45.0 → 0.47.0

package/kol-framework.css

@@ -177,7 +177,7 @@ body {
 }
 /* A nested route GROUP's header (sidenav-nested-groups, kol-studio
  * 2026-08-26): a non-routing label sitting where a leaf sits, its rows one
- * step further in. Type and colour ride the element as utilities
+ * step further in. Type and color ride the element as utilities
  * (kol-helper-10; text-subtle, text-emphasis when a leaf beneath it is the
  * route); the box lives here. No text-transform — the retired fork's
  * `uppercase` does not return (type law: only the display voice carries one). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "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",
@@ -21,8 +21,8 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.228.0",
-    "@kolkrabbi/kol-icons": "^0.29.0"
+    "@kolkrabbi/kol-icons": "^0.30.0",
+    "@kolkrabbi/kol-component": "^0.230.0"
   },
   "files": [
     "src",

package/src/PageLayout.jsx

@@ -55,7 +55,7 @@ export const ShellTocCollapsedContext = createContext(null)
  * @param {ReactNode} footer             below the outlet on the plane
  * @param {ReactNode} defaultTocContent  the TOC rail's content when no page registers one
  * @param {object}    sideNav            every SideNav prop this layout does not own, spread onto the rail
- * @param {string}    pageWash           the plane's wash, a CSS colour (e.g. `'var(--kol-fg-02)'`)
+ * @param {string}    pageWash           the plane's wash, a CSS color (e.g. `'var(--kol-fg-02)'`)
  * @param {boolean}   bare               plane + outlet only (default false)
  */
 export default function PageLayout({ navTree = [], header, footer, defaultTocContent, sideNav, pageWash, bare = false }) {

package/src/ShellHeader.jsx

@@ -36,6 +36,8 @@ import ThemeToggle from './ThemeToggle.jsx'
  * @param {ReactNode} actions        Row-1 trailing slot before the theme toggle (e.g. a search-overlay trigger)
  * @param {boolean}   showThemeToggle render the framework ThemeToggle (default true)
  * @param {Function}  onMenuClick    hamburger click; button renders only when set
+ * @param {boolean}   menuBelowLg     the hamburger shows only below `lg` (2026-09-30, the names audit — on a desktop the tab row's own
+ *                                    rail toggles do its job, so it read as a duplicate; default false keeps every consumer as it was)
  * @param {Function}  onNavToggle    dock-left click → toggle left nav; button renders only when set (lg+)
  * @param {Function}  onTocToggle    dock-right click → toggle TOC rail; button renders only when set (lg+)
  * @param {boolean}   navCollapsed   tints the dock-left button
@@ -82,6 +84,7 @@ export default function ShellHeader({
   actions,
   showThemeToggle = true,
   onMenuClick,
+  menuBelowLg = false,
   onNavToggle,
   onTocToggle,
   navCollapsed,
@@ -136,7 +139,7 @@ export default function ShellHeader({
                 </>
               )}
               {onMenuClick && (
-                <Tooltip label="Open navigation menu">
+                <Tooltip label="Menu">
                   {/* IconFrame, not Button (user ruling 2026-08-01). Header
                     * chrome takes a click but must not light up; the frame has
                     * no state rules at all, which is the property Button can
@@ -146,6 +149,7 @@ export default function ShellHeader({
                     name="hamburger"
                     variant="nav"
                     size="md"
+                    className={menuBelowLg ? 'lg:hidden' : ''}
                     onClick={onMenuClick}
                     aria-label="Open navigation menu"
                   />
@@ -193,7 +197,7 @@ export default function ShellHeader({
               {(onNavToggle || onTocToggle) && (
                 <div className="hidden lg:flex items-center gap-1 pb-2">
                   {onNavToggle && (
-                    <Tooltip label="Toggle navigation sidebar">
+                    <Tooltip label="Navigation">
                       {/* The collapsed tint is a VARIANT SWAP, not a state:
                         * `ghost` rests at oq-48, `nav` at oq-64, and both are
                         * static classes with no rules to fire. That is the only
@@ -211,7 +215,7 @@ export default function ShellHeader({
                     </Tooltip>
                   )}
                   {onTocToggle && (
-                    <Tooltip label="Toggle table of contents sidebar">
+                    <Tooltip label="Contents">
                       <IconFrame
                         name="panel-right"
                         variant={tocCollapsed ? 'ghost' : 'nav'}

package/src/SideNav.jsx

@@ -398,7 +398,7 @@ function SideNavInner({
        * the aside's position/height/stack live in .kol-sidenav
        * (kol-framework.css). `sticky … h-dvh z-20` here outranked the 767px
        * drawer rule's `position: fixed`, so every consumer page opened one
-       * viewport down on phones. Only colour utilities ride the element. */
+       * viewport down on phones. Only color utilities ride the element. */
       className={`kol-sidenav${background ? ' bg-surface-primary' : ''}${hairline ? ' border-r border-fg-08' : ''}${collapsed ? ' is-collapsed' : ''}${drawerOpen ? ' is-drawer-open' : ''}`}
     >
       {/* NO chip Button in either state (user build order 2026-08-09 — "MAKE

package/src/ThemeToggle.jsx

@@ -155,9 +155,11 @@ export default function ThemeToggle({
   const shared = {
     type: 'button',
     onClick,
-    'aria-label': `Switch to ${next} mode`,
+    'aria-label': `Switch to ${next} mode${resetHint}`,
   }
-  const tip = `Switch to ${next} mode${resetHint}`
+  /* ONE WORD (2026-09-30, open questions Round 1 Q4 — ruled many times); the alt-click hint
+   * stays in the aria-label and the S sheet, not the tooltip */
+  const tip = 'Theme'
   const wrap = (node) => (tooltip ? <Tooltip label={tip}>{node}</Tooltip> : node)
 
   /* ── DEPRECATED aliases — old chrome verbatim (0.6.x) ── */