@kolkrabbi/kol-framework 0.10.0 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.10.0",
+  "version": "0.10.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",
@@ -27,7 +27,7 @@
     "app-shell"
   ],
   "dependencies": {
-    "@kolkrabbi/kol-component": "0.14.3",
+    "@kolkrabbi/kol-component": "0.15.0",
     "@kolkrabbi/kol-icons": "0.8.11"
   },
   "peerDependencies": {

package/src/ThemeToggle.jsx

@@ -45,6 +45,17 @@ import { useTheme } from './theme.js'
  *   hop      → button + fill subtle + fullWidth (old: chrome pinned md)
  *   hop-bare → flush + fullWidth (old: 6/24 padding kept)
  *
+ * NO INTERACTIVE STATES, ANY VARIANT (user ruling 2026-07-30): *"REMOVE ALL
+ * STATES, no fucking hover… no variant at all should have an interactive state
+ * — it's just a click 1-2, and it's themed."* It emitted `.kol-btn` +
+ * `.kol-btn-nav`/`.kol-btn-primary`, which dragged the button state machine
+ * along (base transition + focus ring, per-variant :hover wash, [aria-current]
+ * shift). Those three were the only state sources; it now emits
+ * `.kol-theme-toggle{,-none,-subtle,-flush}` instead, which declare the same
+ * resting appearance and have no state rules to inherit. The SIZE classes
+ * (`kol-btn-{sm,md,lg}`, `kol-btn-icon`) are pure padding/geometry and stay.
+ * The glyph roll stays too — that animates a state CHANGE, it is not a state.
+ *
  * Theme state lives in useTheme (./theme.js); this component is only the
  * glyph-roll UI on top of it.
  */
@@ -138,7 +149,7 @@ export default function ThemeToggle({
   /* ── DEPRECATED aliases — old chrome verbatim (0.6.x) ── */
   if (variant === 'icon') {
     return (
-      <button {...shared} className={`kol-btn kol-btn-nav kol-btn-${size} kol-btn-icon ${className}`.trim()}>
+      <button {...shared} className={`kol-theme-toggle kol-theme-toggle-none kol-btn-${size} kol-btn-icon ${className}`.trim()}>
         {iconSwap(glyphSolo)}
       </button>
     )
@@ -146,8 +157,8 @@ export default function ThemeToggle({
   if (variant === 'hop' || variant === 'hop-bare') {
     const bare = variant === 'hop-bare'
     const chromeCls = bare
-      ? 'w-full inline-flex items-center justify-start gap-2 py-1.5 px-6 kol-mono-14 bg-transparent text-emphasis transition-colors'
-      : 'kol-btn kol-btn-primary kol-btn-md kol-mono-14 w-full justify-start gap-2'
+      ? 'w-full inline-flex items-center justify-start gap-2 py-1.5 px-6 kol-mono-14 bg-transparent text-emphasis'
+      : 'kol-theme-toggle kol-theme-toggle-subtle kol-btn-md kol-mono-14 w-full justify-start gap-2'
     return (
       <button {...shared} className={`${chromeCls} ${className}`.trim()}>
         <span className="inline-flex items-center justify-center shrink-0" aria-hidden="true">
@@ -165,7 +176,7 @@ export default function ThemeToggle({
 
   if (variant === 'flush') {
     const glyph = label ? glyphWithText : glyphSolo
-    const cls = `inline-flex items-center gap-2 ${mono} bg-transparent text-emphasis transition-colors ${width} ${className}`
+    const cls = `kol-theme-toggle kol-theme-toggle-flush gap-2 ${mono} ${width} ${className}`
     return (
       <button {...shared} className={cls.replace(/\s+/g, ' ').trim()}>
         {!iconRight && iconSwap(glyph)}
@@ -176,19 +187,19 @@ export default function ThemeToggle({
   }
 
   /* variant === 'button' (default) — the padded rung. fill is the one bg
-   * element: subtle = the grey fill (kol-btn-primary), none = the invisible
-   * container (kol-btn-nav — quiet ink + hover wash, geometry identical). */
-  const fillCls = fill === 'none' ? 'kol-btn-nav' : 'kol-btn-primary'
+   * element: subtle = the grey fill, none = the invisible container. Geometry
+   * identical; no hover wash on either — see the no-states note below. */
+  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 (
-      <button {...shared} className={`kol-btn ${fillCls} kol-btn-${size} kol-btn-icon ${width} ${className}`.replace(/\s+/g, ' ').trim()}>
+      <button {...shared} className={`kol-theme-toggle ${fillCls} kol-btn-${size} kol-btn-icon ${width} ${className}`.replace(/\s+/g, ' ').trim()}>
         {iconSwap(glyphSolo)}
       </button>
     )
   }
   return (
-    <button {...shared} className={`kol-btn ${fillCls} kol-btn-${size} ${mono} gap-2 ${width} ${className}`.replace(/\s+/g, ' ').trim()}>
+    <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>
       {iconRight && iconSwap(glyphWithText)}