@stacksjs/components 0.2.113 → 0.2.115

package/dist/{Sidebar-gbd5ctkp.stx → Sidebar-hjazqxv8.stx}

@@ -67,6 +67,8 @@ export const activeClasses = themeStyle.item.active
 </script>
 
 <script client>
+import { findActiveSidebarHref } from './route-selection'
+
 const emit = defineEmits()
 const sidebarUidProp = '{{ sidebarUid }}'
 const collapsedProp = {{ collapsed }}
@@ -100,12 +102,33 @@ function setActiveRow(button) {
   const classes = activeClassList()
   pane.querySelectorAll('[data-sidebar-item][data-active="true"]').forEach((el) => {
     el.removeAttribute('data-active')
+    el.removeAttribute('aria-current')
     el.classList.remove(...classes)
   })
   button.setAttribute('data-active', 'true')
+  button.setAttribute('aria-current', 'page')
   button.classList.add(...classes)
 }
 
+function syncRouteSelection(url) {
+  const links = [...pane.querySelectorAll('a[data-sidebar-item][href]')]
+  let currentPath = window.location.pathname
+  if (url) {
+    try {
+      currentPath = new URL(url, window.location.origin).pathname
+    }
+    catch {}
+  }
+  const href = findActiveSidebarHref(currentPath, links.map(link => link.getAttribute('href') || ''))
+  const active = href ? links.find(link => link.getAttribute('href') === href) : null
+  if (active)
+    setActiveRow(active)
+}
+
+function onRouteChange(event) {
+  syncRouteSelection(event?.detail?.url)
+}
+
 // ---------------------------------------------------------------------------
 // Disclosure — rows know their ancestors (data-parents="a/b"). Collapsing a
 // row (or section) marks every descendant with data-collapsed, which the
@@ -323,18 +346,22 @@ onMount(() => {
 
   pane.addEventListener('click', onClick)
   pane.addEventListener('keydown', onKeyDown)
+  window.addEventListener('stx:navigate', onRouteChange)
+  window.addEventListener('popstate', onRouteChange)
 
   const scrollArea = pane.querySelector('[data-sidebar-scroll]')
   const thumb = pane.querySelector('[data-sidebar-scroll-thumb]')
   if (scrollArea && thumb) attachOverlayScrollbar(scrollArea, thumb)
 
-  // Ensure the initial active row carries the theme's highlight classes.
+  // Route-derived selection wins over stale server-declared state on direct
+  // loads, nested routes, SPA transitions, and browser history navigation.
+  syncRouteSelection()
   const active = pane.querySelector('[data-sidebar-item][data-active="true"]')
   if (active) active.classList.add(...activeClassList())
   syncRowVisibility()
 })
 
-defineExpose({ collapsed, toggle: toggleCollapse })
+defineExpose({ collapsed, toggle: toggleCollapse, syncRouteSelection })
 </script>
 
 <aside

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-mg2saM/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-mg2saM/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-mg2saM/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-mg2saM/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {
@@ -1132,7 +1132,7 @@ var RadioGroupOption_default = "./RadioGroupOption-s1d6r221.stx";
 // src/ui/select/Select.stx
 var Select_default = "./Select-1vnd0brz.stx";
 // src/ui/sidebar/Sidebar.stx
-var Sidebar_default = "./Sidebar-gbd5ctkp.stx";
+var Sidebar_default = "./Sidebar-hjazqxv8.stx";
 // src/ui/sidebar/SidebarFooter.stx
 var SidebarFooter_default = "./SidebarFooter-0aegr99p.stx";
 // src/ui/sidebar/SidebarHeader.stx

package/dist/ui/sidebar/route-selection.d.ts

@@ -0,0 +1 @@
+export declare function findActiveSidebarHref(currentPath: string, hrefs: string[]): string | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.113",
+  "version": "0.2.115",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -63,8 +63,8 @@
   },
   "dependencies": {
     "@cwcss/crosswind": "^0.2.12",
-    "@stacksjs/stx": "0.2.113",
-    "bun-plugin-stx": "0.2.113",
+    "@stacksjs/stx": "0.2.115",
+    "bun-plugin-stx": "0.2.115",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/ui/sidebar/Sidebar.stx

@@ -67,6 +67,8 @@ export const activeClasses = themeStyle.item.active
 </script>
 
 <script client>
+import { findActiveSidebarHref } from './route-selection'
+
 const emit = defineEmits()
 const sidebarUidProp = '{{ sidebarUid }}'
 const collapsedProp = {{ collapsed }}
@@ -100,12 +102,33 @@ function setActiveRow(button) {
   const classes = activeClassList()
   pane.querySelectorAll('[data-sidebar-item][data-active="true"]').forEach((el) => {
     el.removeAttribute('data-active')
+    el.removeAttribute('aria-current')
     el.classList.remove(...classes)
   })
   button.setAttribute('data-active', 'true')
+  button.setAttribute('aria-current', 'page')
   button.classList.add(...classes)
 }
 
+function syncRouteSelection(url) {
+  const links = [...pane.querySelectorAll('a[data-sidebar-item][href]')]
+  let currentPath = window.location.pathname
+  if (url) {
+    try {
+      currentPath = new URL(url, window.location.origin).pathname
+    }
+    catch {}
+  }
+  const href = findActiveSidebarHref(currentPath, links.map(link => link.getAttribute('href') || ''))
+  const active = href ? links.find(link => link.getAttribute('href') === href) : null
+  if (active)
+    setActiveRow(active)
+}
+
+function onRouteChange(event) {
+  syncRouteSelection(event?.detail?.url)
+}
+
 // ---------------------------------------------------------------------------
 // Disclosure — rows know their ancestors (data-parents="a/b"). Collapsing a
 // row (or section) marks every descendant with data-collapsed, which the
@@ -323,18 +346,22 @@ onMount(() => {
 
   pane.addEventListener('click', onClick)
   pane.addEventListener('keydown', onKeyDown)
+  window.addEventListener('stx:navigate', onRouteChange)
+  window.addEventListener('popstate', onRouteChange)
 
   const scrollArea = pane.querySelector('[data-sidebar-scroll]')
   const thumb = pane.querySelector('[data-sidebar-scroll-thumb]')
   if (scrollArea && thumb) attachOverlayScrollbar(scrollArea, thumb)
 
-  // Ensure the initial active row carries the theme's highlight classes.
+  // Route-derived selection wins over stale server-declared state on direct
+  // loads, nested routes, SPA transitions, and browser history navigation.
+  syncRouteSelection()
   const active = pane.querySelector('[data-sidebar-item][data-active="true"]')
   if (active) active.classList.add(...activeClassList())
   syncRowVisibility()
 })
 
-defineExpose({ collapsed, toggle: toggleCollapse })
+defineExpose({ collapsed, toggle: toggleCollapse, syncRouteSelection })
 </script>
 
 <aside

package/src/ui/sidebar/route-selection.ts

@@ -0,0 +1,32 @@
+function normalizePath(path: string): string {
+  const clean = (path || '/').split(/[?#]/, 1)[0] || '/'
+  const withSlash = clean.startsWith('/') ? clean : `/${clean}`
+  return withSlash.replace(/\/+$/, '') || '/'
+}
+
+function isLocalHref(href: string): boolean {
+  return href.startsWith('/') && !href.startsWith('//')
+}
+
+export function findActiveSidebarHref(currentPath: string, hrefs: string[]): string | null {
+  const current = normalizePath(currentPath)
+  let best: string | null = null
+  let bestLength = -1
+
+  for (const href of hrefs) {
+    if (!isLocalHref(href))
+      continue
+
+    const candidate = normalizePath(href)
+    const matches = candidate === '/'
+      ? current === '/'
+      : current === candidate || current.startsWith(`${candidate}/`)
+
+    if (matches && candidate.length > bestLength) {
+      best = href
+      bestLength = candidate.length
+    }
+  }
+
+  return best
+}