v3.81.0

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2026-04-17 - 3.81.0 - feat(dees-updater)
+enhance updater progress and completion views with version metadata cards
+
+- add reusable version metadata rendering for current, incoming, and installed versions
+- refresh progress and ready states with clearer headings, descriptive copy, and automatic action summary
+- apply monospace styling to displayed version numbers for improved readability
+
+## 2026-04-16 - 3.80.0 - feat(stepper,updater)
+add progress-aware stepper flows and updater countdown states
+
+- extend dees-stepper with embedded progressbar rendering, progress state helpers, and automatic progression for async validation steps
+- rework dees-updater to run as a non-cancelable two-step flow with live progress updates, optional external links, and configurable close or reload completion actions
+- refresh stepper and updater demos plus documentation to showcase auto-advancing progress steps and ready-state countdown behavior
+
 ## 2026-04-16 - 3.79.0 - feat(dees-progressbar)
 add status panels, terminal output, and legacy progress input support
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.79.0",
+  "version": "3.81.0",
   "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",

readme.md

@@ -1508,18 +1508,33 @@ const layer = await DeesWindowLayer.createAndShow({
 ### Navigation Components
 
 #### `DeesStepper`
-Multi-step navigation component for guided user flows.
+Multi-step navigation component for guided user flows, including optional auto-advancing progress steps that can render `dees-progressbar` status output between form steps.
 
 ```typescript
 <dees-stepper
   .steps=${[
-    { key: 'personal', label: 'Personal Info', content: html`<div>Form 1</div>` },
-    { key: 'address', label: 'Address', content: html`<div>Form 2</div>` },
-    { key: 'confirm', label: 'Confirmation', content: html`<div>Review</div>` }
+    {
+      title: 'Account Setup',
+      content: html`<dees-form>...</dees-form>`,
+      menuOptions: [{ name: 'Continue', action: async (stepper) => stepper?.goNext() }]
+    },
+    {
+      title: 'Provision Workspace',
+      content: html`<p>Preparing your environment...</p>`,
+      progressStep: {
+        label: 'Workspace setup',
+        indeterminate: true,
+        statusRows: 4,
+        terminalLines: ['Allocating workspace']
+      },
+      validationFunc: async (stepper, _element, signal) => {
+        stepper.updateProgressStep({ percentage: 35, statusText: 'Installing dependencies...' });
+        stepper.appendProgressStepLine('Installing dependencies');
+        if (signal?.aborted) return;
+        stepper.updateProgressStep({ percentage: 100, indeterminate: false, statusText: 'Workspace ready.' });
+      }
+    }
   ]}
-  currentStep="personal"
-  @step-change=${handleStepChange}
-  @complete=${handleComplete}
 ></dees-stepper>
 ```
 
@@ -1580,6 +1595,33 @@ Theme provider component that wraps children and provides CSS custom properties
 - Works with dark/light mode
 - Overrides cascade to all child components
 
+#### `DeesUpdater`
+Updater controller that opens a non-cancelable `dees-stepper` flow with a progress step and a ready step.
+
+```typescript
+const updater = await DeesUpdater.createAndShow({
+  currentVersion: '3.79.0',
+  updatedVersion: '3.80.0',
+  moreInfoUrl: 'https://code.foss.global/design.estate/dees-catalog',
+  changelogUrl: 'https://code.foss.global/design.estate/dees-catalog/-/blob/main/changelog.md',
+  successAction: 'reload',
+  successDelayMs: 10000,
+});
+
+updater.updateProgress({
+  percentage: 35,
+  statusText: 'Downloading signed bundle...',
+  terminalLines: ['Checking release manifest', 'Downloading signed bundle']
+});
+
+updater.appendProgressLine('Verifying checksum');
+updater.updateProgress({ percentage: 72, statusText: 'Verifying checksum...' });
+
+await updater.markUpdateReady();
+```
+
+After `markUpdateReady()`, the updater switches to a second countdown step with a determinate progress bar and runs the configured success action when the timer reaches zero.
+
 ---
 
 ### Workspace / IDE Components 💻

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.79.0',
+  version: '3.81.0',
   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.demo.ts

@@ -1,7 +1,45 @@
 import { html } from '@design.estate/dees-element';
 import { DeesStepper, type IStep } from './dees-stepper.js';
 
-const demoSteps: IStep[] = [
+const waitForProgressTick = async (timeoutArg: number, signal?: AbortSignal): Promise<boolean> => {
+  return new Promise((resolve) => {
+    let completed = false;
+
+    const finish = (result: boolean) => {
+      if (completed) {
+        return;
+      }
+
+      completed = true;
+      if (signal) {
+        signal.removeEventListener('abort', handleAbort);
+      }
+      resolve(result);
+    };
+
+    const handleAbort = () => {
+      window.clearTimeout(timeoutId);
+      finish(false);
+    };
+
+    const timeoutId = window.setTimeout(() => {
+      finish(true);
+    }, timeoutArg);
+
+    if (signal) {
+      signal.addEventListener('abort', handleAbort, { once: true });
+    }
+  });
+};
+
+const createContinueMenuOptions = (labelArg = 'Continue') => [
+  {
+    name: labelArg,
+    action: async (stepper?: DeesStepper) => stepper?.goNext(),
+  },
+];
+
+const createDemoSteps = (): IStep[] => [
   {
     title: 'Account Setup',
     content: html`
@@ -10,9 +48,7 @@ const demoSteps: IStep[] = [
         <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
       </dees-form>
     `,
-    menuOptions: [
-      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
-    ],
+    menuOptions: createContinueMenuOptions(),
   },
   {
     title: 'Profile Details',
@@ -22,9 +58,7 @@ const demoSteps: IStep[] = [
         <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
       </dees-form>
     `,
-    menuOptions: [
-      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
-    ],
+    menuOptions: createContinueMenuOptions(),
   },
   {
     title: 'Contact Information',
@@ -34,9 +68,74 @@ const demoSteps: IStep[] = [
         <dees-input-text key="company" label="Company"></dees-input-text>
       </dees-form>
     `,
-    menuOptions: [
-      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
-    ],
+    menuOptions: createContinueMenuOptions(),
+  },
+  {
+    title: 'Provision Workspace',
+    content: html`
+      <dees-panel>
+        <p>
+          We are creating your starter workspace, applying your onboarding choices,
+          and preparing a live preview. This step moves forward automatically when
+          the environment is ready.
+        </p>
+      </dees-panel>
+    `,
+    progressStep: {
+      label: 'Workspace setup',
+      percentage: 8,
+      indeterminate: true,
+      statusRows: 4,
+      statusText: 'Allocating a clean workspace...',
+      terminalLines: ['Allocating a clean workspace'],
+    },
+    validationFunc: async (stepper, _htmlElement, signal) => {
+      const progressFrames = [
+        { line: 'Allocating a clean workspace', percentage: 8, delay: 500 },
+        { line: 'Syncing account preferences', percentage: 24, delay: 650 },
+        { line: 'Installing selected integrations', percentage: 47, delay: 700 },
+        { line: 'Generating starter project files', percentage: 71, delay: 650 },
+        { line: 'Booting the live preview environment', percentage: 92, delay: 700 },
+      ];
+
+      stepper.resetProgressStep();
+
+      for (const [index, progressFrame] of progressFrames.entries()) {
+        if (signal?.aborted) {
+          return;
+        }
+
+        if (index === 0) {
+          stepper.updateProgressStep({
+            percentage: progressFrame.percentage,
+            indeterminate: true,
+            statusText: `${progressFrame.line}...`,
+            terminalLines: [progressFrame.line],
+          });
+        } else {
+          stepper.appendProgressStepLine(progressFrame.line);
+          stepper.updateProgressStep({
+            percentage: progressFrame.percentage,
+            indeterminate: true,
+            statusText: `${progressFrame.line}...`,
+          });
+        }
+
+        const completed = await waitForProgressTick(progressFrame.delay, signal);
+        if (!completed) {
+          return;
+        }
+      }
+
+      stepper.appendProgressStepLine('Workspace ready');
+      stepper.updateProgressStep({
+        percentage: 100,
+        indeterminate: false,
+        statusText: 'Workspace ready.',
+      });
+
+      await waitForProgressTick(350, signal);
+    },
   },
   {
     title: 'Team Size',
@@ -55,9 +154,7 @@ const demoSteps: IStep[] = [
         ></dees-input-dropdown>
       </dees-form>
     `,
-    menuOptions: [
-      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
-    ],
+    menuOptions: createContinueMenuOptions(),
   },
   {
     title: 'Goals',
@@ -75,52 +172,31 @@ const demoSteps: IStep[] = [
         ></dees-input-multitoggle>
       </dees-form>
     `,
-    menuOptions: [
-      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
-    ],
-  },
-  {
-    title: 'Brand Preferences',
-    content: html`
-      <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: async (stepper) => stepper!.goNext() },
-    ],
-  },
-  {
-    title: 'Integrations',
-    content: html`
-      <dees-form>
-        <dees-input-list
-          key="integrations"
-          label="Integrations in use"
-          placeholder="Add integration"
-        ></dees-input-list>
-      </dees-form>
-    `,
-    menuOptions: [
-      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
-    ],
+    menuOptions: createContinueMenuOptions(),
   },
   {
     title: 'Review & Launch',
     content: html`
       <dees-panel>
-        <p>Almost there! Review your selections and launch whenever you're ready.</p>
+        <p>
+          Your workspace is ready. Review the collected details and launch when
+          you are ready to start.
+        </p>
       </dees-panel>
     `,
     menuOptions: [
-      { name: 'Launch', action: async (stepper) => stepper!.goNext() },
+      {
+        name: 'Launch',
+        action: async (stepper?: DeesStepper) => {
+          if (stepper?.overlay) {
+            await stepper.destroy();
+          }
+        },
+      },
     ],
   },
 ];
 
-const cloneSteps = (): IStep[] => demoSteps.map((step) => ({ ...step }));
-
 export const stepperDemo = () => html`
   <div style="position: absolute; inset: 0;">
     <div
@@ -128,10 +204,10 @@ export const stepperDemo = () => html`
     >
       <dees-button
         @click=${async () => {
-          await DeesStepper.createAndShow({ steps: cloneSteps() });
+          await DeesStepper.createAndShow({ steps: createDemoSteps() });
         }}
       >Open stepper as overlay</dees-button>
     </div>
-    <dees-stepper .steps=${cloneSteps()}></dees-stepper>
+    <dees-stepper .steps=${createDemoSteps()}></dees-stepper>
   </div>
 `;

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

@@ -5,8 +5,6 @@ import {
   customElement,
   html,
   css,
-  unsafeCSS,
-  type CSSResult,
   cssManager,
   property,
   type TemplateResult,
@@ -20,16 +18,33 @@ import { zIndexRegistry } from '../../00zindex.js';
 import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
 import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 import type { DeesForm } from '../../00group-form/dees-form/dees-form.js';
+import '../../00group-feedback/dees-progressbar/dees-progressbar.js';
 import '../dees-tile/dees-tile.js';
 
+export interface IStepProgressState {
+  label?: string;
+  percentage?: number;
+  indeterminate?: boolean;
+  showPercentage?: boolean;
+  statusText?: string;
+  terminalLines?: string[];
+  statusRows?: number;
+}
+
+export interface IStepProgress extends IStepProgressState {
+  autoAdvance?: boolean;
+}
+
 export interface IStep {
   title: string;
   content: TemplateResult;
+  progressStep?: IStepProgress;
   menuOptions?: plugins.tsclass.website.IMenuItem<DeesStepper>[];
   validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
   onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
   validationFuncCalled?: boolean;
   abortController?: AbortController;
+  progressStepState?: IStepProgressState;
 }
 
 declare global {
@@ -276,6 +291,14 @@ export class DeesStepper extends DeesElement {
         padding: 32px;
       }
 
+      .step-body .content.withProgressStep {
+        padding-top: 20px;
+      }
+
+      .progressStep {
+        padding: 0 24px;
+      }
+
       /* --- Footer: modal-style bottom buttons --- */
       .bottomButtons {
         display: flex;
@@ -375,6 +398,7 @@ export class DeesStepper extends DeesElement {
           const isHidden =
             this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep);
           const isFirst = stepIndex === 0;
+          const progressStepState = stepArg.progressStep ? this.getProgressStepState(stepArg) : null;
           return html`<dees-tile
             class="step ${isSelected ? 'selected' : ''} ${isHidden ? 'hiddenStep' : ''} ${isFirst ? 'entrance' : ''}"
           >
@@ -390,7 +414,20 @@ export class DeesStepper extends DeesElement {
             </div>
             <div class="step-body">
               <div class="title">${stepArg.title}</div>
-              <div class="content">${stepArg.content}</div>
+              ${stepArg.progressStep && progressStepState ? html`
+                <div class="progressStep">
+                  <dees-progressbar
+                    .label=${progressStepState.label ?? stepArg.title}
+                    .percentage=${progressStepState.percentage ?? 0}
+                    .indeterminate=${progressStepState.indeterminate ?? false}
+                    .showPercentage=${progressStepState.showPercentage ?? true}
+                    .statusText=${progressStepState.statusText ?? ''}
+                    .terminalLines=${progressStepState.terminalLines ?? []}
+                    .statusRows=${progressStepState.statusRows ?? 3}
+                  ></dees-progressbar>
+                </div>
+              ` : ''}
+              <div class="content ${stepArg.progressStep ? 'withProgressStep' : ''}">${stepArg.content}</div>
             </div>
             <div slot="footer" class="bottomButtons">
               ${isSelected && this.activeForm !== null && !this.activeFormValid
@@ -426,22 +463,30 @@ export class DeesStepper extends DeesElement {
   public async firstUpdated() {
     await this.domtoolsPromise;
     await this.domtools.convenience.smartdelay.delayFor(0);
+    if (!this.steps.length) {
+      return;
+    }
+    this.prepareStepForActivation(this.steps[0]);
     this.selectedStep = this.steps[0];
-    this.setScrollStatus();
+    await this.updateComplete;
+    await 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() {
-    this.setScrollStatus();
+  public async updated(changedProperties: Map<string | number | symbol, unknown>) {
+    if (!changedProperties.has('selectedStep') && !changedProperties.has('steps')) {
+      return;
+    }
+
+    await this.setScrollStatus();
   }
 
   public scroller!: typeof domtools.plugins.SweetScroll.prototype;
 
   public async setScrollStatus() {
     const stepperContainer = this.shadowRoot!.querySelector('.stepperContainer') as HTMLElement;
-    const firstStepElement = this.shadowRoot!.querySelector('.step') as HTMLElement;
     const selectedStepElement = this.shadowRoot!.querySelector('.selected') as HTMLElement;
     if (!selectedStepElement) {
       return;
@@ -452,14 +497,11 @@ export class DeesStepper extends DeesElement {
         stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
       }px`;
     }
-    console.log('Setting scroll status');
-    console.log(selectedStepElement);
     const scrollPosition =
       selectedStepElement.offsetTop -
       stepperContainer.offsetHeight / 2 +
       selectedStepElement.offsetHeight / 2;
-    console.log(scrollPosition);
-    const domtoolsInstance = await domtools.DomTools.setupDomTools();
+    await domtools.DomTools.setupDomTools();
     if (!this.scroller) {
       this.scroller = new domtools.plugins.SweetScroll(
         {
@@ -474,7 +516,11 @@ 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, this.selectedStep.abortController.signal);
+      void this.runStepValidation(
+        this.selectedStep,
+        selectedStepElement,
+        this.selectedStep.abortController.signal,
+      );
     }
     this.scroller.to(scrollPosition);
   }
@@ -492,6 +538,7 @@ export class DeesStepper extends DeesElement {
     currentStep.validationFuncCalled = false;
     const previousStep = this.steps[currentIndex - 1];
     previousStep.validationFuncCalled = false;
+    this.prepareStepForActivation(previousStep);
     this.selectedStep = previousStep;
     await this.domtoolsPromise;
     await this.domtools.convenience.smartdelay.delayFor(100);
@@ -511,9 +558,52 @@ export class DeesStepper extends DeesElement {
     currentStep.validationFuncCalled = false;
     const nextStep = this.steps[currentIndex + 1];
     nextStep.validationFuncCalled = false;
+    this.prepareStepForActivation(nextStep);
     this.selectedStep = nextStep;
   }
 
+  public resetProgressStep(stepArg: IStep = this.selectedStep) {
+    if (!stepArg?.progressStep) {
+      return;
+    }
+
+    stepArg.progressStepState = this.createInitialProgressStepState(stepArg);
+    this.requestUpdate();
+  }
+
+  public updateProgressStep(
+    progressStateArg: Partial<IStepProgressState>,
+    stepArg: IStep = this.selectedStep,
+  ) {
+    if (!stepArg?.progressStep) {
+      return;
+    }
+
+    const currentProgressState = this.getProgressStepState(stepArg);
+    stepArg.progressStepState = {
+      ...currentProgressState,
+      ...progressStateArg,
+      terminalLines: progressStateArg.terminalLines
+        ? [...progressStateArg.terminalLines]
+        : [...(currentProgressState.terminalLines ?? [])],
+    };
+    this.requestUpdate();
+  }
+
+  public appendProgressStepLine(lineArg: string, stepArg: IStep = this.selectedStep) {
+    if (!stepArg?.progressStep) {
+      return;
+    }
+
+    const currentProgressState = this.getProgressStepState(stepArg);
+    this.updateProgressStep(
+      {
+        terminalLines: [...(currentProgressState.terminalLines ?? []), lineArg],
+      },
+      stepArg,
+    );
+  }
+
   /**
    * Scans the currently selected step for a <dees-form> in its content. When
    * found, subscribes to the form's RxJS changeSubject so the primary
@@ -582,6 +672,74 @@ export class DeesStepper extends DeesElement {
     await optionArg.action(this);
   }
 
+  private getProgressStepState(stepArg: IStep): IStepProgressState {
+    if (!stepArg.progressStep) {
+      return {};
+    }
+
+    if (!stepArg.progressStepState) {
+      stepArg.progressStepState = this.createInitialProgressStepState(stepArg);
+    }
+
+    return stepArg.progressStepState;
+  }
+
+  private createInitialProgressStepState(stepArg: IStep): IStepProgressState {
+    return {
+      label: stepArg.progressStep?.label ?? stepArg.title,
+      percentage: stepArg.progressStep?.percentage ?? 0,
+      indeterminate: stepArg.progressStep?.indeterminate ?? false,
+      showPercentage: stepArg.progressStep?.showPercentage ?? true,
+      statusText: stepArg.progressStep?.statusText ?? '',
+      terminalLines: [...(stepArg.progressStep?.terminalLines ?? [])],
+      statusRows: stepArg.progressStep?.statusRows ?? 3,
+    };
+  }
+
+  private prepareStepForActivation(stepArg?: IStep) {
+    if (!stepArg?.progressStep) {
+      return;
+    }
+
+    stepArg.progressStepState = this.createInitialProgressStepState(stepArg);
+  }
+
+  private async runStepValidation(
+    stepArg: IStep,
+    selectedStepElement: HTMLElement,
+    signal: AbortSignal,
+  ): Promise<void> {
+    try {
+      await stepArg.validationFunc?.(this, selectedStepElement, signal);
+
+      if (signal.aborted) {
+        return;
+      }
+
+      if (stepArg.progressStep && stepArg.progressStep.autoAdvance !== false && this.selectedStep === stepArg) {
+        this.goNext();
+      }
+    } catch (error) {
+      if (signal.aborted) {
+        return;
+      }
+
+      if (stepArg.progressStep) {
+        const errorText = error instanceof Error ? error.message : 'Unexpected error';
+        this.appendProgressStepLine(`Error: ${errorText}`, stepArg);
+        this.updateProgressStep(
+          {
+            indeterminate: false,
+            statusText: errorText,
+          },
+          stepArg,
+        );
+      }
+
+      console.error(error);
+    }
+  }
+
   /**
    * Currently-open confirmation modal (if any). Prevents double-stacking when
    * the user clicks the backdrop or the Cancel button while a confirm modal
@@ -657,6 +815,9 @@ export class DeesStepper extends DeesElement {
   public async destroy() {
     const domtools = await this.domtoolsPromise;
     const container = this.shadowRoot!.querySelector('.stepperContainer');
+    if (this.selectedStep?.abortController) {
+      this.selectedStep.abortController.abort();
+    }
     container?.classList.add('predestroy');
     await domtools.convenience.smartdelay.delayFor(250);
     if (this.parentElement) {

ts_web/elements/00group-utility/dees-updater/dees-updater.demo.ts

@@ -2,9 +2,73 @@ import { html } from '@design.estate/dees-element';
 
 import { DeesUpdater } from '../dees-updater/dees-updater.js';
 
-export const demoFunc = async () => {
-  const updater = await DeesUpdater.createAndShow();
-  setTimeout(async () => {
-    await updater.destroy();
-  }, 10000);
-}
+const waitForDemoStep = async (timeoutArg: number): Promise<void> => {
+  await new Promise<void>((resolve) => {
+    window.setTimeout(() => resolve(), timeoutArg);
+  });
+};
+
+export const demoFunc = () => {
+  let updaterRunning = false;
+
+  return html`
+    <div style="display: grid; gap: 16px; place-items: center; padding: 32px; text-align: center;">
+      <p style="margin: 0; max-width: 540px; line-height: 1.6; color: var(--dees-color-text-secondary);">
+        Launches the updater as a stepper flow. The first step streams terminal-style
+        progress updates and then moves automatically to the ready step.
+      </p>
+      <dees-button
+        @click=${async () => {
+          if (updaterRunning) {
+            return;
+          }
+
+          updaterRunning = true;
+
+          try {
+            const updater = await DeesUpdater.createAndShow({
+              currentVersion: '3.79.0',
+              updatedVersion: '3.80.0',
+              moreInfoUrl: 'https://code.foss.global/design.estate/dees-catalog',
+              changelogUrl: 'https://code.foss.global/design.estate/dees-catalog/-/blob/main/changelog.md',
+              successAction: 'close',
+              successDelayMs: 10000,
+            });
+
+            const progressFrames = [
+              { line: 'Checking release manifest', percentage: 12, delay: 550 },
+              { line: 'Downloading signed bundle', percentage: 33, delay: 700 },
+              { line: 'Verifying checksum', percentage: 51, delay: 650 },
+              { line: 'Applying update files', percentage: 74, delay: 800 },
+              { line: 'Cleaning up previous release', percentage: 91, delay: 600 },
+            ];
+
+            updater.updateProgress({
+              statusText: 'Checking release manifest...',
+              terminalLines: ['Checking release manifest'],
+              percentage: 12,
+              indeterminate: true,
+            });
+
+            for (const [index, progressFrame] of progressFrames.entries()) {
+              if (index > 0) {
+                updater.appendProgressLine(progressFrame.line);
+                updater.updateProgress({
+                  percentage: progressFrame.percentage,
+                  statusText: `${progressFrame.line}...`,
+                });
+              }
+
+              await waitForDemoStep(progressFrame.delay);
+            }
+
+            await updater.markUpdateReady();
+            await waitForDemoStep(10500);
+          } finally {
+            updaterRunning = false;
+          }
+        }}
+      >Show updater flow</dees-button>
+    </div>
+  `;
+};

ts_web/elements/00group-utility/dees-updater/dees-updater.ts

@@ -4,14 +4,28 @@ import {
   type TemplateResult,
   html,
   property,
-  type CSSResult,
-  domtools,
+  css,
 } from '@design.estate/dees-element';
 import { demoFunc } from './dees-updater.demo.js';
+import {
+  DeesStepper,
+  type IStep,
+  type IStepProgressState,
+} from '../../00group-layout/dees-stepper/dees-stepper.js';
+import { monoFontFamily } from '../../00fonts.js';
 
-import '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
-import { css, cssManager } from '@design.estate/dees-element';
-import { themeDefaultStyles } from '../../00theme.js';
+export type TDeesUpdaterSuccessAction = 'close' | 'reload';
+
+export interface IDeesUpdaterOptions {
+  currentVersion?: string;
+  updatedVersion?: string;
+  moreInfoUrl?: string;
+  changelogUrl?: string;
+  successAction?: TDeesUpdaterSuccessAction;
+  successDelayMs?: number;
+  successActionLabel?: string;
+  onSuccessAction?: () => Promise<void> | void;
+}
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -24,91 +38,475 @@ export class DeesUpdater extends DeesElement {
   public static demo = demoFunc;
   public static demoGroups = ['Utility'];
 
-  public static async createAndShow() {
+  public static async createAndShow(optionsArg: IDeesUpdaterOptions = {}) {
     const updater = new DeesUpdater();
+    updater.currentVersion = optionsArg.currentVersion ?? '';
+    updater.updatedVersion = optionsArg.updatedVersion ?? '';
+    updater.moreInfoUrl = optionsArg.moreInfoUrl ?? '';
+    updater.changelogUrl = optionsArg.changelogUrl ?? '';
+    updater.successAction = optionsArg.successAction ?? 'close';
+    updater.successDelayMs = optionsArg.successDelayMs ?? 10000;
+    updater.successActionLabel = optionsArg.successActionLabel ?? '';
+    updater.onSuccessAction = optionsArg.onSuccessAction ?? null;
     document.body.appendChild(updater);
+    await updater.show();
     return updater;
   }
 
   @property({
     type: String,
   })
-  accessor currentVersion!: string;
+  accessor currentVersion = '';
 
   @property({
     type: String,
   })
-  accessor updatedVersion!: string;
+  accessor updatedVersion = '';
 
-  constructor() {
-    super();
-    domtools.elementBasic.setup();
-  }
+  @property({
+    type: String,
+  })
+  accessor moreInfoUrl = '';
+
+  @property({
+    type: String,
+  })
+  accessor changelogUrl = '';
+
+  @property({
+    type: String,
+  })
+  accessor successAction: TDeesUpdaterSuccessAction = 'close';
+
+  @property({
+    type: Number,
+  })
+  accessor successDelayMs = 10000;
+
+  @property({
+    type: String,
+  })
+  accessor successActionLabel = '';
+
+  private stepper: DeesStepper | null = null;
+  private progressStep: IStep | null = null;
+  private showPromise: Promise<void> | null = null;
+  private onSuccessAction: (() => Promise<void> | void) | null = null;
 
   public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      .modalContainer {
-        will-change: transform;
-        position: relative;
-        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
-        max-width: 800px;
-        border-radius: 8px;
-        border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
-      }
-
-      .headingContainer {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 40px 40px;
-      }
-
-      h1 {
-        margin: none;
-        font-size: 20px;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        margin-left: 20px;
-        font-weight: normal;
-      }
-
-      .buttonContainer {
-        display: grid;
-        grid-template-columns: 50% 50%;
+      :host {
+        display: none;
       }
     `,
   ];
 
   public render(): TemplateResult {
-    return html`
-      <dees-windowlayer
-        @clicked="${this.windowLayerClicked}"
-        .options=${{
-          blur: true,
-        }}
-      >
-        <div class="modalContainer">
-          <div class="headingContainer">
-            <dees-spinner .size=${60}></dees-spinner>
-            <h1>Updating the application...</h1>
-          </div>
-          <div class="progress">
-            <dees-progressbar .progress=${0.5}></dees-progressbar>
-          </div>
-          <div class="buttonContainer">
-            <dees-button>More info</dees-button>
-            <dees-button>Changelog</dees-button>
-          </div>
-        </div> </dees-windowlayer
-      >>
-    `;
+    return html``;
+  }
+
+  public async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    void this.show();
+  }
+
+  public async show(): Promise<void> {
+    if (this.stepper?.isConnected) {
+      return;
+    }
+
+    if (this.showPromise) {
+      return this.showPromise;
+    }
+
+    this.showPromise = this.openStepperFlow();
+
+    try {
+      await this.showPromise;
+    } finally {
+      this.showPromise = null;
+    }
+  }
+
+  public updateProgress(progressStateArg: Partial<IStepProgressState>) {
+    if (!this.stepper || !this.progressStep) {
+      return;
+    }
+
+    this.stepper.updateProgressStep(progressStateArg, this.progressStep);
+  }
+
+  public appendProgressLine(lineArg: string) {
+    if (!this.stepper || !this.progressStep) {
+      return;
+    }
+
+    this.stepper.appendProgressStepLine(lineArg, this.progressStep);
+  }
+
+  public markUpdateError(messageArg: string) {
+    this.appendProgressLine(`Error: ${messageArg}`);
+    this.updateProgress({
+      indeterminate: false,
+      statusText: messageArg,
+    });
+  }
+
+  public async markUpdateReady() {
+    if (!this.stepper || !this.progressStep) {
+      return;
+    }
+
+    this.stepper.updateProgressStep(
+      {
+        percentage: 100,
+        indeterminate: false,
+        statusText: 'Update ready.',
+      },
+      this.progressStep,
+    );
+    this.stepper.appendProgressStepLine('Update ready', this.progressStep);
+
+    if (this.stepper.selectedStep === this.progressStep) {
+      this.stepper.goNext();
+    }
   }
 
   public async destroy() {
-    this.parentElement!.removeChild(this);
+    const stepper = this.stepper;
+    this.stepper = null;
+    this.progressStep = null;
+
+    if (stepper?.isConnected) {
+      await stepper.destroy();
+    }
+
+    if (this.parentElement) {
+      this.parentElement.removeChild(this);
+    }
   }
 
-  private windowLayerClicked() {}
+  private async openStepperFlow() {
+    const { steps, progressStep } = this.createUpdaterSteps();
+    this.progressStep = progressStep;
+    this.stepper = await DeesStepper.createAndShow({
+      steps,
+      cancelable: false,
+    });
+  }
+
+  private createUpdaterSteps(): { steps: IStep[]; progressStep: IStep } {
+    const infoMenuOptions = this.getLinkMenuOptions();
+    const progressStep: IStep = {
+      title: 'Updating the application',
+      content: this.renderProgressContent(),
+      progressStep: {
+        label: this.getProgressLabel(),
+        percentage: 5,
+        indeterminate: true,
+        statusRows: 4,
+        statusText: 'Preparing update...',
+        terminalLines: ['Preparing update'],
+      },
+      menuOptions: infoMenuOptions.length > 0 ? infoMenuOptions : undefined,
+    };
+
+    const readyStep: IStep = {
+      title: this.updatedVersion ? `Version ${this.updatedVersion} ready` : 'Update ready',
+      content: this.renderReadyContent(),
+      progressStep: {
+        label: this.getSuccessCountdownLabel(this.getSuccessDelaySeconds()),
+        percentage: 0,
+        indeterminate: false,
+        showPercentage: false,
+        statusRows: 2,
+        statusText: this.getSuccessCountdownStatus(this.getSuccessDelaySeconds()),
+      },
+      validationFunc: async (stepper, _htmlElement, signal) => {
+        await this.runSuccessCountdown(stepper, readyStep, signal);
+      },
+    };
+
+    return {
+      steps: [progressStep, readyStep],
+      progressStep,
+    };
+  }
+
+  private getProgressLabel(): string {
+    if (this.currentVersion && this.updatedVersion) {
+      return `${this.currentVersion} -> ${this.updatedVersion}`;
+    }
+
+    if (this.updatedVersion) {
+      return `Preparing ${this.updatedVersion}`;
+    }
+
+    return 'Application update';
+  }
+
+  private getSuccessDelaySeconds(): number {
+    return Math.max(1, Math.ceil(this.successDelayMs / 1000));
+  }
+
+  private getSuccessActionDisplayLabel(): string {
+    if (this.successActionLabel) {
+      return this.successActionLabel;
+    }
+
+    if (this.onSuccessAction) {
+      return 'Continuing automatically';
+    }
+
+    if (this.successAction === 'reload') {
+      return 'Reloading application';
+    }
+
+    return 'Closing updater';
+  }
+
+  private getSuccessCountdownLabel(secondsArg: number): string {
+    return `${this.getSuccessActionDisplayLabel()} in ${secondsArg}s`;
+  }
+
+  private getSuccessCountdownStatus(secondsArg: number): string {
+    const secondLabel = secondsArg === 1 ? 'second' : 'seconds';
+    return `${this.getSuccessActionDisplayLabel()} in ${secondsArg} ${secondLabel}.`;
+  }
+
+  private getSuccessActionNowLabel(): string {
+    return `${this.getSuccessActionDisplayLabel()} now...`;
+  }
+
+  private getLinkMenuOptions() {
+    const menuOptions: Array<{ name: string; action: () => Promise<void> }> = [];
+
+    if (this.moreInfoUrl) {
+      menuOptions.push({
+        name: 'More info',
+        action: async () => {
+          this.openExternalUrl(this.moreInfoUrl);
+        },
+      });
+    }
+
+    if (this.changelogUrl) {
+      menuOptions.push({
+        name: 'Changelog',
+        action: async () => {
+          this.openExternalUrl(this.changelogUrl);
+        },
+      });
+    }
+
+    return menuOptions;
+  }
+
+  private renderVersionMeta(labelArg: string, valueArg: string): TemplateResult {
+    return html`
+      <div
+        style="display: grid; gap: 4px; min-width: 132px; padding: 12px 14px; border: 1px solid var(--dees-color-border-subtle); border-radius: 8px; background: var(--dees-color-hover);"
+      >
+        <div
+          style="font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dees-color-text-muted);"
+        >
+          ${labelArg}
+        </div>
+        <div
+          style=${`font-family: ${monoFontFamily}; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--dees-color-text-primary);`}
+        >
+          ${valueArg}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderProgressContent(): TemplateResult {
+    return html`
+      <div style="display: grid; gap: 18px; color: var(--dees-color-text-secondary);">
+        <div style="display: grid; gap: 6px;">
+          <div
+            style="font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dees-color-text-muted);"
+          >
+            Application update
+          </div>
+          <div
+            style="font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; color: var(--dees-color-text-primary);"
+          >
+            Downloading and applying the latest release.
+          </div>
+          <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dees-color-text-secondary);">
+            ${this.currentVersion && this.updatedVersion
+              ? html`Moving from <strong>${this.currentVersion}</strong> to <strong>${this.updatedVersion}</strong>.`
+              : this.updatedVersion
+                ? html`Preparing <strong>${this.updatedVersion}</strong> for installation.`
+                : 'The updater is fetching the newest build and preparing it for installation.'}
+          </p>
+        </div>
+
+        ${this.currentVersion || this.updatedVersion
+          ? html`
+              <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                ${this.currentVersion
+                  ? this.renderVersionMeta('Current version', this.currentVersion)
+                  : ''}
+                ${this.updatedVersion
+                  ? this.renderVersionMeta('Incoming version', this.updatedVersion)
+                  : ''}
+              </div>
+            `
+          : ''}
+
+        <div
+          style="display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--dees-color-border-subtle); border-radius: 8px; background: var(--dees-color-hover);"
+        >
+          <div style="font-size: 12px; font-weight: 600; color: var(--dees-color-text-primary);">
+            Automatic flow
+          </div>
+          <div style="font-size: 13px; line-height: 1.6; color: var(--dees-color-text-muted);">
+            The updater continues on its own once the new build is installed and verified.
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderReadyContent(): TemplateResult {
+    const successDelaySeconds = this.getSuccessDelaySeconds();
+
+    return html`
+      <div style="display: grid; gap: 18px; color: var(--dees-color-text-secondary);">
+        <div style="display: grid; gap: 6px;">
+          <div
+            style="font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dees-color-text-muted);"
+          >
+            Update complete
+          </div>
+          <div
+            style="font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; color: var(--dees-color-text-primary);"
+          >
+            ${this.updatedVersion
+              ? html`Version <span style=${`font-family: ${monoFontFamily}; font-size: 0.95em;`}>${this.updatedVersion}</span> is ready to use.`
+              : 'The new version is ready to use.'}
+          </div>
+          <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dees-color-text-secondary);">
+            The new build has been installed and verified. You can review release details below while the next action runs automatically.
+          </p>
+        </div>
+
+        ${this.updatedVersion
+          ? html`
+              <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                ${this.renderVersionMeta('Installed version', this.updatedVersion)}
+              </div>
+            `
+          : ''}
+
+        <div
+          style="display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--dees-color-border-subtle); border-radius: 8px; background: var(--dees-color-hover);"
+        >
+          <div style="font-size: 12px; font-weight: 600; color: var(--dees-color-text-primary);">
+            Next action
+          </div>
+          <div style="font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--dees-color-text-primary);">
+            ${this.getSuccessActionDisplayLabel()}
+          </div>
+          <div style="font-size: 13px; line-height: 1.6; color: var(--dees-color-text-muted);">
+            Runs automatically in ${successDelaySeconds} seconds.
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private async runSuccessCountdown(
+    stepperArg: DeesStepper,
+    stepArg: IStep,
+    signal?: AbortSignal,
+  ): Promise<void> {
+    const totalDuration = Math.max(1000, this.successDelayMs);
+    const startTime = Date.now();
+
+    while (!signal?.aborted) {
+      const elapsed = Math.min(totalDuration, Date.now() - startTime);
+      const remainingMilliseconds = Math.max(0, totalDuration - elapsed);
+      const remainingSeconds = Math.max(0, Math.ceil(remainingMilliseconds / 1000));
+
+      stepperArg.updateProgressStep(
+        {
+          label: remainingMilliseconds > 0
+            ? this.getSuccessCountdownLabel(remainingSeconds)
+            : this.getSuccessActionNowLabel(),
+          percentage: (elapsed / totalDuration) * 100,
+          indeterminate: false,
+          showPercentage: false,
+          statusText: remainingMilliseconds > 0
+            ? this.getSuccessCountdownStatus(remainingSeconds)
+            : this.getSuccessActionNowLabel(),
+        },
+        stepArg,
+      );
+
+      if (remainingMilliseconds <= 0) {
+        break;
+      }
+
+      const completed = await this.waitForCountdownTick(100, signal);
+      if (!completed) {
+        return;
+      }
+    }
+
+    await this.runConfiguredSuccessAction();
+  }
+
+  private async waitForCountdownTick(timeoutArg: number, signal?: AbortSignal): Promise<boolean> {
+    return new Promise((resolve) => {
+      let completed = false;
+
+      const finish = (result: boolean) => {
+        if (completed) {
+          return;
+        }
+
+        completed = true;
+        if (signal) {
+          signal.removeEventListener('abort', handleAbort);
+        }
+        resolve(result);
+      };
+
+      const handleAbort = () => {
+        window.clearTimeout(timeoutId);
+        finish(false);
+      };
+
+      const timeoutId = window.setTimeout(() => {
+        finish(true);
+      }, timeoutArg);
+
+      if (signal) {
+        signal.addEventListener('abort', handleAbort, { once: true });
+      }
+    });
+  }
+
+  private async runConfiguredSuccessAction(): Promise<void> {
+    if (this.onSuccessAction) {
+      await this.onSuccessAction();
+      return;
+    }
+
+    if (this.successAction === 'reload') {
+      await this.destroy();
+      window.location.reload();
+      return;
+    }
+
+    await this.destroy();
+  }
+
+  private openExternalUrl(urlArg: string) {
+    window.open(urlArg, '_blank', 'noopener,noreferrer');
+  }
 }