@kolkrabbi/kol-framework 0.6.0 → 0.6.2

package/kol-framework.css

@@ -17,21 +17,11 @@ html,
 body {
   background: var(--kol-surface-primary);
   color: var(--kol-surface-on-primary);
-
-  /* Editor-style app — selection is mostly meaningless on chrome. Default
-   * to non-selectable; opt back in for prose, tables, inputs, code below. */
-  -webkit-user-select: none;
-  user-select: none;
 }
 
-/* Allowlist — surfaces where reading / copying matters. */
-input, textarea, [contenteditable="true"],
-.kol-prose, .kol-prose *,
-.kol-table, .kol-table *,
-code, pre {
-  -webkit-user-select: text;
-  user-select: text;
-}
+/* The global user-select:none gate + allowlist was REMOVED 2026-07-29 (user
+ * law, brand-app ruling): text is selectable everywhere — copyability beats
+ * chrome purity. */
 
 /* Selection highlight uses brand-primary so it reads on-brand when it appears. */
 ::selection {
@@ -87,7 +77,10 @@ code, pre {
 
 @media (min-width: 1280px) { :root { --kol-container-max: 1600px; } }
 
-:root[data-sidenav="collapsed"] { --kol-sidenav-w: var(--kol-sidenav-w-collapsed); }
+/* :root[data-sidenav="collapsed"] removed 2026-07-29 — the manual collapse
+ * feature died with the editor's exit (brand ruling); the responsive rail
+ * below 1024px is the surviving narrow mode. --kol-sidenav-w-collapsed stays:
+ * the rail still uses it. */
 
 /* ───── Brand doc layout (sidebar + content) ─────
    The grid lives in CSS for its dynamic --kol-sidenav-w + transition. */
@@ -103,7 +96,6 @@ code, pre {
      User's localStorage expand preference is overridden while viewport is narrow;
      restored once they cross back over the threshold. */
   .kol-brand-layout { grid-template-columns: var(--kol-sidenav-w-collapsed) minmax(0, 1fr); }
-  .kol-sidenav-toggle { display: none; }
   .kol-sidenav-hops { padding: 0 0 16px; margin-bottom: 16px; }
   .kol-sidenav-hop { padding: 8px 0; justify-content: center; gap: 0; }
   .kol-sidenav-hop-label { display: none; }
@@ -134,30 +126,9 @@ code, pre {
 }
 
 /* SideNav primitives (.kol-sidenav-hop, -hop-icon, -hop-label, -link,
- * -group) promoted to kol-components-atoms.css 2026-04-30. The .is-collapsed
- * responsive cascade rules below stay here — they're page-grid concerns,
- * not component chrome. */
-
-/* ───── SideNav collapsed (rail mode) — overrides inlined hop padding/gap ───── */
-
-.kol-sidenav.is-collapsed .kol-sidenav-hops {
-  padding: 0 0 16px;
-  margin-bottom: 16px;
-}
-
-.kol-sidenav.is-collapsed .kol-sidenav-hop {
-  padding: 8px 0;
-  justify-content: center;
-  gap: 0;
-}
-
-.kol-sidenav.is-collapsed .kol-sidenav-hop-label {
-  display: none;
-}
-
-.kol-sidenav.is-collapsed .kol-sidenav-body {
-  display: none;
-}
+ * -group) promoted to kol-components-atoms.css 2026-04-30. The manual
+ * collapse (.is-collapsed rail mode) was removed 2026-07-29 with the
+ * editor's exit — the ≤1024px responsive rail above is the survivor. */
 
 /* ───── Page scaffold ───── */
 
@@ -807,13 +778,9 @@ code, pre {
 }
 
 /* SideNav collapsibleSections chrome — inert unless that mode renders.
-   Rail (collapsed) + forced rail (≤1024px) hide count/toggle with the labels;
-   the open ≤767px drawer restores them, mirroring -hop-label. */
-.kol-sidenav.is-collapsed .kol-sidenav-hop-count,
-.kol-sidenav.is-collapsed .kol-sidenav-section-toggle {
-  display: none;
-}
-
+   The forced rail (≤1024px) hides count/toggle with the labels; the open
+   ≤767px drawer restores them, mirroring -hop-label. (Manual .is-collapsed
+   removed 2026-07-29.) */
 @media (max-width: 1024px) {
   .kol-sidenav-hop-count,
   .kol-sidenav-section-toggle {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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.8"
+    "@kolkrabbi/kol-icons": "0.8.10"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/ShellHeader.jsx

@@ -1,5 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
-import { SearchInput } from '@kolkrabbi/kol-component'
+import { SearchInput, Tooltip } from '@kolkrabbi/kol-component'
 import ThemeToggle from './ThemeToggle.jsx'
 
 /**
@@ -21,6 +21,11 @@ import ThemeToggle from './ThemeToggle.jsx'
  * Tab-strip chrome (mono type, active underline, hidden scrollbar, wide-
  * viewport bumps) lives in kol-framework.css under kol-shell-header-*.
  *
+ * Every icon-only control is Tooltip-wrapped and aria-labelled, the bar is a
+ * real `<header>` landmark, and the theme toggle steps up a rung at lg+ —
+ * folded in from the kol-website workshop fork (2026-07-30), which existed
+ * only to add these. Consumers get ONE header; the fork is retired.
+ *
  * @param {ReactNode} brand          Row-1 left slot — logo/wordmark + link, consumer-supplied
  * @param {Array}     nav            section tabs: [{ label, href, icon? }]
  * @param {Function}  isActive       (href) => boolean — marks the active tab
@@ -58,7 +63,7 @@ export default function ShellHeader({
   const hasTabRow = nav.length > 0 || Boolean(search) || Boolean(onNavToggle) || Boolean(onTocToggle)
 
   return (
-    <div className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
+    <header className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
       {/* Row 1: brand block + controls */}
       <div className="border-b border-fg-08">
         <div className="w-full px-4 py-4 md:px-5 lg:px-6">
@@ -70,16 +75,25 @@ export default function ShellHeader({
             </div>
             <div className="flex shrink-0 items-center gap-1">
               {actions}
-              {showThemeToggle && <ThemeToggle />}
+              {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 */}
+                  <span className="hidden lg:inline-flex"><ThemeToggle size="lg" /></span>
+                  <span className="lg:hidden"><ThemeToggle /></span>
+                </Tooltip>
+              )}
               {onMenuClick && (
-                <button
-                  type="button"
-                  className={`${iconBtnCls} text-fg-64`}
-                  onClick={onMenuClick}
-                  aria-label="Open navigation menu"
-                >
-                  <Icon name="hamburger" size={18} />
-                </button>
+                <Tooltip label="Open navigation menu">
+                  <button
+                    type="button"
+                    className={`${iconBtnCls} text-fg-64`}
+                    onClick={onMenuClick}
+                    aria-label="Open navigation menu"
+                  >
+                    <Icon name="hamburger" size={18} />
+                  </button>
+                </Tooltip>
               )}
             </div>
           </div>
@@ -98,7 +112,7 @@ export default function ShellHeader({
                     <a
                       key={item.href ?? item.label}
                       href={item.href}
-                      className="kol-shell-header-tab"
+                      className="kol-shell-header-tab kol-mono-14"
                       aria-current={active ? 'page' : undefined}
                       onClick={onNavigate ? (event) => onNavigate(event, item) : undefined}
                     >
@@ -111,30 +125,37 @@ export default function ShellHeader({
               {search && (
                 <SearchInput
                   className="shrink-0 self-center"
+                  aria-label="Search"
                   {...(search === true ? {} : search)}
                 />
               )}
               {(onNavToggle || onTocToggle) && (
                 <div className="hidden lg:flex items-center gap-1 pb-2">
                   {onNavToggle && (
-                    <button
-                      type="button"
-                      className={`${iconBtnCls} ${navCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
-                      onClick={onNavToggle}
-                      aria-label="Toggle navigation sidebar"
-                    >
-                      <Icon name="panel-left" size={18} />
-                    </button>
+                    <Tooltip label="Toggle navigation sidebar">
+                      <button
+                        type="button"
+                        className={`${iconBtnCls} ${navCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
+                        onClick={onNavToggle}
+                        aria-label="Toggle navigation sidebar"
+                        aria-pressed={!navCollapsed}
+                      >
+                        <Icon name="panel-left" size={18} />
+                      </button>
+                    </Tooltip>
                   )}
                   {onTocToggle && (
-                    <button
-                      type="button"
-                      className={`${iconBtnCls} ${tocCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
-                      onClick={onTocToggle}
-                      aria-label="Toggle table of contents sidebar"
-                    >
-                      <Icon name="panel-right" size={18} />
-                    </button>
+                    <Tooltip label="Toggle table of contents sidebar">
+                      <button
+                        type="button"
+                        className={`${iconBtnCls} ${tocCollapsed ? 'text-fg-32' : 'text-fg-64'}`}
+                        onClick={onTocToggle}
+                        aria-label="Toggle table of contents sidebar"
+                        aria-pressed={!tocCollapsed}
+                      >
+                        <Icon name="panel-right" size={18} />
+                      </button>
+                    </Tooltip>
                   )}
                 </div>
               )}
@@ -142,6 +163,6 @@ export default function ShellHeader({
           </div>
         </div>
       )}
-    </div>
+    </header>
   )
 }