v3.6.0

changelog.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 2026-01-04 - 3.6.0 - feat(sidebar)
+restructure sidebar layout, add search clear button, and improve scrolling behavior
+
+- Change sidebar root to a flex column layout and add a .sidebar-header to separate header content from the scrollable menu
+- Move pinned section into the header and make .menu flex: 1 with min-height: 0 so the menu becomes the scrollable area
+- Replace overflow-y on the root with overflow:hidden to avoid double scrolling and constrain scrolling to .menu
+- Add a clear button for the search input (.search-clear) with positioning, hover styles, and a clearSearch() method to reset the query and emit searchChanged
+- Adjust search input padding and make .search-container position: relative to correctly position the clear button
+
+## 2026-01-04 - 3.5.3 - fix(deps)
+bump dependency versions: @design.estate/dees-domtools to ^2.3.7, @design.estate/dees-element to ^2.1.5, lit to ^3.3.2; update devDependencies @api.global/typedserver to ^8.1.0 and @git.zone/tstest to ^3.1.4
+
+- Updated runtime dependencies: @design.estate/dees-domtools ^2.3.7, @design.estate/dees-element ^2.1.5, lit ^3.3.2.
+- Updated devDependencies: @api.global/typedserver ^8.1.0 (major bump), @git.zone/tstest ^3.1.4.
+- @api.global/typedserver major bump affects development tooling only (devDependency), not runtime API.
+- Current package version is 3.5.2; recommend a patch release to 3.5.3.
+
+## 2026-01-04 - 3.5.2 - fix(elements)
+delay hiding sidebar and properties panels during native-mode transition and use transparent rgba border for frame to avoid layout jumps
+
+- Add isHidden state to wcc-sidebar and wcc-properties and switch display bindings to use isHidden instead of directly using isNative
+- Introduce a 300ms delayed hide when entering native mode so UI hides after frame animation completes; show immediately when exiting native mode
+- Replace hardcoded hex border values in wcc-frame with rgba and set native border to a transparent 0px to prevent abrupt visual jumps
+
 ## 2026-01-04 - 3.5.1 - fix(sidebar)
 disable frame CSS transition while user is resizing the sidebar to prevent janky animations
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.5.1",
+  "version": "3.6.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": {
@@ -17,17 +17,17 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-domtools": "^2.3.7",
+    "@design.estate/dees-element": "^2.1.5",
     "@push.rocks/smartdelay": "^3.0.5",
-    "lit": "^3.3.1"
+    "lit": "^3.3.2"
   },
   "devDependencies": {
-    "@api.global/typedserver": "^7.11.1",
+    "@api.global/typedserver": "^8.1.0",
     "@git.zone/tsbuild": "^4.0.2",
     "@git.zone/tsbundle": "^2.6.3",
     "@git.zone/tsrun": "^2.0.1",
-    "@git.zone/tstest": "^3.1.3",
+    "@git.zone/tstest": "^3.1.4",
     "@git.zone/tswatch": "^2.3.13",
     "@push.rocks/projectinfo": "^5.0.2",
     "@types/node": "^25.0.3"

ts_web/00_commitinfo_data.ts

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

@@ -28,7 +28,7 @@ export class WccFrame extends DeesElement {
   public static styles = [
     css`
       :host {
-        border: 10px solid #ffaeaf;
+        border: 10px solid rgba(255, 174, 175, 1);
         position: absolute;
         background: ${cssManager.bdTheme('#333', '#000')};
         right: 0px;
@@ -52,14 +52,14 @@ export class WccFrame extends DeesElement {
       <style>
         :host {
           ${this.isNative ? `
-            border: none !important;
+            border: 0px solid rgba(255, 174, 175, 0) !important;
             left: 0px !important;
             right: 0px !important;
             top: 0px !important;
             bottom: 0px !important;
           ` : `
             bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
-            border: 10px solid #ffaeaf;
+            border: 10px solid rgba(255, 174, 175, 1);
             left: ${this.sidebarWidth}px;
           `}
           transition: ${this.isResizing ? 'none' : 'all 0.3s ease'};

ts_web/elements/wcc-properties.ts

@@ -63,6 +63,10 @@ export class WccProperties extends DeesElement {
   @state()
   accessor recordingDuration: number = 0;
 
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
   public editorHeight: number = 300;
 
   public render(): TemplateResult {
@@ -99,7 +103,7 @@ export class WccProperties extends DeesElement {
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
-          display: ${this.isNative ? 'none' : 'block'};
+          display: ${this.isHidden ? 'none' : 'block'};
         }
         .grid {
           display: grid;
@@ -931,6 +935,19 @@ export class WccProperties extends DeesElement {
   protected updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
 
+    // Handle delayed hide for native mode transition
+    if (changedProperties.has('isNative')) {
+      if (this.isNative) {
+        // Delay hiding until frame animation completes
+        setTimeout(() => {
+          this.isHidden = true;
+        }, 300);
+      } else {
+        // Show immediately when exiting native mode
+        this.isHidden = false;
+      }
+    }
+
     // Only recreate properties when selectedItem changes
     if (changedProperties.has('selectedItem')) {
       this.createProperties().catch(error => {

ts_web/elements/wcc-sidebar.ts

@@ -44,6 +44,10 @@ export class WccSidebar extends DeesElement {
   @state()
   accessor isResizing: boolean = false;
 
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
   private sectionsInitialized = false;
 
   public render(): TemplateResult {
@@ -67,7 +71,8 @@ export class WccSidebar extends DeesElement {
           --ring: #3b82f6;
           --radius: 4px;
 
-          display: ${this.isNative ? 'none' : 'block'};
+          display: ${this.isHidden ? 'none' : 'flex'};
+          flex-direction: column;
           border-right: 1px solid rgba(255, 255, 255, 0.08);
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           font-size: 14px;
@@ -77,13 +82,20 @@ export class WccSidebar extends DeesElement {
           width: ${this.sidebarWidth}px;
           top: 0px;
           bottom: 0px;
-          overflow-y: auto;
-          overflow-x: hidden;
+          overflow: hidden;
           background: var(--background);
           color: var(--foreground);
         }
 
+        .sidebar-header {
+          flex-shrink: 0;
+        }
+
         .menu {
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+          overflow-x: hidden;
           padding: 0.5rem 0;
         }
 
@@ -277,6 +289,7 @@ export class WccSidebar extends DeesElement {
         .search-container {
           padding: 0.5rem;
           border-bottom: 1px solid var(--border);
+          position: relative;
         }
 
         .search-input {
@@ -285,7 +298,7 @@ export class WccSidebar extends DeesElement {
           background: var(--input);
           border: 1px solid var(--border);
           border-radius: var(--radius);
-          padding: 0.5rem 0.75rem;
+          padding: 0.5rem 1.75rem 0.5rem 0.75rem;
           color: var(--foreground);
           font-size: 0.75rem;
           font-family: inherit;
@@ -301,6 +314,33 @@ export class WccSidebar extends DeesElement {
           color: var(--muted-foreground);
         }
 
+        .search-clear {
+          position: absolute;
+          right: 0.75rem;
+          top: 50%;
+          transform: translateY(-50%);
+          background: none;
+          border: none;
+          padding: 0.25rem;
+          cursor: pointer;
+          color: var(--muted-foreground);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 2px;
+          transition: color 0.15s ease, background 0.15s ease;
+        }
+
+        .search-clear:hover {
+          color: var(--foreground);
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .search-clear .material-symbols-outlined {
+          font-size: 14px;
+          opacity: 1;
+        }
+
         .highlight {
           background: rgba(59, 130, 246, 0.3);
           border-radius: 2px;
@@ -390,6 +430,7 @@ export class WccSidebar extends DeesElement {
           background: var(--primary);
         }
       </style>
+      <div class="sidebar-header">
         <div class="search-container">
           <input
             type="text"
@@ -398,9 +439,15 @@ export class WccSidebar extends DeesElement {
             .value=${this.searchQuery}
             @input=${this.handleSearchInput}
           />
+          ${this.searchQuery ? html`
+            <button class="search-clear" @click=${this.clearSearch}>
+              <i class="material-symbols-outlined">close</i>
+            </button>
+          ` : null}
+        </div>
+        ${this.renderPinnedSection()}
       </div>
       <div class="menu">
-        ${this.renderPinnedSection()}
         ${this.renderSections()}
       </div>
       <div
@@ -712,6 +759,11 @@ export class WccSidebar extends DeesElement {
     this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
   }
 
+  private clearSearch() {
+    this.searchQuery = '';
+    this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
+  }
+
   private matchesSearch(name: string): boolean {
     if (!this.searchQuery) return true;
     return name.toLowerCase().includes(this.searchQuery.toLowerCase());
@@ -732,6 +784,19 @@ export class WccSidebar extends DeesElement {
   protected updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
 
+    // Handle delayed hide for native mode transition
+    if (changedProperties.has('isNative')) {
+      if (this.isNative) {
+        // Delay hiding until frame animation completes
+        setTimeout(() => {
+          this.isHidden = true;
+        }, 300);
+      } else {
+        // Show immediately when exiting native mode
+        this.isHidden = false;
+      }
+    }
+
     // Auto-expand folder when a multi-demo element is selected
     if (changedProperties.has('selectedItem') && this.selectedItem && this.dashboardRef?.sections) {
       // Find the element in any section