fix(dees-actionbar): animate actionbar hide using grid-template-rows and wait for animation before clearing state

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-01-01 - 3.26.1 - fix(dees-actionbar)
+animate actionbar hide using grid-template-rows and wait for animation before clearing state
+
+- Switch host layout from block/max-height to grid using grid-template-rows for open/close transitions
+- Add min-height: 0 to .actionbar-item to prevent flex children overflow and collapsing
+- Introduce async hideCurrentBar() that removes 'visible', sets isVisible=false, waits 220ms then clears currentBar and currentResolve
+- processQueue() now calls hideCurrentBar() asynchronously instead of clearing state immediately
+
 ## 2026-01-01 - 3.26.0 - feat(workspace)
 add external file change detection, conflict resolution UI, and diff editor
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.26.0',
+  version: '3.26.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-actionbar/dees-actionbar.ts

@@ -128,19 +128,19 @@ export class DeesActionbar extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        display: block;
+        display: grid;
-        overflow: hidden;
+        grid-template-rows: 0fr;
-        max-height: 0;
+        transition: grid-template-rows 0.2s ease-out;
-        transition: max-height 0.2s ease-out;
       }
 
       :host(.visible) {
-        max-height: 100px; /* Enough for actionbar content */
+        grid-template-rows: 1fr;
       }
 
       .actionbar-item {
         display: flex;
         flex-direction: column;
+        min-height: 0;
         background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 12%)')};
         border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 20%)')};
         overflow: hidden;
@@ -416,12 +416,27 @@ export class DeesActionbar extends DeesElement {
 
   // ========== Private Methods ==========
 
+  /**
+   * Hide the current actionbar with animation.
+   * Removes visible class first to trigger CSS transition, then clears content after animation.
+   */
+  private async hideCurrentBar(): Promise<void> {
+    // Remove visible class to start close animation
+    this.classList.remove('visible');
+    this.isVisible = false;
+
+    // Wait for animation to complete (200ms transition + buffer)
+    await new Promise(resolve => setTimeout(resolve, 220));
+
+    // Now safe to clear content
+    this.currentBar = null;
+    this.currentResolve = null;
+  }
+
   private processQueue(): void {
     if (this.queue.length === 0) {
-      this.currentBar = null;
+      // Hide with animation - don't await, let it run async
-      this.currentResolve = null;
+      this.hideCurrentBar();
-      this.isVisible = false;
-      this.classList.remove('visible');
       return;
     }