@kolkrabbi/kol-framework 0.44.0 → 0.45.0

package/kol-framework.css

@@ -63,16 +63,17 @@ body {
   --kol-sidenav-step: var(--kol-spacing-4);    /* keyboard resize increment */
   --kol-sidenav-snap-default: var(--kol-sidenav-step); /* release within this of the default clears the override */
   --kol-sidenav-w-collapsed: 56px;
-  /* The workshop shell's RIGHT rail. EQUAL TO THE LEFT (user ruling
-     2026-08-01) — the two rails frame the same content and a lopsided frame is
-     a frame nobody drew on purpose; it read 14rem against the left's 16rem.
-     Kept as its own token rather than aliased: the right rail can be ruled
-     different later without touching the sidenav.
-     The track is RESERVED whether or not the rail has anything in it — a rail
-     that vanishes on a heading-less page re-flows main, so the same shell
-     renders at two widths. Distinct from --kol-toc-w further down, which is
-     the BRAND layout's rail: same concept, two shells, two numbers. */
-  --kol-shell-toc-w: 16rem;
+  /* THE WORKSHOP SHELL'S RAILS — their own pair, 256px each (showcase
+     refinement 2026-09-28, user: "should they both be the same width? layout
+     feels asymmetrical"). The left rail used to read --kol-sidenav-w, which is
+     the DRAGGABLE app sidenav's ladder (264, 320 from 1536 — useDragResize,
+     NavRail, the labs rail, the deck editor), so the docs shell rendered
+     320 | main | 256: one token, two shells. The workshop rails are not
+     draggable and frame the same content, so they are equal and fixed, in px
+     like every other layout width. Distinct from --kol-toc-w further down,
+     which is the BRAND layout's rail. */
+  --kol-shell-nav-w: 256px;
+  --kol-shell-toc-w: 256px;
   --kol-container-max: 100%;
 
   /* Opacity tokens (--kol-fg-*) + text-role tokens (--kol-text-*) live in
@@ -736,7 +737,7 @@ body {
 .kol-portal-footer a { text-decoration: none; transition: opacity 150ms ease; }
 .kol-portal-footer a:hover { opacity: 0.8; }
 
-/* ───── Back link (structural only; use kol-helper-xs uppercase tracking-widest text-fg-64 on JSX) ───── */
+/* ───── Back link (structural only; PageHero sets its type: kol-helper-12 tracking-widest text-body) ───── */
 
 .kol-back-link {
   display: inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.44.0",
+  "version": "0.45.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.186.0",
-    "@kolkrabbi/kol-icons": "^0.25.0"
+    "@kolkrabbi/kol-component": "^0.228.0",
+    "@kolkrabbi/kol-icons": "^0.29.0"
   },
   "files": [
     "src",

package/src/PageLayout.jsx

@@ -117,6 +117,7 @@ export default function PageLayout({ navTree = [], header, footer, defaultTocCon
             data-drawer-open={drawerOpen ? 'true' : undefined}
             data-toc={showToc ? 'true' : undefined}
           >
+            {/* tip-ok: phone-only (md:hidden) — a hover tip never shows on touch; the aria-label names it */}
             <button
               type="button"
               className="kol-sidenav-hamburger md:hidden fixed top-3 left-3 z-30 w-10 h-10 inline-flex items-center justify-center rounded-full bg-surface-primary border border-fg-08 text-emphasis"

package/src/ShellHeader.jsx

@@ -128,12 +128,12 @@ export default function ShellHeader({
             <div className="flex shrink-0 items-center gap-1">
               {actions}
               {showThemeToggle && (
-                <Tooltip label="Toggle theme">
+                <>
                   {/* md at every width (user re-rule 2026-08-09: the whole
                     * header glyph row rides md, full ink — the earlier lg-at-lg+
                     * split is repealed, which also collapsed the two spans). */}
                   <ThemeToggle fill="none" label={false} size="md" />
-                </Tooltip>
+                </>
               )}
               {onMenuClick && (
                 <Tooltip label="Open navigation menu">

package/src/ThemeToggle.jsx

@@ -1,4 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
+import { Tooltip } from '@kolkrabbi/kol-component'
 import { useTheme } from './theme.js'
 
 /**
@@ -88,6 +89,12 @@ export default function ThemeToggle({
    * ink, so the toggle beside a sunken Dropdown matches it; `inverse` aliased. Rules in kol-theme. */
   tone = 'default',
   className = '',
+  /* THE TOGGLE CARRIES ITS OWN TOOLTIP (2026-09-28). It set a native `title`
+   * AND the header wrapped it in a KOL Tooltip, so hovering showed both — the
+   * browser's "Switch to light mode · following your system" under the DS's
+   * "Toggle theme". One tip now, the DS one, with the richer text; `false`
+   * leaves the button bare for a caller that wraps it itself. */
+  tooltip = true,
 }) {
   const { theme, mode, cycle, clear } = useTheme()
   /* six tones (tone-is-the-ground-axis, 2026-09-03); unset inherits the wrapper's */
@@ -149,12 +156,13 @@ export default function ThemeToggle({
     type: 'button',
     onClick,
     'aria-label': `Switch to ${next} mode`,
-    title: `Switch to ${next} mode${resetHint}`,
   }
+  const tip = `Switch to ${next} mode${resetHint}`
+  const wrap = (node) => (tooltip ? <Tooltip label={tip}>{node}</Tooltip> : node)
 
   /* ── DEPRECATED aliases — old chrome verbatim (0.6.x) ── */
   if (variant === 'icon') {
-    return (
+    return wrap(
       <button {...shared} className={`kol-theme-toggle kol-theme-toggle-none kol-btn-${size} kol-btn-icon ${extra}`.trim()}>
         {iconSwap(glyphSolo)}
       </button>
@@ -176,7 +184,7 @@ export default function ThemeToggle({
     const chromeCls = bare
       ? `w-full inline-flex items-center justify-start gap-2 ${barePadY} px-6 ${mono} bg-transparent text-emphasis`
       : 'kol-theme-toggle kol-theme-toggle-subtle kol-btn-md kol-mono-14 w-full justify-start gap-2'
-    return (
+    return wrap(
       <button {...shared} className={`${chromeCls} ${extra}`.trim()}>
         <span className="inline-flex items-center justify-center shrink-0" aria-hidden="true">
           {iconSwap(bare ? glyphWithText : glyphSolo)}
@@ -194,7 +202,7 @@ export default function ThemeToggle({
   if (variant === 'flush') {
     const glyph = label ? glyphWithText : glyphSolo
     const cls = `kol-theme-toggle kol-theme-toggle-flush gap-2 ${mono} ${width} ${extra}`
-    return (
+    return wrap(
       <button {...shared} className={cls.replace(/\s+/g, ' ').trim()}>
         {!iconRight && iconSwap(glyph)}
         {label && <span className={fullWidth ? 'flex-1 min-w-0 text-left' : ''}>{MODE_LABEL[next]}</span>}
@@ -209,13 +217,13 @@ export default function ThemeToggle({
   const fillCls = fill === 'none' ? 'kol-theme-toggle-none' : 'kol-theme-toggle-subtle'
   if (!label) {
     // icon-only pins the square box per rung — geometry condition, not a variant
-    return (
+    return wrap(
       <button {...shared} className={`kol-theme-toggle ${fillCls} kol-btn-${size} kol-btn-icon ${width} ${extra}`.replace(/\s+/g, ' ').trim()}>
         {iconSwap(glyphSolo)}
       </button>
     )
   }
-  return (
+  return wrap(
     <button {...shared} className={`kol-theme-toggle ${fillCls} kol-btn-${size} ${mono} gap-2 ${width} ${extra}`.replace(/\s+/g, ' ').trim()}>
       {!iconRight && iconSwap(glyphWithText)}
       <span className={fullWidth ? 'flex-1 min-w-0 text-left' : ''}>{MODE_LABEL[next]}</span>