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

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;
-        overflow: hidden;
-        max-height: 0;
-        transition: max-height 0.2s ease-out;
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 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;
-      this.currentResolve = null;
-      this.isVisible = false;
-      this.classList.remove('visible');
+      // Hide with animation - don't await, let it run async
+      this.hideCurrentBar();
       return;
     }