From 979e1f799109e0d139b8edf91fb001a64c2b603a Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Thu, 1 Jan 2026 19:59:53 +0000
Subject: [PATCH] fix(dees-actionbar): animate actionbar hide using
 grid-template-rows and wait for animation before clearing state

---
 changelog.md                                  |  8 +++++
 ts_web/00_commitinfo_data.ts                  |  2 +-
 .../elements/dees-actionbar/dees-actionbar.ts | 33 ++++++++++++++-----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/changelog.md b/changelog.md
index daeeeae..c86f56d 100644
--- a/changelog.md
+++ b/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
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index db77fcb..2901c82 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/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.'
 }
diff --git a/ts_web/elements/dees-actionbar/dees-actionbar.ts b/ts_web/elements/dees-actionbar/dees-actionbar.ts
index fa55ccb..5d093c5 100644
--- a/ts_web/elements/dees-actionbar/dees-actionbar.ts
+++ b/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;
     }