@kolkrabbi/kol-framework 0.22.0 → 0.23.0

package/kol-framework.css

@@ -152,6 +152,25 @@ body {
 }
 .kol-sidenav-footer { padding-inline: 1.5rem 1rem; }
 
+/* The aside's OWN box (SideNavMobilePosition, kol-website 2026-08-25) — the
+ * hop's law above, one element up. `sticky top-0 self-start h-dvh flex
+ * flex-col z-20` rode the className, and a utility outranks every rule in
+ * this layer — so the 767px drawer block below (`position: fixed`) never won:
+ * the aside stayed IN FLOW, the one-column grid handed it an 852px row, and
+ * every consumer page opened one viewport down on phones (probe: aside
+ * `sticky`, content top=852 at 393; the consumer's stopgap was one media rule
+ * re-stating `fixed`). Declared here, the drawer rule beats it by source
+ * order — which is how it was written to work. */
+.kol-sidenav {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  z-index: var(--kol-z-sticky);
+}
+
 /* :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
@@ -894,7 +913,15 @@ body {
   }
 }
 
-/* Tab strip — horizontally scrollable, scrollbar hidden. */
+/* Tab strip — horizontally scrollable, scrollbar hidden.
+ * Snaps to a tab's start on a flick (WorkshopShellMobile, kol-website
+ * 2026-08-25): the strip measured 613px of tabs in a 345px viewport and did
+ * scroll, but a swipe could settle on half a label. `proximity`, not
+ * `mandatory` — the last tabs can never reach a start position, and mandatory
+ * would refuse to show them. ShellHeader.jsx scrolls the active tab into view
+ * on load, to the same start edge, so the two never fight. NO edge fade: the
+ * 2026-07-28 ruling bans scroll-edge paint (the table wrapper's cover
+ * gradients died for it 2026-08-09). */
 .kol-shell-header-tabs {
   display: flex;
   flex-wrap: nowrap;
@@ -903,6 +930,7 @@ body {
   padding-top: 8px;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  scroll-snap-type: x proximity;
 }
 
 .kol-shell-header-tabs::-webkit-scrollbar {
@@ -931,6 +959,7 @@ body {
   border-bottom: 2px solid transparent;
   transition: color 0.2s ease, border-color 0.2s ease;
   text-decoration: none;
+  scroll-snap-align: start;
 }
 
 .kol-shell-header-tab:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.22.0",
+  "version": "0.23.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",
@@ -28,8 +28,8 @@
     "app-shell"
   ],
   "dependencies": {
-    "@kolkrabbi/kol-component": "^0.46.0",
-    "@kolkrabbi/kol-icons": "^0.17.0"
+    "@kolkrabbi/kol-icons": "^0.18.0",
+    "@kolkrabbi/kol-component": "^0.68.1"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/ShellHeader.jsx

@@ -1,3 +1,4 @@
+import { useLayoutEffect, useRef } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { IconFrame, SearchInput, Tooltip, glyphSize } from '@kolkrabbi/kol-component'
 import ThemeToggle from './ThemeToggle.jsx'
@@ -89,6 +90,26 @@ export default function ShellHeader({
 }) {
   const hasTabRow = nav.length > 0 || Boolean(search) || Boolean(onNavToggle) || Boolean(onTocToggle)
 
+  /* The current tab must be ON SCREEN (WorkshopShellMobile, kol-website
+   * 2026-08-25). The strip scrolls (.kol-shell-header-tabs) — but on a phone
+   * the active tab measured x=347–445 in a 345px strip: "Dashboard" was the
+   * page you were on and the one tab you could not see. Scrolled to the
+   * strip's start edge (the snap position), and ONLY when it is out of view,
+   * so a wide viewport never moves. Keyed on the active href, not `nav` —
+   * consumers rebuild that array every render. Layout effect: before paint,
+   * so a route change never flashes the wrong tab. */
+  const tabsRef = useRef(null)
+  const activeHref = nav.find((item) => (isActive ? isActive(item.href) : false))?.href
+  useLayoutEffect(() => {
+    const strip = tabsRef.current
+    const tab = strip?.querySelector('[aria-current="page"]')
+    if (!strip || !tab) return
+    const s = strip.getBoundingClientRect()
+    const t = tab.getBoundingClientRect()
+    if (t.left >= s.left && t.right <= s.right) return
+    strip.scrollLeft += t.left - s.left
+  }, [activeHref])
+
   return (
     <header className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
       {/* Row 1: brand block + controls */}
@@ -139,7 +160,7 @@ export default function ShellHeader({
       {hasTabRow && (
         <div className="border-b border-fg-08">
           <div className="w-full" style={{ paddingInline: 'var(--kol-pad-chrome-x)' }}>
-            <div className="kol-shell-header-tabs">
+            <div className="kol-shell-header-tabs" ref={tabsRef}>
               <nav className="flex flex-1 gap-6" aria-label="Sections">
                 {nav.map((item) => {
                   const active = isActive ? isActive(item.href) : false

package/src/SideNav.jsx

@@ -93,7 +93,12 @@ export default function SideNav({
   return (
     <aside
       ref={asideRef}
-      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' : ''}`}
+      /* Box utilities deliberately absent (SideNavMobilePosition, 2026-08-25):
+       * the aside's position/height/stack live in .kol-sidenav
+       * (kol-framework.css). `sticky … h-dvh z-20` here outranked the 767px
+       * drawer rule's `position: fixed`, so every consumer page opened one
+       * viewport down on phones. Only colour utilities ride the element. */
+      className={`kol-sidenav${background ? ' bg-surface-primary border-r border-fg-08' : ''}${collapsed ? ' is-collapsed' : ''}${drawerOpen ? ' is-drawer-open' : ''}`}
     >
       {/* NO chip Button in either state (user build order 2026-08-09 — "MAKE
         * IT"; supersedes the elder A/B): the pill-marked grab edge below is