v3.6.2

changelog.md

@@ -1,5 +1,21 @@
 # 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
+
+- Unifies ungrouped elements and groups into a single render list using a RenderItem type with a sortKey.
+- Sorts all top-level items alphabetically by element name (case-insensitive via toLowerCase) so sidebar order is deterministic.
+- Groups are ordered by the first element's name; individual items inside a group preserve their original order.
+- Replaces previous separate rendering paths with a single sorted render pass that returns TemplateResult array.
+
 ## 2026-01-04 - 3.6.0 - feat(sidebar)
 restructure sidebar layout, add search clear button, and improve scrolling behavior
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.6.0",
+  "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": {

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.6.0',
+  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.'
 }

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
@@ -493,7 +494,7 @@ export class WccDashboard extends DeesElement {
     }
 
     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
@@ -505,13 +506,16 @@ export class WccDashboard extends DeesElement {
     }
     
     if (wccSidebar) {
-      // The sidebar element itself is the scrollable container
-      wccSidebar.addEventListener('scroll', () => {
-        this.sidebarScrollY = wccSidebar.scrollTop;
+      // Use the sidebar's scrollable container (.menu element)
+      const scrollContainer = wccSidebar.scrollableContainer;
+      if (scrollContainer) {
+        scrollContainer.addEventListener('scroll', () => {
+          this.sidebarScrollY = scrollContainer.scrollTop;
           this.debouncedScrollUpdate();
         });
       }
     }
+  }
   
   private debouncedScrollUpdate() {
     clearTimeout(this.scrollUpdateTimeout);
@@ -557,7 +561,7 @@ export class WccDashboard extends DeesElement {
     }
 
     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
@@ -565,8 +569,11 @@ export class WccDashboard extends DeesElement {
     }
     
     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;

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" />
@@ -647,27 +654,43 @@ export class WccSidebar extends DeesElement {
         groupedItems.get(group)!.push(entry);
       }
 
-      const result: TemplateResult[] = [];
+      // Build a unified list of render items (ungrouped elements and groups)
+      // Each item has a sortKey (element name or first element name of group)
+      type RenderItem =
+        | { type: 'element'; entry: [string, any]; sortKey: string }
+        | { type: 'group'; groupName: string; items: Array<[string, any]>; sortKey: string };
 
-      // Render ungrouped items first
+      const renderItems: RenderItem[] = [];
+
+      // Add ungrouped items
       const ungrouped = groupedItems.get(null) || [];
       for (const entry of ungrouped) {
-        result.push(this.renderElementItem(entry, section));
+        renderItems.push({ type: 'element', entry, sortKey: entry[0].toLowerCase() });
       }
 
-      // Render grouped items
+      // Add groups (sorted by their first element's name)
       for (const [groupName, items] of groupedItems) {
         if (groupName === null) continue;
-
-        result.push(html`
-          <div class="item-group">
-            <span class="item-group-legend">${groupName}</span>
-            ${items.map((entry) => this.renderElementItem(entry, section))}
-          </div>
-        `);
+        const firstElementName = items[0]?.[0] || '';
+        renderItems.push({ type: 'group', groupName, items, sortKey: firstElementName.toLowerCase() });
       }
 
-      return result;
+      // Sort all items alphabetically by sortKey
+      renderItems.sort((a, b) => a.sortKey.localeCompare(b.sortKey));
+
+      // Render in sorted order
+      return renderItems.map((item) => {
+        if (item.type === 'element') {
+          return this.renderElementItem(item.entry, section);
+        } else {
+          return html`
+            <div class="item-group">
+              <span class="item-group-legend">${item.groupName}</span>
+              ${item.items.map((entry) => this.renderElementItem(entry, section))}
+            </div>
+          `;
+        }
+      });
     }
   }