@design.estate/dees-catalog 3.70.1 → 3.71.1

package/dist_bundle/bundle.js

@@ -139563,6 +139563,81 @@ var demoFunc9 = /* @__PURE__ */ __name(() => b2`
   });
 }}>Test Responsive</dees-button>
     </div>
+
+    <div class="demo-section">
+      <h3>Scrollable Content</h3>
+      <p>When content exceeds the modal's max-height (<code>calc(100vh - 80px)</code>), the tile caps at that height and the content area scrolls inside. The heading and bottom buttons stay pinned.</p>
+      <div class="button-grid">
+        <dees-button @click=${() => {
+  DeesModal.createAndShow({
+    heading: "Long Article",
+    width: "medium",
+    content: b2`
+              <h4 style="margin-top: 0;">Lorem ipsum dolor sit amet</h4>
+              ${Array.from({ length: 40 }, (_4, i11) => b2`
+                <p>
+                  <strong>§ ${i11 + 1}.</strong>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                  enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                  sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+              `)}
+            `,
+    menuOptions: [{
+      name: "Cancel",
+      action: /* @__PURE__ */ __name(async (modal) => modal.destroy(), "action")
+    }, {
+      name: "Accept",
+      action: /* @__PURE__ */ __name(async (modal) => modal.destroy(), "action")
+    }]
+  });
+}}>Long Article</dees-button>
+
+        <dees-button @click=${() => {
+  DeesModal.createAndShow({
+    heading: "Long List",
+    width: "small",
+    content: b2`
+              <p>Selected items:</p>
+              <ul style="padding-left: 20px; margin: 0;">
+                ${Array.from({ length: 80 }, (_4, i11) => b2`
+                  <li style="padding: 4px 0;">Item ${i11 + 1} — option label</li>
+                `)}
+              </ul>
+            `,
+    menuOptions: [{
+      name: "Done",
+      action: /* @__PURE__ */ __name(async (modal) => modal.destroy(), "action")
+    }]
+  });
+}}>Long List</dees-button>
+
+        <dees-button @click=${() => {
+  DeesModal.createAndShow({
+    heading: "Tall Form",
+    width: "medium",
+    content: b2`
+              <dees-form>
+                ${Array.from({ length: 25 }, (_4, i11) => b2`
+                  <dees-input-text .label=${`Field ${i11 + 1}`}></dees-input-text>
+                `)}
+              </dees-form>
+            `,
+    menuOptions: [{
+      name: "Cancel",
+      action: /* @__PURE__ */ __name(async (modal) => modal.destroy(), "action")
+    }, {
+      name: "Submit",
+      action: /* @__PURE__ */ __name(async (modal) => modal.destroy(), "action")
+    }]
+  });
+}}>Tall Form</dees-button>
+      </div>
+    </div>
   </div>
 `, "demoFunc");
 
@@ -139714,14 +139789,24 @@ __publicField(_DeesTile, "styles", [
         color: var(--dees-color-text-secondary);
       }
 
-      /* --- Content: the rounded inset --- */
+      /* --- Content: the rounded inset ---
+         Uses overflow-y: auto so that when a consumer (e.g. dees-modal) caps
+         the tile with max-height, long content scrolls inside the tile
+         instead of being clipped. For consumers without max-height
+         (e.g. dees-stepper), the tile grows with content and the scroll
+         never activates. Horizontal overflow stays clipped to preserve the
+         rounded corners. */
       .tile-content {
         flex: 1;
         position: relative;
         border-radius: 8px;
         border-top: 1px solid var(--dees-color-border-subtle);
         border-bottom: 1px solid var(--dees-color-border-subtle);
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
 
       .tile-content.no-footer {
@@ -140048,13 +140133,6 @@ __publicField(_DeesModal, "styles", [
         font-size: 14px;
       }
 
-      .content {
-        overflow-y: auto;
-        overflow-x: hidden;
-        overscroll-behavior: contain;
-        scrollbar-width: thin;
-        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
-      }
       .bottomButtons {
         display: flex;
         flex-direction: row;
@@ -187012,175 +187090,223 @@ var DeesPagination = _DeesPagination;
 
 // ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts
 init_dist_ts30();
-var stepperDemo = /* @__PURE__ */ __name(() => b2`
-  <dees-stepper
-    .steps=${[
+var demoSteps = [
   {
     title: "Account Setup",
     content: b2`
-          <dees-form>
-            <dees-input-text key="email" label="Work Email" required></dees-input-text>
-            <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-    validationFunc: /* @__PURE__ */ __name(async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", () => stepperArg.goNext(), { once: true });
-    }, "validationFunc")
+      <dees-form>
+        <dees-input-text key="email" label="Work Email" required></dees-input-text>
+        <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: "Continue", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   },
   {
     title: "Profile Details",
     content: b2`
-          <dees-form>
-            <dees-input-text key="firstName" label="First Name" required></dees-input-text>
-            <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-    validationFunc: /* @__PURE__ */ __name(async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", () => stepperArg.goNext(), { once: true });
-    }, "validationFunc")
+      <dees-form>
+        <dees-input-text key="firstName" label="First Name" required></dees-input-text>
+        <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: "Continue", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   },
   {
     title: "Contact Information",
     content: b2`
-          <dees-form>
-            <dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
-            <dees-input-text key="company" label="Company"></dees-input-text>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-    validationFunc: /* @__PURE__ */ __name(async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", () => stepperArg.goNext(), { once: true });
-    }, "validationFunc")
+      <dees-form>
+        <dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
+        <dees-input-text key="company" label="Company"></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: "Continue", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   },
   {
     title: "Team Size",
     content: b2`
-          <dees-form>
-            <dees-input-dropdown
-              key="teamSize"
-              label="How big is your team?"
-              .options=${[
+      <dees-form>
+        <dees-input-dropdown
+          key="teamSize"
+          label="How big is your team?"
+          .options=${[
       { label: "1-5", value: "1-5" },
       { label: "6-20", value: "6-20" },
       { label: "21-50", value: "21-50" },
       { label: "51+", value: "51+" }
     ]}
-              required
-            ></dees-input-dropdown>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-    validationFunc: /* @__PURE__ */ __name(async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", () => stepperArg.goNext(), { once: true });
-    }, "validationFunc")
+          required
+        ></dees-input-dropdown>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: "Continue", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   },
   {
     title: "Goals",
     content: b2`
-          <dees-form>
-            <dees-input-multitoggle
-              key="goal"
-              label="Main objective"
-              .options=${[
+      <dees-form>
+        <dees-input-multitoggle
+          key="goal"
+          label="Main objective"
+          .options=${[
       { label: "Onboarding", value: "onboarding" },
       { label: "Analytics", value: "analytics" },
       { label: "Automation", value: "automation" }
     ]}
-              required
-            ></dees-input-multitoggle>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-    validationFunc: /* @__PURE__ */ __name(async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", () => stepperArg.goNext(), { once: true });
-    }, "validationFunc")
+          required
+        ></dees-input-multitoggle>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: "Continue", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   },
   {
     title: "Brand Preferences",
     content: b2`
-          <dees-form>
-            <dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
-            <dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-    validationFunc: /* @__PURE__ */ __name(async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", () => stepperArg.goNext(), { once: true });
-    }, "validationFunc")
+      <dees-form>
+        <dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
+        <dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: "Continue", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   },
   {
     title: "Integrations",
     content: b2`
-          <dees-form>
-            <dees-input-list
-              key="integrations"
-              label="Integrations in use"
-              placeholder="Add integration"
-            ></dees-input-list>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-    validationFunc: /* @__PURE__ */ __name(async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", () => stepperArg.goNext(), { once: true });
-    }, "validationFunc")
+      <dees-form>
+        <dees-input-list
+          key="integrations"
+          label="Integrations in use"
+          placeholder="Add integration"
+        ></dees-input-list>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: "Continue", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   },
   {
     title: "Review & Launch",
     content: b2`
-          <dees-panel>
-            <p>Almost there! Review your selections and launch whenever you're ready.</p>
-          </dees-panel>
-        `
+      <dees-panel>
+        <p>Almost there! Review your selections and launch whenever you're ready.</p>
+      </dees-panel>
+    `,
+    menuOptions: [
+      { name: "Launch", action: /* @__PURE__ */ __name(async (stepper) => stepper.goNext(), "action") }
+    ]
   }
-]}
-  ></dees-stepper>
+];
+var cloneSteps = /* @__PURE__ */ __name(() => demoSteps.map((step) => ({ ...step })), "cloneSteps");
+var stepperDemo = /* @__PURE__ */ __name(() => b2`
+  <div style="position: absolute; inset: 0;">
+    <div
+      style="position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;"
+    >
+      <dees-button
+        @click=${async () => {
+  await DeesStepper.createAndShow({ steps: cloneSteps() });
+}}
+      >Open stepper as overlay</dees-button>
+    </div>
+    <dees-stepper .steps=${cloneSteps()}></dees-stepper>
+  </div>
 `, "stepperDemo");
 
 // ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var _selectedStep_dec, _steps_dec, _a81, _DeesStepper_decorators, _init82, _steps, _selectedStep;
+var _activeFormValid_dec, _activeForm_dec, _stepperZIndex_dec, _overlay_dec, _selectedStep_dec, _steps_dec, _a81, _DeesStepper_decorators, _init82, _steps, _selectedStep, _overlay, _stepperZIndex, _activeForm, _activeFormValid;
 _DeesStepper_decorators = [customElement("dees-stepper")];
 var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec = [n5({
   type: Array
 })], _selectedStep_dec = [n5({
   type: Object
-})], _a81) {
+})], _overlay_dec = [n5({
+  type: Boolean,
+  reflect: true
+})], _stepperZIndex_dec = [n5({ type: Number, attribute: false })], _activeForm_dec = [n5({ type: Object, attribute: false })], _activeFormValid_dec = [n5({ type: Boolean, attribute: false })], _a81) {
   constructor() {
     super();
     __privateAdd(this, _steps, __runInitializers(_init82, 8, this, [])), __runInitializers(_init82, 11, this);
     __privateAdd(this, _selectedStep, __runInitializers(_init82, 12, this)), __runInitializers(_init82, 15, this);
+    __privateAdd(this, _overlay, __runInitializers(_init82, 16, this, false)), __runInitializers(_init82, 19, this);
+    __privateAdd(this, _stepperZIndex, __runInitializers(_init82, 20, this, 1e3)), __runInitializers(_init82, 23, this);
+    __privateAdd(this, _activeForm, __runInitializers(_init82, 24, this, null)), __runInitializers(_init82, 27, this);
+    __privateAdd(this, _activeFormValid, __runInitializers(_init82, 28, this, true)), __runInitializers(_init82, 31, this);
+    __publicField(this, "activeFormSubscription");
+    __publicField(this, "windowLayer");
     __publicField(this, "getIndexOfStep", /* @__PURE__ */ __name((stepArg) => {
       return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
     }, "getIndexOfStep"));
     __publicField(this, "scroller");
   }
+  static async createAndShow(optionsArg) {
+    const body3 = 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();
+    });
+    body3.append(stepper.windowLayer);
+    body3.append(stepper);
+    stepper.stepperZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(stepper, stepper.stepperZIndex);
+    return stepper;
+  }
   render() {
     return b2`
-      <div class="stepperContainer">
-        ${this.steps.map(
-      (stepArg) => b2`<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 ? b2`<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 b2`<dees-tile
+            class="step ${isSelected ? "selected" : ""} ${isHidden ? "hiddenStep" : ""} ${isFirst ? "entrance" : ""}"
+          >
+            <div slot="header" class="step-header">
+              ${!isFirst ? b2`<div class="goBack" @click=${this.goBack}>
+                    <span style="font-family: Inter"><-</span> go to previous step
+                  </div>` : b2`<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 ? b2`<div slot="footer" class="bottomButtons">
+                  ${isSelected && this.activeForm !== null && !this.activeFormValid ? b2`<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 b2`
+                      <div
+                        class="bottomButton ${isPrimary ? "primary" : ""} ${isDisabled ? "disabled" : ""}"
+                        @click=${() => this.handleMenuOptionClick(actionArg, isPrimary)}
+                      >${actionArg.name}</div>
+                    `;
+      })}
+                </div>` : ""}
+          </dees-tile>`;
+    })}
       </div>
     `;
   }
@@ -187202,6 +187328,7 @@ var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec =
     if (!selectedStepElement) {
       return;
     }
+    this.scanActiveForm(selectedStepElement);
     if (!stepperContainer.style.paddingTop) {
       stepperContainer.style.paddingTop = `${stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2}px`;
     }
@@ -187259,14 +187386,99 @@ var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec =
     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.
+   */
+  scanActiveForm(selectedStepElement) {
+    const form = selectedStepElement.querySelector("dees-form");
+    if (form === this.activeForm) {
+      this.recomputeFormValid();
+      return;
+    }
+    this.activeFormSubscription?.unsubscribe();
+    this.activeFormSubscription = void 0;
+    this.activeForm = form;
+    if (!form) {
+      this.activeFormValid = true;
+      return;
+    }
+    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.
+   */
+  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 !== void 0 && 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.
+   */
+  async handleMenuOptionClick(optionArg, isPrimary) {
+    const form = this.activeForm;
+    if (isPrimary && form) {
+      if (!this.activeFormValid) return;
+      await new Promise((resolve2) => {
+        form.addEventListener("formData", () => resolve2(), { once: true });
+        form.gatherAndDispatch();
+      });
+    }
+    await optionArg.action(this);
+  }
+  async destroy() {
+    const domtools19 = await this.domtoolsPromise;
+    const container = this.shadowRoot.querySelector(".stepperContainer");
+    container?.classList.add("predestroy");
+    await domtools19.convenience.smartdelay.delayFor(200);
+    if (this.parentElement) {
+      this.parentElement.removeChild(this);
+    }
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
+    this.activeFormSubscription?.unsubscribe();
+    this.activeFormSubscription = void 0;
+    this.activeForm = null;
+    zIndexRegistry.unregister(this);
+  }
 };
 _init82 = __decoratorStart(_a81);
 _steps = new WeakMap();
 _selectedStep = new WeakMap();
+_overlay = new WeakMap();
+_stepperZIndex = new WeakMap();
+_activeForm = new WeakMap();
+_activeFormValid = new WeakMap();
 __decorateElement(_init82, 4, "steps", _steps_dec, _DeesStepper, _steps);
 __decorateElement(_init82, 4, "selectedStep", _selectedStep_dec, _DeesStepper, _selectedStep);
+__decorateElement(_init82, 4, "overlay", _overlay_dec, _DeesStepper, _overlay);
+__decorateElement(_init82, 4, "stepperZIndex", _stepperZIndex_dec, _DeesStepper, _stepperZIndex);
+__decorateElement(_init82, 4, "activeForm", _activeForm_dec, _DeesStepper, _activeForm);
+__decorateElement(_init82, 4, "activeFormValid", _activeFormValid_dec, _DeesStepper, _activeFormValid);
 _DeesStepper = __decorateElement(_init82, 0, "DeesStepper", _DeesStepper_decorators, _DeesStepper);
 __name(_DeesStepper, "DeesStepper");
+// STATIC
 __publicField(_DeesStepper, "demo", stepperDemo);
 __publicField(_DeesStepper, "demoGroups", ["Layout", "Form"]);
 __publicField(_DeesStepper, "styles", [
@@ -187278,7 +187490,24 @@ __publicField(_DeesStepper, "styles", [
         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%;
@@ -187286,101 +187515,120 @@ __publicField(_DeesStepper, "styles", [
         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(dark.blue, 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(dark.blueActive, 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;
@@ -187388,9 +187636,92 @@ __publicField(_DeesStepper, "styles", [
         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;
+      }
     `
 ]);
 __runInitializers(_init82, 1, _DeesStepper);
@@ -200867,7 +201198,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.70.1",
+  version: "3.71.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -202840,4 +203171,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775897260164.js.map
+//# sourceMappingURL=bundle-1775924449030.js.map