@kolkrabbi/kol-framework 0.26.0 → 0.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "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",
@@ -20,7 +20,7 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.80.0",
+    "@kolkrabbi/kol-component": "^0.81.0",
     "@kolkrabbi/kol-icons": "^0.18.0"
   },
   "files": [

package/src/AppShell.jsx

@@ -44,7 +44,12 @@ export default function AppShell({ navTree = [], getActivePage: _getActivePage,
       <ShellTocContext.Provider value={setTocContent}>
         <ShellTocCollapsedContext.Provider value={setTocCollapsed}>
           <div
-            className="kol-brand-layout"
+            /* the PAGE is surface-tertiary, the rail surface-primary — the brand
+             * split (appshell-content-surface, kol-studio 2026-08-26, user:
+             * "sidenav primary, site tertiary, like brand"). BrandLayout's own
+             * line, verbatim; the fork dropped it on 2026-08-09 and every
+             * AppShell app rendered one flat colour. */
+            className="kol-brand-layout bg-surface-tertiary min-h-dvh"
             data-drawer-open={drawerOpen ? 'true' : undefined}
             data-toc={showToc ? 'true' : undefined}
           >

package/src/ThemeToggle.jsx

@@ -64,6 +64,11 @@ import { useTheme } from './theme.js'
  * sees) and one click commits it. The reset lives behind a modifier — alt- or
  * shift-click — which is the "separate affordance" the ruling allows, with no
  * new chrome and no third stop. */
+/* The VISIBLE label names the TARGET, not the state (ThemeToggleLabelTarget,
+ * user 2026-08-27: "should it not say dark mode in light mode and vice versa?
+ * as to what the button actually does when you click it?"). A button's label
+ * names its action — the aria-label / title always said "Switch to …"; the eye
+ * was told the opposite. Rendered as MODE_LABEL[next], never MODE_LABEL[shown]. */
 const MODE_LABEL = { light: 'Light mode', dark: 'Dark mode' }
 const SLOT = { dark: 0, light: 1 }
 
@@ -171,7 +176,7 @@ export default function ThemeToggle({
           {iconSwap(bare ? glyphWithText : glyphSolo)}
         </span>
         <span className="kol-sidenav-hop-label flex-1 min-w-0 text-left">
-          {MODE_LABEL[shown]}
+          {MODE_LABEL[next]}
         </span>
       </button>
     )
@@ -186,7 +191,7 @@ export default function ThemeToggle({
     return (
       <button {...shared} className={cls.replace(/\s+/g, ' ').trim()}>
         {!iconRight && iconSwap(glyph)}
-        {label && <span className={fullWidth ? 'flex-1 min-w-0 text-left' : ''}>{MODE_LABEL[shown]}</span>}
+        {label && <span className={fullWidth ? 'flex-1 min-w-0 text-left' : ''}>{MODE_LABEL[next]}</span>}
         {iconRight && iconSwap(glyph)}
       </button>
     )
@@ -207,7 +212,7 @@ export default function ThemeToggle({
   return (
     <button {...shared} className={`kol-theme-toggle ${fillCls} kol-btn-${size} ${mono} gap-2 ${width} ${className}`.replace(/\s+/g, ' ').trim()}>
       {!iconRight && iconSwap(glyphWithText)}
-      <span className={fullWidth ? 'flex-1 min-w-0 text-left' : ''}>{MODE_LABEL[shown]}</span>
+      <span className={fullWidth ? 'flex-1 min-w-0 text-left' : ''}>{MODE_LABEL[next]}</span>
       {iconRight && iconSwap(glyphWithText)}
     </button>
   )