From 399ef3d508ad80adffd966ed1dc169230f3c403c Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Sun, 4 Jan 2026 16:59:18 +0000
Subject: [PATCH] v3.6.2

---
 changelog.md                     |  8 ++++++++
 package.json                     |  2 +-
 ts_web/00_commitinfo_data.ts     |  2 +-
 ts_web/elements/wcc-dashboard.ts | 33 +++++++++++++++++++-------------
 ts_web/elements/wcc-sidebar.ts   |  7 +++++++
 5 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/changelog.md b/changelog.md
index dc839c9..ca785f1 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-01-04 - 3.6.2 - fix(wcc-sidebar)
+use sidebar's internal .menu element for scroll management and expose scrollableContainer getter
+
+- Add public scrollableContainer getter to wcc-sidebar that returns the .menu element for external scroll control
+- Update wcc-dashboard to query wcc-sidebar as WccSidebar and attach scroll listeners to sidebar.scrollableContainer instead of the host element
+- Restore sidebar scroll position by setting scrollTop on the scrollableContainer when applying saved positions
+- TypeScript casting added to avoid nullable/implicit any issues when querying the sidebar element
+
 ## 2026-01-04 - 3.6.1 - fix(wcc-sidebar)
 sort sidebar items alphabetically and unify grouped and ungrouped items for consistent ordering
 
diff --git a/package.json b/package.json
index dc39c03..e17efc0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 6e32a07..35a8fc9 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.6.1',
+  version: '3.6.2',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }
diff --git a/ts_web/elements/wcc-dashboard.ts b/ts_web/elements/wcc-dashboard.ts
index 72ccc29..de4acd1 100644
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@@ -12,6 +12,7 @@ import './wcc-properties.js';
 import { type TTheme } from './wcc-properties.js';
 import { breakpoints } from '@design.estate/dees-domtools';
 import { WccFrame } from './wcc-frame.js';
+import { WccSidebar } from './wcc-sidebar.js';
 
 /**
  * Get filtered and sorted items from a section
@@ -491,10 +492,10 @@ export class WccDashboard extends DeesElement {
     if (this.scrollListenersAttached) {
       return;
     }
-    
+
     const wccFrame = await this.wccFrame;
-    const wccSidebar = this.shadowRoot.querySelector('wcc-sidebar');
-    
+    const wccSidebar = this.shadowRoot.querySelector('wcc-sidebar') as WccSidebar | null;
+
     if (wccFrame) {
       // The frame element itself is the scrollable container
       wccFrame.addEventListener('scroll', () => {
@@ -505,11 +506,14 @@ export class WccDashboard extends DeesElement {
     }
     
     if (wccSidebar) {
-      // The sidebar element itself is the scrollable container
-      wccSidebar.addEventListener('scroll', () => {
-        this.sidebarScrollY = wccSidebar.scrollTop;
-        this.debouncedScrollUpdate();
-      });
+      // Use the sidebar's scrollable container (.menu element)
+      const scrollContainer = wccSidebar.scrollableContainer;
+      if (scrollContainer) {
+        scrollContainer.addEventListener('scroll', () => {
+          this.sidebarScrollY = scrollContainer.scrollTop;
+          this.debouncedScrollUpdate();
+        });
+      }
     }
   }
   
@@ -555,18 +559,21 @@ export class WccDashboard extends DeesElement {
     if (this.scrollPositionsApplied) {
       return;
     }
-    
+
     const wccFrame = await this.wccFrame;
-    const wccSidebar = this.shadowRoot.querySelector('wcc-sidebar');
-    
+    const wccSidebar = this.shadowRoot.querySelector('wcc-sidebar') as WccSidebar | null;
+
     if (wccFrame && this.frameScrollY > 0) {
       // The frame element itself is the scrollable container
       wccFrame.scrollTop = this.frameScrollY;
     }
     
     if (wccSidebar && this.sidebarScrollY > 0) {
-      // The sidebar element itself is the scrollable container
-      wccSidebar.scrollTop = this.sidebarScrollY;
+      // Use the sidebar's scrollable container (.menu element)
+      const scrollContainer = wccSidebar.scrollableContainer;
+      if (scrollContainer) {
+        scrollContainer.scrollTop = this.sidebarScrollY;
+      }
     }
     
     this.scrollPositionsApplied = true;
diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts
index 616c402..cbf15c3 100644
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@@ -50,6 +50,13 @@ export class WccSidebar extends DeesElement {
 
   private sectionsInitialized = false;
 
+  /**
+   * Returns the scrollable container element (.menu) for external scroll management
+   */
+  public get scrollableContainer(): HTMLElement | null {
+    return this.shadowRoot?.querySelector('.menu') as HTMLElement | null;
+  }
+
   public render(): TemplateResult {
     return html`
       <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />