fix(dees-stepper): improve stepper exit animation timing for cancel confirmation flow

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-12 - 3.72.1 - fix(dees-stepper)
+improve stepper exit animation timing for cancel confirmation flow
+
+- Animate step tiles downward with fade-out during teardown instead of only fading the container
+- Delay stepper destruction briefly after dismissing the confirmation modal so both exit transitions render smoothly
+- Increase teardown delay to match the updated exit animation duration
+
 ## 2026-04-11 - 3.72.0 - feat(dees-stepper)
 add configurable cancellation flow with confirmation modal
 

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts

@@ -154,9 +154,14 @@ export class DeesStepper extends DeesElement {
         height: 100vh;
       }
 
-      .stepperContainer.predestroy {
+      /* Exit animation — reverse of the entry. Tiles slide DOWN + fade out,
-        opacity: 0;
+         mirroring the .entrance slide-up. The transition override is needed
-        transition: opacity 0.2s ease-in;
+         because dees-tile.step has its own 0.7s transition for step selection
+         which would otherwise make the exit sluggish. */
+      .stepperContainer.predestroy dees-tile.step {
+        transform: translateY(16px);
+        filter: opacity(0);
+        transition: transform 0.25s, filter 0.2s;
       }
 
       dees-tile.step {
@@ -639,7 +644,9 @@ export class DeesStepper extends DeesElement {
           name: 'Yes, cancel',
           action: async (modal) => {
             this.cancelConfirmModal = undefined;
-            await modal!.destroy();
+            modal!.destroy(); // fire-and-forget — starts the confirm modal fade
+            const domtools = await this.domtoolsPromise;
+            await domtools.convenience.smartdelay.delayFor(100);
             await this.destroy();
           },
         },
@@ -651,7 +658,7 @@ export class DeesStepper extends DeesElement {
     const domtools = await this.domtoolsPromise;
     const container = this.shadowRoot!.querySelector('.stepperContainer');
     container?.classList.add('predestroy');
-    await domtools.convenience.smartdelay.delayFor(200);
+    await domtools.convenience.smartdelay.delayFor(250);
     if (this.parentElement) {
       this.parentElement.removeChild(this);
     }