v3.2.0

changelog.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2025-12-22 - 3.2.0 - feat(wcc-sidebar)
+auto-expand sidebar folder when selecting an element with multiple demos
+
+- Add updated() lifecycle to auto-expand folder when selectedItem changes
+- Find element name by matching selectedItem against dashboardRef.elements
+- Only auto-expand when the element has multiple demos (checks item.demo and hasMultipleDemos)
+- Immutably update expandedElements set to trigger re-render and avoid duplicate additions
+
+## 2025-12-21 - 3.1.2 - fix(wcc-properties)
+Use LitElement.updated to recreate properties only when selectedItem changes and handle errors; remove custom scheduleUpdate implementation
+
+- Replaced public async scheduleUpdate() with protected updated(changedProperties) lifecycle method
+- Call super.updated(...) and only recreate properties when selectedItem changed to avoid unnecessary work
+- Preserve error handling and clear propertyContent on failure
+- Removed explicit super.scheduleUpdate() call to rely on LitElement's update lifecycle
+
 ## 2025-12-21 - 3.1.1 - fix(wcc-properties)
 Improve wcc-properties CSS to prevent grid overflow, properly size and center icon glyphs, and adjust right-side offset
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "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.1.1',
+  version: '3.2.0',
   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-properties.ts

@@ -925,16 +925,16 @@ export class WccProperties extends DeesElement {
     this.dashboardRef.buildUrl();
   }
 
-  public async scheduleUpdate() {
+  protected updated(changedProperties: Map<string, unknown>) {
-    try {
+    super.updated(changedProperties);
-      await this.createProperties();
+
-    } catch (error) {
+    // Only recreate properties when selectedItem changes
+    if (changedProperties.has('selectedItem')) {
+      this.createProperties().catch(error => {
         console.error('Error creating properties:', error);
-      // Clear property content on error to show clean state
         this.propertyContent = [];
+      });
     }
-    // Always call super.scheduleUpdate to ensure component updates
-    super.scheduleUpdate();
   }
 
   public selectViewport(viewport: TEnvironment) {

ts_web/elements/wcc-sidebar.ts

@@ -308,6 +308,27 @@ export class WccSidebar extends DeesElement {
     this.expandedElements = newSet;
   }
 
+  protected updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    // Auto-expand folder when a multi-demo element is selected
+    if (changedProperties.has('selectedItem') && this.selectedItem) {
+      const elementName = Object.keys(this.dashboardRef.elements).find(
+        name => this.dashboardRef.elements[name] === this.selectedItem
+      );
+      if (elementName) {
+        const item = this.dashboardRef.elements[elementName] as any;
+        if (item.demo && hasMultipleDemos(item.demo)) {
+          if (!this.expandedElements.has(elementName)) {
+            const newSet = new Set(this.expandedElements);
+            newSet.add(elementName);
+            this.expandedElements = newSet;
+          }
+        }
+      }
+    }
+  }
+
   public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: TTemplateFactory | DeesElement, demoIndex: number = 0) {
     console.log('selected item');
     console.log(itemNameArg);