@stacksjs/components 0.2.112 → 0.2.114

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

@@ -31,7 +31,6 @@ export const sidebarUid = $props.id || `stx-sidebar-${Math.random().toString(36)
 const themeStyle = resolveSidebarTheme(theme)
 export const selectionModel = themeStyle.selection
 export const hasShimmerRim = themeStyle.layers.shimmerRim === true
-export const isFrosted = themeStyle.layers.frosted === true
 export const tintClasses = themeStyle.layers.tint || ''
 export const scrollAreaClasses = themeStyle.scrollArea
 
@@ -68,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 }}
@@ -101,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
@@ -324,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
@@ -343,7 +369,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   data-stx-sidebar
   data-sidebar-theme="{{ theme }}"
   data-sidebar-selection="{{ selectionModel }}"
-  @if(isFrosted)data-sidebar-frosted@endif
   data-window-key="true"
   data-active-class="{{ activeClasses }}"
   class="{{ paneClasses }}"
@@ -454,20 +479,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   .stx-sidebar-rim::after { animation: none; }
 }
 
-/* Frosted sidebar material. Hand-written CSS on purpose: as the utilities
-   `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the arbitrary values
-   did not survive class extraction in the stx dev server, leaving the pane
-   with `backdrop-filter: none`; an earlier `backdrop-saturate-[1.7]` lost
-   its brackets on the way to the generator, was read as a percentage, and
-   compiled to `saturate(0.017)`, which drained the colour out of the whole
-   backdrop. In a Craft window with webSidebarMaterial the native
-   NSVisualEffectView supplies the real vibrancy; this approximates it
-   everywhere else. */
-[data-sidebar-frosted] {
-  -webkit-backdrop-filter: saturate(180%) blur(50px);
-  backdrop-filter: saturate(180%) blur(50px);
-}
-
 /* ---------------------------------------------------------------------------
  * Selection, `accent` model (macOS and its derivatives).
  *

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-FWtLPS/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-FWtLPS/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-FWtLPS/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-FWtLPS/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-bg47fqmq.stx";
+var Sidebar_default = "./Sidebar-hjazqxv8.stx";
 // src/ui/sidebar/SidebarFooter.stx
 var SidebarFooter_default = "./SidebarFooter-0aegr99p.stx";
 // src/ui/sidebar/SidebarHeader.stx
@@ -1159,13 +1159,13 @@ var macosColors = {
 var macos = {
   pane: [
     "bg-[#f2f2f4]/90 dark:bg-[#1c1c1e]/88",
+    "backdrop-blur-[50px] backdrop-saturate-[180%]",
     "text-black dark:text-white",
     "select-none"
   ].join(" "),
   selection: "accent",
   layers: {
-    shimmerRim: true,
-    frosted: true
+    shimmerRim: true
   },
   scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-[10px] pb-[10px]",
   sectionHeader: [

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

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

package/dist/ui/sidebar/themes.d.ts

@@ -60,7 +60,6 @@ export declare interface SidebarTheme {
   selection: SidebarSelectionModel
   layers: {
     shimmerRim?: boolean
-    frosted?: boolean
     tint?: string
   }
   scrollArea: string

package/package.json

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

package/src/ui/sidebar/Sidebar.stx

@@ -31,7 +31,6 @@ export const sidebarUid = $props.id || `stx-sidebar-${Math.random().toString(36)
 const themeStyle = resolveSidebarTheme(theme)
 export const selectionModel = themeStyle.selection
 export const hasShimmerRim = themeStyle.layers.shimmerRim === true
-export const isFrosted = themeStyle.layers.frosted === true
 export const tintClasses = themeStyle.layers.tint || ''
 export const scrollAreaClasses = themeStyle.scrollArea
 
@@ -68,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 }}
@@ -101,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
@@ -324,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
@@ -343,7 +369,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   data-stx-sidebar
   data-sidebar-theme="{{ theme }}"
   data-sidebar-selection="{{ selectionModel }}"
-  @if(isFrosted)data-sidebar-frosted@endif
   data-window-key="true"
   data-active-class="{{ activeClasses }}"
   class="{{ paneClasses }}"
@@ -454,20 +479,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   .stx-sidebar-rim::after { animation: none; }
 }
 
-/* Frosted sidebar material. Hand-written CSS on purpose: as the utilities
-   `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the arbitrary values
-   did not survive class extraction in the stx dev server, leaving the pane
-   with `backdrop-filter: none`; an earlier `backdrop-saturate-[1.7]` lost
-   its brackets on the way to the generator, was read as a percentage, and
-   compiled to `saturate(0.017)`, which drained the colour out of the whole
-   backdrop. In a Craft window with webSidebarMaterial the native
-   NSVisualEffectView supplies the real vibrancy; this approximates it
-   everywhere else. */
-[data-sidebar-frosted] {
-  -webkit-backdrop-filter: saturate(180%) blur(50px);
-  backdrop-filter: saturate(180%) blur(50px);
-}
-
 /* ---------------------------------------------------------------------------
  * Selection, `accent` model (macOS and its derivatives).
  *

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
+}

package/src/ui/sidebar/themes.ts

@@ -67,8 +67,6 @@ export interface SidebarTheme {
   layers: {
     /** Liquid Glass edge highlight — a bright rim that subtly shimmers. */
     shimmerRim?: boolean
-    /** Frosted material behind the pane (a real `backdrop-filter`). */
-    frosted?: boolean
     /** Soft tint gradient blended over the material. */
     tint?: string
   }
@@ -116,22 +114,13 @@ const macos: SidebarTheme = {
     // hint of the backdrop through. A half-transparent pane reads as a web
     // imitation, and over a dark page it inverts into a dark bar entirely.
     'bg-[#f2f2f4]/90 dark:bg-[#1c1c1e]/88',
+    'backdrop-blur-[50px] backdrop-saturate-[180%]',
     'text-black dark:text-white',
     'select-none',
   ].join(' '),
   selection: 'accent',
   layers: {
     shimmerRim: true,
-    // The blur itself is real CSS in Sidebar.stx rather than a utility.
-    // Expressed as `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the
-    // arbitrary values did not survive the stx dev server's class
-    // extraction: the pane computed `backdrop-filter: none`, and an earlier
-    // `backdrop-saturate-[1.7]` reached the generator with its brackets
-    // stripped, so it was read as a percentage and compiled to
-    // `saturate(0.017)` — draining the colour out of the whole backdrop.
-    // Crosswind parses and generates both correctly on its own, so the
-    // material is written as plain CSS to stay out of that path entirely.
-    frosted: true,
   },
   scrollArea: 'flex-1 overflow-y-auto overflow-x-hidden px-[10px] pb-[10px]',
   sectionHeader: [