@kolkrabbi/kol-framework 0.15.1 → 0.16.0

package/kol-framework.css

@@ -112,6 +112,36 @@ body {
  * said 1800 — same element, two answers (lobby/WidthSystemContradictions). */
 @media (min-width: 1920px) { :root { --kol-container-max: var(--kol-content-shell, 1800px); } }
 
+/* SideNav's own box — IN RULES, not utilities (2026-08-09, defect found by
+ * the kol-website session during 0.15.1 verify): this whole file lives in
+ * @layer components, so a Tailwind utility the JSX stamps on the same element
+ * outranks every rule here — the collapsed overrides below silently lost to
+ * py-2 / pl-6 / Icon's own inline-flex. Same law as type: a component's box
+ * lives in its own rule, never a utility racing it. The JSX keeps only
+ * type/color utilities on these elements. */
+.kol-sidenav-hop {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  position: relative;
+  padding: 0.5rem 2.5rem 0.5rem 1.5rem;
+}
+/* the caret rides a PLAIN span (Icon stamps inline-flex on its own element,
+ * which would outrank the collapsed display:none) */
+.kol-sidenav-hop-caret {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+}
+.kol-sidenav-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin-bottom: 0.5rem;
+}
+.kol-sidenav-footer { padding-inline: 1.5rem 1rem; }
+
 /* :root[data-sidenav="collapsed"] — the manual collapse, rebuilt DELIBERATELY
  * 2026-08-09 (lobby: SideNavGrabResize) after the 2026-07-29 removal of the
  * renderer-less stamp. SideNav's grab edge (useDragResize.js) owns the state

package/package.json

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

package/src/SideNav.jsx

@@ -62,6 +62,16 @@ export default function SideNav({
   const isPageActive = (to) => (isActive ? isActive(to) : pathname === to)
   const isActiveCat = (cat) => pagesOf(cat).some((p) => isPageActive(p.to))
 
+  /* Every navigation closes the mobile drawer — the prop sat accepted-but-
+   * unread until the kol-website session flagged it (2026-08-09) — and, from
+   * the collapsed rail, expands the sidebar ("pressing any icon would expand
+   * the sidebar", same ruling as the chip removal). */
+  const handleNavigate = (e) => {
+    onNavigate?.(e)
+    onCloseDrawer?.()
+    if (collapsed) toggleCollapsed()
+  }
+
   /* Which categories are disclosed. INDEPENDENT per category (elder ruling
    * 2026-08-01) — arriving somewhere must not silently close wherever you
    * were. Loads closed, in-memory only (elder ruling 2026-08-06). */
@@ -71,6 +81,7 @@ export default function SideNav({
     next.has(id) ? next.delete(id) : next.add(id)
     return next
   })
+  const discloseCat = (id) => setOpenCats((prev) => new Set(prev).add(id))
 
   /* One collapse contract, two gestures — the hook owns the stamp, the
    * storage schema and the state; the chip Button and the grab edge both
@@ -84,19 +95,24 @@ export default function SideNav({
       className={`kol-sidenav sticky top-0 self-start h-dvh flex flex-col z-20${background ? ' bg-surface-primary border-r border-fg-08' : ''}${collapsed ? ' is-collapsed' : ''}${drawerOpen ? ' is-drawer-open' : ''}`}
     >
       {/* The elder A/B (closed 2026-08-01): the DS Button IS the collapse
-        * control. Offset is half the pinned sm square, centring it on the
-        * rail's edge — the DS hardcodes that square and exposes no token. */}
-      <Button
-        variant="primary"
-        size="sm"
-        radius="full"
-        iconOnly={collapsed ? 'chevron-right' : 'chevron-left'}
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        aria-expanded={!collapsed}
-        title={collapsed ? 'Expand' : 'Collapse'}
-        onClick={toggleCollapsed}
-        className="kol-sidenav-toggle absolute top-5 right-[-0.875rem] z-[2]"
-      />
+        * control — EXPANDED ONLY (user ruling 2026-08-09, verbatim: "REMOVE
+        * chevron from collapsed view … from collapsed view pressing any icon
+        * would expand the sidebar!"). The collapsed rail's expand affordance
+        * is the rows themselves. Offset is half the pinned sm square,
+        * centring it on the rail's edge. */}
+      {!collapsed && (
+        <Button
+          variant="primary"
+          size="sm"
+          radius="full"
+          iconOnly="chevron-left"
+          aria-label="Collapse sidebar"
+          aria-expanded
+          title="Collapse"
+          onClick={toggleCollapsed}
+          className="kol-sidenav-toggle absolute top-5 right-[-0.875rem] z-[2]"
+        />
+      )}
 
       <div className="kol-sidenav-scroll flex-1 flex flex-col justify-between overflow-y-auto pt-4 pb-4 [scrollbar-width:thin]">
         <nav aria-label="Sections">
@@ -105,7 +121,10 @@ export default function SideNav({
               const pages = pagesOf(cat)
               const isOpen = openCats.has(cat.id)
               const isLink = !pages.length && cat.to
-              const rowCls = 'kol-sidenav-hop kol-helper-12 text-emphasis w-full relative flex items-center gap-3 py-2 pr-10 pl-6 no-underline'
+              /* Box utilities deliberately absent — the hop's layout lives in
+               * .kol-sidenav-hop (kol-framework.css): a utility here would
+               * outrank the collapsed-state overrides (2026-08-09 defect). */
+              const rowCls = 'kol-sidenav-hop kol-helper-12 text-emphasis no-underline'
               const glyph = (
                 <span className="kol-sidenav-hop-icon inline-flex items-center justify-center w-5 h-5 shrink-0" aria-hidden="true">
                   <Icon name={cat.icon} size={16} />
@@ -119,7 +138,7 @@ export default function SideNav({
                   to={cat.to}
                   end
                   className={({ isActive: navActive }) => `${rowCls}${(isActive ? isActive(cat.to) : navActive) ? ' is-active' : ''}`}
-                  onClick={onNavigate}
+                  onClick={handleNavigate}
                 >
                   {glyph}
                   <span className="kol-sidenav-hop-label flex-1 min-w-0">{cat.label}</span>
@@ -129,15 +148,28 @@ export default function SideNav({
                   type="button"
                   className={`${rowCls} bg-transparent border-0 cursor-pointer text-left${isActiveCat(cat) ? ' is-active' : ''}`}
                   aria-expanded={isOpen}
-                  onClick={() => toggleCat(cat.id)}
+                  /* Collapsed rail: the click meant "open this" — expand the
+                   * rail AND disclose the category, or the tap is wasted on
+                   * an expand that lands on a closed tree. */
+                  onClick={() => {
+                    if (collapsed) {
+                      toggleCollapsed()
+                      discloseCat(cat.id)
+                    } else {
+                      toggleCat(cat.id)
+                    }
+                  }}
                 >
                   {glyph}
                   <span className="kol-sidenav-hop-label flex-1 min-w-0">{cat.label}</span>
-                  <Icon
-                    name="chevron-down"
-                    size={12}
-                    className={`kol-sidenav-hop-caret absolute top-3 right-3 transition-transform duration-150${isOpen ? '' : ' -rotate-90'}`}
-                  />
+                  {/* plain wrapper span — Icon stamps inline-flex on its own
+                    * element, which would outrank the rail's display:none */}
+                  <span
+                    className={`kol-sidenav-hop-caret transition-transform duration-150${isOpen ? '' : ' -rotate-90'}`}
+                    aria-hidden="true"
+                  >
+                    <Icon name="chevron-down" size={12} />
+                  </span>
                 </button>
               )
               return (
@@ -151,7 +183,7 @@ export default function SideNav({
                   ) : head}
 
                   {!isLink && isOpen && (
-                    <ul className="kol-sidenav-list mb-2 flex flex-col gap-[2px]">
+                    <ul className="kol-sidenav-list">
                       {pages.map((page) => (
                         <li key={page.to}>
                           <NavLink
@@ -159,7 +191,7 @@ export default function SideNav({
                             end
                             style={pageStyle}
                             className={({ isActive: navActive }) => ((isActive ? isActive(page.to) : navActive) ? pageActiveCls : pageCls)}
-                            onClick={onNavigate}
+                            onClick={handleNavigate}
                           >
                             {page.label}
                           </NavLink>
@@ -180,7 +212,7 @@ export default function SideNav({
         </div>
       </div>
 
-      <div className="kol-sidenav-footer flex items-center pl-6 pr-4 h-14 border-t border-fg-08 min-w-0">
+      <div className="kol-sidenav-footer flex items-center h-14 border-t border-fg-08 min-w-0">
         <a
           href="https://kolkrabbi.io"
           target="_blank"