v2.0.2

changelog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2025-11-30 - 2.0.2 - fix(dees-stepper)
+Make step validation abortable and cancel active step listeners when navigating
+
+- Extend IStep.validationFunc signature to accept an optional AbortSignal so validation handlers can be cancelled.
+- Store an AbortController on the selected step and pass its signal into validationFunc when invoked.
+- Abort the step's AbortController when navigating to the previous or next step to cancel any active listeners or async operations.
+
+## 2025-11-30 - 2.0.1 - fix(dees-stepper)
+Improve dees-stepper visual style and transitions
+
+- Smooth animation: extend .step transition duration and use a cubic-bezier curve for smoother motion.
+- Add .step.entrance class with a shorter easing for entrance animations to keep entrance timing distinct.
+- Visual tweaks: reduce border-radius from 18px to 12px and increase inner content padding to 32px.
+- Color and border updates: adjust background and border colors for light/dark themes to more consistent values.
+- Shadow simplification: replace theme-dependent heavy shadows with a single subtle shadow (0 8px 32px rgba(0,0,0,0.4)).
+- Remove selected-state border/box-shadow overrides (selection visuals simplified).
+- Remove background-clip: padding-box to simplify rendering.
+
 ## 2025-11-17 - 2.0.0 - BREAKING CHANGE(decorators)
 Migrate to TC39 standard decorators (accessor) across components, update tsconfig and bump dependencies
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

pnpm-workspace.yaml

@@ -1,4 +0,0 @@
-onlyBuiltDependencies:
-  - esbuild
-  - mongodb-memory-server
-  - puppeteer

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-stepper/dees-stepper.ts

@@ -19,9 +19,10 @@ import { stepperDemo } from './dees-stepper.demo.js';
 export interface IStep {
   title: string;
   content: TemplateResult;
-  validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
+  validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
   onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
   validationFuncCalled?: boolean;
+  abortController?: AbortController;
 }
 
 declare global {
@@ -60,7 +61,6 @@ export class DeesStepper extends DeesElement {
         position: absolute;
         width: 100%;
         height: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
         overflow: hidden;
       }
 
@@ -68,32 +68,35 @@ export class DeesStepper extends DeesElement {
         position: relative;
         pointer-events: none;
         overflow: hidden;
-        transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, border 0.35s ease;
+        transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), box-shadow 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1), border 0.7s cubic-bezier(0.87, 0, 0.13, 1);
         max-width: 500px;
         min-height: 300px;
-        border-radius: 18px;
+        border-radius: 12px;
-        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+        background: ${cssManager.bdTheme('#ffffff', '#0f0f11')};
-        border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.9)', 'rgba(63, 63, 70, 0.85)')};
+        border: 1px solid ${cssManager.bdTheme('#e2e8f0', '#272729')};
         color: ${cssManager.bdTheme('#0f172a', '#f5f5f5')};
         margin: auto;
         margin-bottom: 20px;
         filter: opacity(0.55) saturate(0.85);
-        box-shadow: ${cssManager.bdTheme('0 20px 40px -25px rgba(15, 23, 42, 0.45)', '0 20px 36px -22px rgba(15, 23, 42, 0.65)')};
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
         user-select: none;
-        background-clip: padding-box;
       }
 
       .step.selected {
         pointer-events: all;
         filter: opacity(1) saturate(1);
-        transform: translateY(-6px);
-        border: 1px solid ${cssManager.bdTheme(colors.dark.blue, colors.dark.blue)};
-        box-shadow: ${cssManager.bdTheme('0 28px 60px -30px rgba(15, 23, 42, 0.42)', '0 26px 55px -28px rgba(37, 99, 235, 0.6)')};
         user-select: auto;
       }
 
       .step.hiddenStep {
         filter: opacity(0);
+      }
+
+      .step.entrance {
+        transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, border 0.35s ease;
+      }
+
+      .step.entrance.hiddenStep {
         transform: translateY(16px);
       }
 
@@ -164,7 +167,7 @@ export class DeesStepper extends DeesElement {
       }
 
       .step .content {
-        padding: 24px 28px 32px;
+        padding: 32px;
       }
     `,
   ];
@@ -179,7 +182,7 @@ export class DeesStepper extends DeesElement {
                 ? 'selected'
                 : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
                 ? 'hiddenStep'
-                : ''}"
+                : ''} ${this.getIndexOfStep(stepArg) === 0 ? 'entrance' : ''}"
             >
               ${this.getIndexOfStep(stepArg) > 0
                 ? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
@@ -205,6 +208,9 @@ export class DeesStepper extends DeesElement {
     await this.domtools.convenience.smartdelay.delayFor(0);
     this.selectedStep = this.steps[0];
     this.setScrollStatus();
+    // Remove entrance class after initial animation completes
+    await this.domtools.convenience.smartdelay.delayFor(350);
+    this.shadowRoot.querySelector('.step.entrance')?.classList.remove('entrance');
   }
 
   public async updated() {
@@ -245,8 +251,9 @@ export class DeesStepper extends DeesElement {
       );
     }
     if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
+      this.selectedStep.abortController = new AbortController();
       this.selectedStep.validationFuncCalled = true;
-      await this.selectedStep.validationFunc(this, selectedStepElement);
+      await this.selectedStep.validationFunc(this, selectedStepElement, this.selectedStep.abortController.signal);
     }
     this.scroller.to(scrollPosition);
   }
@@ -256,6 +263,10 @@ export class DeesStepper extends DeesElement {
     if (currentIndex <= 0) {
       return;
     }
+    // Abort any active listeners on current step
+    if (this.selectedStep.abortController) {
+      this.selectedStep.abortController.abort();
+    }
     const currentStep = this.steps[currentIndex];
     currentStep.validationFuncCalled = false;
     const previousStep = this.steps[currentIndex - 1];
@@ -271,6 +282,10 @@ export class DeesStepper extends DeesElement {
     if (currentIndex < 0 || currentIndex >= this.steps.length - 1) {
       return;
     }
+    // Abort any active listeners on current step
+    if (this.selectedStep.abortController) {
+      this.selectedStep.abortController.abort();
+    }
     const currentStep = this.steps[currentIndex];
     currentStep.validationFuncCalled = false;
     const nextStep = this.steps[currentIndex + 1];