@kolkrabbi/kol-framework 0.5.10 → 0.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "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",
@@ -28,7 +28,7 @@
   ],
   "dependencies": {
     "@kolkrabbi/kol-component": "0.12.19",
-    "@kolkrabbi/kol-icons": "0.8.6"
+    "@kolkrabbi/kol-icons": "0.8.8"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/ThemeToggle.jsx

@@ -9,6 +9,11 @@ import { useTheme } from './theme.js'
  *              → 14/16/18px glyph, square box + quiet states from the
  *              .kol-btn-nav chrome (theme ≥0.11.4), so the toggle sits flush
  *              with sibling navigation buttons in a bar.
+ *   button   — a REAL ladder button (2026-07-29, user-ordered): glyph + label
+ *              inside plain `.kol-btn .kol-btn-primary .kol-btn-{size}` with
+ *              the rung's mono type and pairing-law glyph (16/20/24) — no
+ *              width/justify overrides, so it measures exactly like any
+ *              other kol-btn on the rung.
  *   hop      — full-width labeled Button-primary-styled sidenav row
  *              (bg-fg-04, on-primary text). For sidenav rows where it pairs
  *              with other Button-primary "hop" entries.
@@ -19,9 +24,10 @@ import { useTheme } from './theme.js'
  * Theme state lives in useTheme (./theme.js) — the exported machinery
  * (initial-state resolution, saved-choice re-stamp, system-follow, cross-
  * instance sync). This component is only the icon-swap UI on top of it.
- * The icon-swap animation slides a doubled `mode-toggle-01` (v1 set)
- * horizontally — the split-circle glyph makes the slide itself read as
- * the flip (same-icon slide, per design).
+ * The icon-swap slides a doubled `mode-toggle-01` (v1 set) horizontally
+ * while both glyphs spin 180° in the same clock — the split-circle rolls
+ * forward (>>) on dark→light and rolls back (<<) on light→dark (the
+ * original roll behavior, restored 2026-07-29).
  */
 export default function ThemeToggle({ variant = 'icon', size = 'md', className = '' }) {
   const { isDark, toggle } = useTheme()
@@ -29,6 +35,12 @@ export default function ThemeToggle({ variant = 'icon', size = 'md', className =
   const next = isDark ? 'light' : 'dark'
   const handleToggle = toggle
 
+  /* The roll: the strip slides one glyph-width while each glyph spins 180° in
+   * the same clock — dark→light rolls forward (>>), light→dark rolls back (<<). */
+  const glyphSpin = {
+    transform: isDark ? 'rotate(0deg)' : 'rotate(180deg)',
+    lineHeight: 0,
+  }
   const iconSwap = (size) => (
     <span
       className="relative inline-block overflow-hidden"
@@ -39,12 +51,32 @@ export default function ThemeToggle({ variant = 'icon', size = 'md', className =
         className="flex transition-transform duration-500 ease-in-out"
         style={{ width: size * 2, transform: isDark ? 'translateX(0)' : `translateX(-${size}px)` }}
       >
-        <Icon name="mode-toggle-01" size={size} />
-        <Icon name="mode-toggle-01" size={size} />
+        <span className="inline-flex transition-transform duration-500 ease-in-out" style={glyphSpin}>
+          <Icon name="mode-toggle-01" size={size} />
+        </span>
+        <span className="inline-flex transition-transform duration-500 ease-in-out" style={glyphSpin}>
+          <Icon name="mode-toggle-01" size={size} />
+        </span>
       </span>
     </span>
   )
 
+  if (variant === 'button') {
+    const mono = size === 'sm' ? 'kol-mono-12' : size === 'lg' ? 'kol-mono-16' : 'kol-mono-14'
+    const glyph = size === 'sm' ? 16 : size === 'lg' ? 24 : 20
+    return (
+      <button
+        type="button"
+        onClick={handleToggle}
+        aria-label={`Switch to ${next} mode`}
+        className={`kol-btn kol-btn-primary kol-btn-${size} ${mono} gap-2 ${className}`.trim()}
+      >
+        {iconSwap(glyph)}
+        <span>{isDark ? 'Dark mode' : 'Light mode'}</span>
+      </button>
+    )
+  }
+
   if (variant === 'hop' || variant === 'hop-bare') {
     const bare = variant === 'hop-bare'
     const chromeCls = bare