diff --git a/changelog.md b/changelog.md index dee4805..edf109b 100644 --- a/changelog.md +++ b/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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 1cc816b..713dc56 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.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.' } diff --git a/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts b/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts index 87b4b1b..8696719 100644 --- a/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts +++ b/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts @@ -154,9 +154,14 @@ export class DeesStepper extends DeesElement { height: 100vh; } - .stepperContainer.predestroy { - opacity: 0; - transition: opacity 0.2s ease-in; + /* Exit animation — reverse of the entry. Tiles slide DOWN + fade out, + mirroring the .entrance slide-up. The transition override is needed + 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); }