@kolkrabbi/kol-framework 0.15.1 → 0.15.2

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.15.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",

package/src/SideNav.jsx

@@ -62,6 +62,13 @@ 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). */
+  const handleNavigate = (e) => {
+    onNavigate?.(e)
+    onCloseDrawer?.()
+  }
+
   /* 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). */
@@ -105,7 +112,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 +129,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>
@@ -133,11 +143,14 @@ export default function SideNav({
                 >
                   {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 +164,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 +172,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 +193,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"