@design.estate/dees-catalog 3.70.0 → 3.71.0

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

@@ -1,5 +1,4 @@
 import * as plugins from '../../00plugins.js';
-import * as colors from '../../00colors.js';
 
 import {
   DeesElement,
@@ -16,10 +15,16 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { stepperDemo } from './dees-stepper.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { zIndexRegistry } from '../../00zindex.js';
+import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
+import type { DeesForm } from '../../00group-form/dees-form/dees-form.js';
+import '../dees-tile/dees-tile.js';
 
 export interface IStep {
   title: string;
   content: TemplateResult;
+  menuOptions?: plugins.tsclass.website.IMenuItem<DeesStepper>[];
   validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
   onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
   validationFuncCalled?: boolean;
@@ -34,9 +39,32 @@ declare global {
 
 @customElement('dees-stepper')
 export class DeesStepper extends DeesElement {
+  // STATIC
   public static demo = stepperDemo;
   public static demoGroups = ['Layout', 'Form'];
 
+  public static async createAndShow(optionsArg: {
+    steps: IStep[];
+  }): Promise<DeesStepper> {
+    const body = document.body;
+    const stepper = new DeesStepper();
+    stepper.steps = optionsArg.steps;
+    stepper.overlay = true;
+    stepper.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
+    stepper.windowLayer.addEventListener('click', async () => {
+      await stepper.destroy();
+    });
+    body.append(stepper.windowLayer);
+    body.append(stepper);
+
+    // Get z-index for stepper (should be above window layer)
+    stepper.stepperZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(stepper, stepper.stepperZIndex);
+
+    return stepper;
+  }
+
+  // INSTANCE
   @property({
     type: Array,
   })
@@ -47,6 +75,25 @@ export class DeesStepper extends DeesElement {
   })
   accessor selectedStep!: IStep;
 
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  accessor overlay: boolean = false;
+
+  @property({ type: Number, attribute: false })
+  accessor stepperZIndex: number = 1000;
+
+  @property({ type: Object, attribute: false })
+  accessor activeForm: DeesForm | null = null;
+
+  @property({ type: Boolean, attribute: false })
+  accessor activeFormValid: boolean = true;
+
+  private activeFormSubscription?: { unsubscribe: () => void };
+
+  private windowLayer?: DeesWindowLayer;
+
   constructor() {
     super();
   }
@@ -60,7 +107,24 @@ export class DeesStepper extends DeesElement {
         position: absolute;
         width: 100%;
         height: 100%;
+        font-family: ${cssGeistFontFamily};
+        color: var(--dees-color-text-primary);
+      }
+
+      /*
+       * In overlay mode the host is "transparent" to layout — the inner
+       * .stepperContainer.overlay is what pins to the viewport and carries the
+       * z-index. Keeping :host unpositioned avoids nesting the stacking context
+       * under an auto-z-index parent (which was trapping .stepperContainer
+       * below DeesWindowLayer's sibling layers). This mirrors how dees-modal
+       * keeps its own :host unpositioned and lets .modalContainer drive layout.
+       */
+      :host([overlay]) {
+        position: static;
+        width: 0;
+        height: 0;
       }
+
       .stepperContainer {
         position: absolute;
         width: 100%;
@@ -68,101 +132,120 @@ export class DeesStepper extends DeesElement {
         overflow: hidden;
       }
 
-      .step {
+      .stepperContainer.overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+
+      .stepperContainer.predestroy {
+        opacity: 0;
+        transition: opacity 0.2s ease-in;
+      }
+
+      dees-tile.step {
         position: relative;
         pointer-events: none;
-        overflow: hidden;
-        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: 12px;
-        background: ${cssManager.bdTheme('#ffffff', '#0f0f11')};
-        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: 0 8px 32px rgba(0, 0, 0, 0.4);
+        transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1);
         user-select: none;
       }
 
-      .step.selected {
+      dees-tile.step.selected {
         pointer-events: all;
         filter: opacity(1) saturate(1);
         user-select: auto;
       }
 
-      .step.hiddenStep {
+      dees-tile.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;
+      dees-tile.step.entrance {
+        transition: transform 0.35s ease, filter 0.35s ease;
       }
 
-      .step.entrance.hiddenStep {
+      dees-tile.step.entrance.hiddenStep {
         transform: translateY(16px);
       }
 
-      .step:last-child {
+      dees-tile.step:last-child {
         margin-bottom: 100vh;
       }
 
-      .step .stepCounter {
-        color: ${cssManager.bdTheme('#64748b', '#a1a1aa')};
-        position: absolute;
-        top: 12px;
-        right: 12px;
-        padding: 6px 14px;
-        font-size: 12px;
-        border-radius: 999px;
-        background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.5)', 'rgba(63, 63, 70, 0.45)')};
-        border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.7)', 'rgba(63, 63, 70, 0.6)')};
+      .stepperContainer.overlay dees-tile.step::part(outer) {
+        box-shadow:
+          0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
+          0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
+          0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
       }
 
-      .step .goBack {
-        position: absolute;
-        top: 12px;
-        left: 12px;
+      .step-header {
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 8px 0 12px;
+        gap: 12px;
+      }
+
+      .goBack-spacer {
+        width: 1px;
+      }
+
+      .step-header .goBack {
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        padding: 6px 12px;
+        height: 24px;
+        padding: 0 8px;
         font-size: 12px;
         font-weight: 500;
-        border-radius: 999px;
-        border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.9)', 'rgba(63, 63, 70, 0.85)')};
-        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.9)', 'rgba(39, 39, 42, 0.85)')};
-        color: ${cssManager.bdTheme('#475569', '#d4d4d8')};
+        line-height: 1;
+        border: none;
+        background: transparent;
+        color: var(--dees-color-text-muted);
+        border-radius: 4px;
         cursor: pointer;
-        transition: border 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
+        transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
       }
 
-      .step .goBack:hover {
-        color: ${cssManager.bdTheme('#0f172a', '#fafafa')};
-        border-color: ${cssManager.bdTheme(colors.dark.blue, colors.dark.blue)};
-        background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.95)', 'rgba(63, 63, 70, 0.7)')};
+      .step-header .goBack:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
         transform: translateX(-2px);
       }
 
-      .step .goBack:active {
-        color: ${cssManager.bdTheme('#0f172a', '#fafafa')};
-        border-color: ${cssManager.bdTheme(colors.dark.blueActive, colors.dark.blueActive)};
-        background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.85)', 'rgba(63, 63, 70, 0.6)')};
+      .step-header .goBack:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
       }
 
-      .step .goBack span {
+      .step-header .goBack span {
         transition: transform 0.2s ease;
         display: inline-block;
       }
 
-      .step .goBack:hover span {
+      .step-header .goBack:hover span {
         transform: translateX(-2px);
       }
 
-      .step .title {
+      .step-header .stepCounter {
+        color: var(--dees-color-text-muted);
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        padding: 0 8px;
+      }
+
+      .step-body .title {
         text-align: center;
-        padding-top: 64px;
+        padding-top: 32px;
         font-family: 'Geist Sans', sans-serif;
         font-size: 24px;
         font-weight: 600;
@@ -170,35 +253,142 @@ export class DeesStepper extends DeesElement {
         color: inherit;
       }
 
-      .step .content {
+      .step-body .content {
         padding: 32px;
       }
+
+      /* --- Footer: modal-style bottom buttons --- */
+      .bottomButtons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .bottomButtons .bottomButton {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+      }
+
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
+      }
+
+      .bottomButtons .bottomButton:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
+      }
+
+      .bottomButtons .bottomButton.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.12)', 'hsl(213.1 93.9% 67.8% / 0.12)')};
+      }
+
+      .bottomButtons .bottomButton.disabled {
+        pointer-events: none;
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .bottomButtons .bottomButton.disabled:hover {
+        background: transparent;
+        color: var(--dees-color-text-muted);
+      }
+
+      /* Hint shown on the left of the footer when the active step's form has
+         unfilled required fields. Uses margin-right: auto to push right-aligned
+         buttons to the right while keeping the hint flush-left. */
+      .bottomButtons .stepHint {
+        margin-right: auto;
+        padding: 0 16px;
+        font-size: 11px;
+        line-height: 1;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-muted);
+        display: flex;
+        align-items: center;
+        user-select: none;
+      }
     `,
   ];
 
   public render() {
     return html`
-      <div class="stepperContainer">
-        ${this.steps.map(
-          (stepArg) =>
-            html`<div
-              class="step ${stepArg === this.selectedStep
-                ? '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>`
-                : ``}
+      <div
+        class="stepperContainer ${this.overlay ? 'overlay' : ''}"
+        style=${this.overlay ? `z-index: ${this.stepperZIndex};` : ''}
+      >
+        ${this.steps.map((stepArg, stepIndex) => {
+          const isSelected = stepArg === this.selectedStep;
+          const isHidden =
+            this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep);
+          const isFirst = stepIndex === 0;
+          return html`<dees-tile
+            class="step ${isSelected ? 'selected' : ''} ${isHidden ? 'hiddenStep' : ''} ${isFirst ? 'entrance' : ''}"
+          >
+            <div slot="header" class="step-header">
+              ${!isFirst
+                ? html`<div class="goBack" @click=${this.goBack}>
+                    <span style="font-family: Inter"><-</span> go to previous step
+                  </div>`
+                : html`<div class="goBack-spacer"></div>`}
               <div class="stepCounter">
-                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
-                ${this.steps.length}
+                Step ${stepIndex + 1} of ${this.steps.length}
               </div>
+            </div>
+            <div class="step-body">
               <div class="title">${stepArg.title}</div>
               <div class="content">${stepArg.content}</div>
-            </div> `
-        )}
+            </div>
+            ${stepArg.menuOptions && stepArg.menuOptions.length > 0
+              ? html`<div slot="footer" class="bottomButtons">
+                  ${isSelected && this.activeForm !== null && !this.activeFormValid
+                    ? html`<div class="stepHint">Complete form to continue</div>`
+                    : ''}
+                  ${stepArg.menuOptions.map((actionArg, actionIndex) => {
+                    const isPrimary = actionIndex === stepArg.menuOptions!.length - 1;
+                    const isDisabled = isPrimary && this.activeForm !== null && !this.activeFormValid;
+                    return html`
+                      <div
+                        class="bottomButton ${isPrimary ? 'primary' : ''} ${isDisabled ? 'disabled' : ''}"
+                        @click=${() => this.handleMenuOptionClick(actionArg, isPrimary)}
+                      >${actionArg.name}</div>
+                    `;
+                  })}
+                </div>`
+              : ''}
+          </dees-tile>`;
+        })}
       </div>
     `;
   }
@@ -230,6 +420,7 @@ export class DeesStepper extends DeesElement {
     if (!selectedStepElement) {
       return;
     }
+    this.scanActiveForm(selectedStepElement);
     if (!stepperContainer.style.paddingTop) {
       stepperContainer.style.paddingTop = `${
         stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
@@ -296,4 +487,93 @@ export class DeesStepper extends DeesElement {
     nextStep.validationFuncCalled = false;
     this.selectedStep = nextStep;
   }
+
+  /**
+   * Scans the currently selected step for a <dees-form> in its content. When
+   * found, subscribes to the form's RxJS changeSubject so the primary
+   * menuOption button can auto-enable/disable as required fields are filled.
+   *
+   * If the form reference is the same as the previous activation (e.g. on a
+   * same-step re-render), we just recompute validity without re-subscribing.
+   */
+  private scanActiveForm(selectedStepElement: HTMLElement) {
+    const form = selectedStepElement.querySelector('dees-form') as DeesForm | null;
+    if (form === this.activeForm) {
+      this.recomputeFormValid();
+      return;
+    }
+    this.activeFormSubscription?.unsubscribe();
+    this.activeFormSubscription = undefined;
+    this.activeForm = form;
+    if (!form) {
+      this.activeFormValid = true;
+      return;
+    }
+    // Initial check before subscribing, in case the form's firstUpdated fires
+    // synchronously between scan and subscribe.
+    this.recomputeFormValid();
+    this.activeFormSubscription = form.changeSubject.subscribe(() => {
+      this.recomputeFormValid();
+    });
+  }
+
+  /**
+   * Recomputes activeFormValid by checking every required field in the active
+   * form for a non-empty value. Mirrors dees-form.updateRequiredStatus's logic
+   * but stores the result on the stepper instead of mutating a submit button.
+   */
+  private recomputeFormValid() {
+    const form = this.activeForm;
+    if (!form) {
+      this.activeFormValid = true;
+      return;
+    }
+    const fields = form.getFormElements();
+    this.activeFormValid = fields.every(
+      (field) => !field.required || (field.value !== null && field.value !== undefined && field.value !== ''),
+    );
+  }
+
+  /**
+   * Click handler for menuOption buttons in the footer. For the primary (last)
+   * button, if an active form is present, gates on required-field validity and
+   * triggers the form's gatherAndDispatch() before running the action. The
+   * action is awaited so any async work (e.g. goNext → scroll animation)
+   * completes before the click handler returns.
+   */
+  private async handleMenuOptionClick(
+    optionArg: plugins.tsclass.website.IMenuItem<DeesStepper>,
+    isPrimary: boolean,
+  ) {
+    const form = this.activeForm;
+    if (isPrimary && form) {
+      if (!this.activeFormValid) return;
+      await new Promise<void>((resolve) => {
+        form.addEventListener('formData', () => resolve(), { once: true });
+        form.gatherAndDispatch();
+      });
+    }
+    await optionArg.action(this);
+  }
+
+  public async destroy() {
+    const domtools = await this.domtoolsPromise;
+    const container = this.shadowRoot!.querySelector('.stepperContainer');
+    container?.classList.add('predestroy');
+    await domtools.convenience.smartdelay.delayFor(200);
+    if (this.parentElement) {
+      this.parentElement.removeChild(this);
+    }
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
+
+    // Tear down form subscription to avoid leaks when the overlay closes.
+    this.activeFormSubscription?.unsubscribe();
+    this.activeFormSubscription = undefined;
+    this.activeForm = null;
+
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
+  }
 }

package/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -268,9 +268,7 @@ export class DeesModal extends DeesElement {
       }
 
       .heading .header-button dees-icon {
-        width: 14px;
-        height: 14px;
-        display: block;
+        font-size: 14px;
       }
 
       .content {