@kolkrabbi/kol-framework 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.17.0",
+  "version": "0.19.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",
@@ -27,8 +27,8 @@
     "app-shell"
   ],
   "dependencies": {
-    "@kolkrabbi/kol-component": "^0.32.2",
-    "@kolkrabbi/kol-icons": "^0.12.1"
+    "@kolkrabbi/kol-component": "^0.37.0",
+    "@kolkrabbi/kol-icons": "^0.15.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/ShellHeader.jsx

@@ -108,12 +108,10 @@ export default function ShellHeader({
               {actions}
               {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. New spec API (0.9.0):
-                    * quiet square = button geometry + fill none + no label
-                    * (was the old `icon` variant default). */}
-                  <span className="hidden lg:inline-flex"><ThemeToggle fill="none" label={false} size="lg" /></span>
-                  <span className="lg:hidden"><ThemeToggle fill="none" label={false} size="lg" /></span>
+                  {/* 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 && (
@@ -121,13 +119,12 @@ export default function ShellHeader({
                   {/* 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
-                    * only approximate by dropping its own. `nav` rests at
-                    * oq-64 — the `text-fg-64` this control hand-wrote for
-                    * months. */}
+                    * only approximate by dropping its own. `nav` rests at FULL
+                    * ink since the 2026-08-09 re-rule (was oq-64). */}
                   <IconFrame
                     name="hamburger"
                     variant="nav"
-                    size="lg"
+                    size="md"
                     onClick={onMenuClick}
                     aria-label="Open navigation menu"
                   />

package/src/ThemeToggle.jsx

@@ -92,23 +92,28 @@ export default function ThemeToggle({
   /* The ROLL — wheel mechanics (2026-07-30, one-glyph ruling): two copies of
    * the split circle; rotation accumulates with the slot (−180° per
    * glyph-width) on the same 500ms/ease clock as the strip's translateX, so
-   * light→dark rolls one way and dark→light rolls back. */
+   * light→dark rolls one way and dark→light rolls back.
+   *
+   * Chrome classes are kol-roll* from kol-theme (ComponentTailwindSourceTrap,
+   * 2026-08-12) — these were Tailwind utilities, which a consumer's scanner
+   * never generates from node_modules, so the roll silently froze in any app
+   * without the @source lines. Only per-render geometry stays inline. */
   const slot = SLOT[shown]
   const iconSwap = (px) => (
     <span
-      className="relative inline-block overflow-hidden"
+      className="kol-roll"
       style={{ width: px, height: px }}
       aria-hidden="true"
     >
       <span
-        className="flex transition-transform duration-500 ease-in-out"
+        className="kol-roll-strip"
         style={{ width: px * 2, transform: `translateX(-${slot * px}px)` }}
       >
         {[0, 1].map((i) => (
           <span
             key={i}
-            className="inline-flex transition-transform duration-500 ease-in-out"
-            style={{ transform: `rotate(${slot * -180}deg)`, lineHeight: 0 }}
+            className="kol-roll-slot"
+            style={{ transform: `rotate(${slot * -180}deg)` }}
           >
             <Icon name="mode-toggle-01" size={px} />
           </span>