kmaterialize 2.3.3-1.0.34 → 2.3.3-1.0.35

package/components/code-card/_code-card.scss

@@ -0,0 +1,91 @@
+// Match the documentation's compact code blocks and Atom One Dark palette.
+.card.code-card {
+    --code-card-background: #282c34;
+    --code-card-color: #abb2bf;
+    --code-card-border-color: #8888;
+    --code-card-font-size: 0.85rem;
+    --code-card-padding: 1em;
+
+    position: relative;
+    min-width: 0;
+    max-width: 100%;
+    margin: 1em 0;
+    overflow: hidden;
+    font: var(--code-card-font-size)/1.25 monospace, monospace;
+    background: var(--code-card-background);
+    color: var(--code-card-color);
+    border: 1px solid var(--code-card-border-color);
+    // The standard .card supplies the 12px border radius.
+    box-shadow: none;
+
+    .code-card-status, .code-card-copy {
+        position: absolute;
+        z-index: 2;
+        color: var(--md-sys-color-on-surface-variant, #abb2bf);
+    }
+
+    .code-card-status {
+        top: 15px;
+        right: 45px;
+        font: 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+        pointer-events: none;
+    }
+
+    .code-card-copy {
+        top: 6px;
+        right: 6px;
+
+        > .btn {
+            --button-icon: 24px;
+            color: inherit;
+        }
+    }
+    .code-card-copy[hidden] { display: none; }
+    .code-card-copy > .btn:focus-visible, .code-card-body:focus-visible {
+        outline: 2px solid var(--md-sys-color-primary, #61aeee);
+        outline-offset: -2px;
+    }
+
+    pre.code-card-body {
+        display: block;
+        margin: 0;
+        padding: 0;
+        max-height: var(--code-card-max-height, none);
+        overflow: auto;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        color: inherit;
+        text-align: start;
+        direction: ltr;
+        white-space: pre;
+    }
+    pre.code-card-body, pre.code-card-body > code {
+        font: inherit;
+        text-shadow: none;
+    }
+    pre.code-card-body > code {
+        display: block;
+        width: max-content;
+        min-width: 100%;
+        margin: 0;
+        padding: var(--code-card-padding);
+        border: 0;
+        background: transparent;
+        color: inherit;
+        white-space: inherit;
+    }
+
+    .token { background: transparent; text-shadow: none; }
+    .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #5c6370; font-style: italic; }
+    .token.punctuation, .token.operator, .token.property { color: var(--code-card-color); }
+    .token.keyword, .token.atrule { color: #c678dd; }
+    .token.tag, .token.selector, .token.deleted { color: #e06c75; }
+    .token.function, .token.function-variable, .token.url { color: #61aeee; }
+    .token.class-name, .token.builtin { color: #e6c07b; }
+    .token.attr-name, .token.number, .token.constant, .token.variable, .token.builtin-variable { color: #d19a66; }
+    .token.string, .token.string-property, .token.attr-value, .token.regex, .token.inserted { color: #98c379; }
+    .token.boolean, .token.entity { color: #56b6c2; }
+    .token.important, .token.bold { font-weight: bold; }
+    .token.italic { font-style: italic; }
+}

package/components/code-card/code-card.ts

@@ -0,0 +1,198 @@
+import { BaseOptions, Component, InitElements, MElement } from "../../src/component";
+import CrazyButton from "../extensions/web/crazy-button";
+import { loadPeer } from "../../src/peer-loader";
+import type * as Prism from "prismjs";
+
+/** Display source code with optional syntax highlighting and clipboard controls. */
+export interface CodeCardOptions extends BaseOptions {
+    code:string;
+    language:string;
+    title:string;
+    copy:boolean;
+    highlight:boolean;
+    copyLabel:string;
+    copiedLabel:string;
+    errorLabel:string;
+}
+
+const _defaults:CodeCardOptions = {
+    code: "",
+    language: "plain",
+    title: "",
+    copy: true,
+    highlight: true,
+    copyLabel: "Copy code",
+    copiedLabel: "Copied!",
+    errorLabel: "Unable to copy",
+};
+
+/** A themed code card. Source text is never executed or interpreted as markup. */
+export class CodeCard extends Component<CodeCardOptions> {
+
+    public ready:Promise<void>;
+    private _prism?:typeof Prism;
+    private _originalNodes:Node[];
+    private _addedClasses:string[];
+    private _code:HTMLElement;
+    private _pre:HTMLPreElement;
+    private _button:CrazyButton;
+    private _status:HTMLElement;
+    private _timer:ReturnType<typeof setTimeout>;
+    private _copying:boolean = false;
+    private _destroyed:boolean = false;
+    private _revision:number = 0;
+
+    public constructor(el:HTMLElement, options:Partial<CodeCardOptions> = {}){
+        super(el, options, CodeCard);
+        const source = el.querySelector("pre > code, code");
+        const language = Array.from(source?.classList || []).find(name => name.startsWith("language-"))?.slice(9);
+        this.options = {
+            ...CodeCard.defaults,
+            code: source?.textContent || "",
+            language: el.dataset.codeLanguage || language || "plain",
+            title: el.dataset.codeTitle || "",
+            copy: el.dataset.codeCopy !== "false",
+            highlight: el.dataset.codeHighlight !== "false",
+            ...options,
+        };
+        this._originalNodes = Array.from(el.childNodes);
+        this._addedClasses = ["card", "code-card"].filter(name => !el.classList.contains(name));
+        el.classList.add(...this._addedClasses);
+        el["M_CodeCard"] = this;
+        this._createElements();
+        this._render();
+        this.ready = this.update({});
+    }
+
+    public static get defaults():CodeCardOptions { return _defaults; }
+    public static init(el:HTMLElement, options?:Partial<CodeCardOptions>):CodeCard;
+    public static init(els:InitElements<MElement>, options?:Partial<CodeCardOptions>):CodeCard[];
+    public static init(els:HTMLElement|InitElements<MElement>, options:Partial<CodeCardOptions> = {}):CodeCard|CodeCard[] {
+        return super.init(els, options, CodeCard);
+    }
+    public static getInstance(el:HTMLElement):CodeCard { return el["M_CodeCard"]; }
+
+    /** Update content, language, title, or the optional copy control. */
+    public async update(options:Partial<CodeCardOptions>):Promise<void> {
+        if(this._destroyed) return;
+        this.options = { ...this.options, ...options };
+        this._revision++;
+        clearTimeout(this._timer);
+        this._setCopyFeedback("content_copy");
+        this._render();
+        if(this.options.highlight && !this._prism){
+            this._prism = await loadPeer<typeof Prism>({
+                specifier: "prismjs",
+                globalName: "Prism",
+                feature: "CodeCard syntax highlighting",
+                cdnHint: '<script src="path/to/prism.js" data-manual></script> (include the language grammars you use)',
+            }, async() => {
+                const scope = window as Window & { Prism?:typeof Prism|{ manual:boolean } };
+                const created = !scope.Prism;
+                if(created) scope.Prism = { manual: true };
+                try { return await import("prismjs"); }
+                catch(error){ if(created) delete scope.Prism; throw error; }
+            });
+        }
+        if(!this._destroyed) this._render();
+    }
+
+    public getCode():string { return this.options.code; }
+
+    /** Copy the original source, preserving whitespace and excluding UI labels. */
+    public async copy():Promise<boolean> {
+        if(this._destroyed || this._copying || !this.options.copy) return false;
+        const revision = this._revision;
+        const restoreFocus = this._button.contains(document.activeElement);
+        this._copying = true;
+        this._button.setProperty("disabled", true);
+        clearTimeout(this._timer);
+        this._setCopyFeedback("content_copy");
+        let success = false;
+        try {
+            await navigator.clipboard.writeText(this.options.code);
+            success = true;
+        }catch{
+            // Leave the source available for manual selection when clipboard access fails.
+        }finally{
+            this._copying = false;
+        }
+        if(this._destroyed) return success;
+        this._button.setProperty("disabled", false);
+        if(revision === this._revision){
+            this._setCopyFeedback(success ? "check" : "error_outline", success ? this.options.copiedLabel : this.options.errorLabel);
+            this._timer = setTimeout(() => this._setCopyFeedback("content_copy"), 2000);
+        }
+        await this._button.updateComplete;
+        if(this._destroyed) return success;
+        if(restoreFocus && document.activeElement === document.body && this.options.copy && this._button.isConnected)
+            this._button.querySelector("button")?.focus({ preventScroll: true });
+        this.el.dispatchEvent(new CustomEvent("codecopy", { bubbles: true, detail: { success } }));
+        return success;
+    }
+
+    /** Restore the authored markup and remove component-owned listeners. */
+    public destroy():void {
+        if(this._destroyed) return;
+        this._destroyed = true;
+        clearTimeout(this._timer);
+        this._button.removeEventListener("buttonaction", this._onCopy);
+        this.el.replaceChildren(...this._originalNodes);
+        this.el.classList.remove(...this._addedClasses);
+        delete this.el["M_CodeCard"];
+    }
+
+    private _onCopy = ():void => { void this.copy(); };
+
+    private _createElements():void {
+        this._status = document.createElement("span");
+        this._status.className = "code-card-status";
+        this._status.setAttribute("role", "status");
+        this._button = new CrazyButton();
+        this._button.className = "code-card-copy";
+        this._button.setAttribute("type", "icon");
+        this._button.setAttribute("variant", "standard");
+        this._button.setAttribute("size", "xs");
+        this._button.addEventListener("buttonaction", this._onCopy);
+        this._pre = document.createElement("pre");
+        this._pre.className = "code-card-body";
+        this._pre.tabIndex = 0;
+        this._code = document.createElement("code");
+        this._pre.append(this._code);
+        this.el.replaceChildren(this._status, this._button, this._pre);
+    }
+
+    private _setCopyFeedback(icon:string, message:string = ""):void {
+        this._status.textContent = message;
+        this._button.setAttribute("icon-text", icon);
+        this._button.setAttribute("aria-label", message || this.options.copyLabel);
+        this._button.title = message || this.options.copyLabel;
+    }
+
+    private _render():void {
+        const requested = this.options.language.trim().toLowerCase();
+        const aliases = { html: "markup", xml: "markup", js: "javascript", ts: "typescript", shell: "bash", text: "plain", plaintext: "plain" };
+        const language = /^[a-z0-9-]+$/.test(requested) ? aliases[requested] || requested : "plain";
+        const labels = { markup: "HTML", css: "CSS", javascript: "JavaScript", typescript: "TypeScript", php: "PHP", json: "JSON", yaml: "YAML", bash: "Shell", python: "Python", handlebars: "Handlebars", plain: "Plain text" };
+        this._pre.setAttribute("aria-label", this.options.title || (labels[language] || requested.toUpperCase()) + " code");
+        this._button.hidden = !this.options.copy;
+        this._code.className = "language-" + language;
+        let grammar = this._prism?.languages[language];
+        if(grammar && (language === "javascript" || language === "typescript")){
+            // Match the documentation's class and browser-global colors without changing shared grammars.
+            const classes = grammar["class-name"];
+            grammar = {
+                ...grammar,
+                "class-name": [
+                    ...(Array.isArray(classes) ? classes : classes ? [classes] : []),
+                    { pattern: /\b[A-Z][\w$]*(?=\s*\.)/ },
+                ],
+                "builtin-variable": /\b(?:document|window|console|navigator|globalThis)\b/,
+            };
+        }
+        if(this.options.highlight && grammar)
+            this._code.innerHTML = this._prism.highlight(this.options.code, grammar, language);
+        else
+            this._code.textContent = this.options.code;
+    }
+}

package/components/code-card/codeCardSpec.js

@@ -0,0 +1,159 @@
+describe("CodeCard", function(){
+    let host;
+    let instance;
+    let clipboard;
+    let writeText;
+
+    beforeEach(function(){
+        host = document.createElement("div");
+        host.innerHTML = '<pre><code class="language-javascript">const answer = 42;</code></pre>';
+        document.body.append(host);
+        clipboard = Object.getOwnPropertyDescriptor(navigator, "clipboard");
+        writeText = jasmine.createSpy("writeText").and.returnValue(Promise.resolve());
+        Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText } });
+    });
+
+    afterEach(function(){
+        instance?.destroy();
+        instance = undefined;
+        host.remove();
+        if(clipboard) Object.defineProperty(navigator, "clipboard", clipboard);
+        else delete navigator.clipboard;
+    });
+
+    it("renders source as text without executing HTML", async function(){
+        const code = '<img src=x onerror="window.__codeExecuted=true">\n<script>alert(1)</script>';
+        instance = M.CodeCard.init(host, { code, language: "html", highlight: false });
+        await instance.ready;
+        expect(host.querySelector("pre code").textContent).toBe(code);
+        expect(host.querySelector("img, script")).toBeNull();
+        expect(instance.getCode()).toBe(code);
+    });
+
+    it("copies original source including indentation and trailing newline", async function(){
+        const code = "first\n    second\n";
+        instance = M.CodeCard.init(host, { code, title: "Do not copy this title", highlight: false });
+        await instance.ready;
+        expect(await instance.copy()).toBeTrue();
+        expect(writeText).toHaveBeenCalledOnceWith(code);
+        expect(host.querySelector('[role="status"]').textContent).toBe("Copied!");
+        expect(host.querySelector("crazy-button i").textContent).toBe("check");
+        expect(host.querySelector("button").getAttribute("aria-label")).toBe("Copied!");
+    });
+
+    it("hides and disables the copy action when requested", async function(){
+        host.dataset.codeCopy = "false";
+        instance = M.CodeCard.init(host, { highlight: false });
+        await instance.ready;
+        expect(host.querySelector("crazy-button").hidden).toBeTrue();
+        expect(await instance.copy()).toBeFalse();
+        expect(writeText).not.toHaveBeenCalled();
+        await instance.update({ copy: true });
+        expect(host.querySelector("crazy-button").hidden).toBeFalse();
+    });
+
+    it("reports clipboard errors instead of announcing success", async function(){
+        writeText.and.returnValue(Promise.reject(new Error("Permission denied")));
+        instance = M.CodeCard.init(host, { highlight: false });
+        await instance.ready;
+        expect(await instance.copy()).toBeFalse();
+        expect(host.querySelector('[role="status"]').textContent).toBe("Unable to copy");
+        expect(host.querySelector("button").disabled).toBeFalse();
+        expect(host.querySelector("crazy-button i").textContent).toBe("error_outline");
+        expect(host.querySelector("button").getAttribute("aria-label")).toBe("Unable to copy");
+    });
+
+    it("updates custom content and treats unknown language names as plain text", async function(){
+        instance = M.CodeCard.init(host, { highlight: false });
+        await instance.ready;
+        await instance.update({ code: "custom => value", language: "custom", title: "My format", copy: false });
+        expect(host.querySelector("pre code").textContent).toBe("custom => value");
+        expect(host.querySelector("pre").getAttribute("aria-label")).toBe("My format");
+        await instance.update({ title: "" });
+        expect(host.querySelector("pre").getAttribute("aria-label")).toBe("CUSTOM code");
+        expect(host.querySelector("crazy-button").hidden).toBeTrue();
+    });
+
+    it("restores the authored DOM and listeners on destroy", async function(){
+        const original = host.firstElementChild;
+        instance = M.CodeCard.init(host, { highlight: false });
+        await instance.ready;
+        const button = host.querySelector("button");
+        instance.destroy();
+        instance = undefined;
+        button.click();
+        expect(writeText).not.toHaveBeenCalled();
+        expect(host.firstElementChild).toBe(original);
+        expect(host.classList.contains("code-card")).toBeFalse();
+        expect(M.CodeCard.getInstance(host)).toBeUndefined();
+    });
+
+    it("highlights JavaScript while preserving the source text", async function(){
+        instance = M.CodeCard.init(host);
+        await instance.ready;
+        expect(host.querySelectorAll(".token").length).toBeGreaterThan(0);
+        expect(host.querySelector("pre code").textContent).toBe("const answer = 42;");
+    });
+
+    it("keeps a replacement instance intact when an old owner destroys twice", async function(){
+        const old = M.CodeCard.init(host, { highlight: false });
+        await old.ready;
+        instance = M.CodeCard.init(host, { code: "replacement", highlight: false });
+        await instance.ready;
+        old.destroy();
+        expect(M.CodeCard.getInstance(host)).toBe(instance);
+        expect(host.querySelector("pre code").textContent).toBe("replacement");
+    });
+
+    it("does not mutate restored markup when a pending copy completes", async function(){
+        let resolve;
+        writeText.and.returnValue(new Promise(done => { resolve = done; }));
+        instance = M.CodeCard.init(host, { highlight: false });
+        await instance.ready;
+        const copying = instance.copy();
+        instance.destroy();
+        instance = undefined;
+        const restored = host.innerHTML;
+        resolve();
+        await copying;
+        expect(host.innerHTML).toBe(restored);
+    });
+
+    it("uses CrazyButton activation and restores its icon after success feedback", async function(){
+        jasmine.clock().install();
+        try {
+            instance = M.CodeCard.init(host, { highlight: false });
+            await instance.ready;
+            const button = host.querySelector("crazy-button");
+            const copied = new Promise(resolve => host.addEventListener("codecopy", resolve, { once: true }));
+            button.querySelector("button").click();
+            await copied;
+            expect(writeText).toHaveBeenCalledTimes(1);
+            expect(button.querySelector("i").textContent).toBe("check");
+            jasmine.clock().tick(2000);
+            await button.updateComplete;
+            expect(button.querySelector("i").textContent).toBe("content_copy");
+            expect(button.querySelector("button").getAttribute("aria-label")).toBe("Copy code");
+            expect(host.querySelector('[role="status"]').textContent).toBe("");
+        }finally{
+            jasmine.clock().uninstall();
+        }
+    });
+
+    it("does not show stale success when the source changes during a copy", async function(){
+        let resolve;
+        writeText.and.returnValue(new Promise(done => { resolve = done; }));
+        instance = M.CodeCard.init(host, { highlight: false });
+        await instance.ready;
+        const copying = instance.copy();
+        expect(await instance.copy()).toBeFalse();
+        await instance.update({ code: "new source" });
+        resolve();
+        await copying;
+        expect(writeText).toHaveBeenCalledTimes(1);
+        expect(host.querySelector("crazy-button i").textContent).toBe("content_copy");
+        expect(host.querySelector("button").getAttribute("aria-label")).toBe("Copy code");
+        expect(host.querySelector('[role="status"]').textContent).toBe("");
+    });
+
+});

package/components/popup/popup-stepper.scss

@@ -49,6 +49,10 @@
         animation: popup-stepper-spin 1s linear infinite;
       }
     }
+    &[data-state='waiting'] .popup-stepper-marker {
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
     &[data-state='complete'] .popup-stepper-marker {
       background: var(--md-sys-color-primary);
       color: var(--md-sys-color-on-primary);
@@ -70,6 +74,9 @@
     color: var(--md-sys-color-on-surface-variant);
     font-weight: 600;
   }
+  .popup-stepper-content:not(:empty) { margin-top: 16px; }
+  .popup-stepper-validation { color: var(--md-sys-color-error); }
+  .popup-stepper-content .input-field { margin-block: 16px 8px; }
   .popup-stepper-state { display: block; font-size: .75rem; }
   .popup-stepper-status { font-size: .875rem; color: var(--md-sys-color-on-surface-variant); }
 }

package/components/popup/popup-stepper.ts

@@ -1,6 +1,14 @@
 import type Swal from 'sweetalert2';
 import type { PopupOptions, PopupResult } from './popup';
 
+export interface PopupStepConfirmationOptions<T> {
+  /** Custom DOM content. Insert user-provided text using textContent. */
+  content: HTMLElement;
+  confirmButtonText?: string;
+  /** Read and validate the content. Throw an Error to stay on this step. */
+  readValue(): T | Promise<T>;
+}
+
 export interface PopupStepContext<T = unknown> {
   /** Aborted when the popup closes. Pass this signal to fetch or other work. */
   signal: AbortSignal;
@@ -8,6 +16,8 @@ export interface PopupStepContext<T = unknown> {
   results: readonly T[];
   /** Update the active step's plain-text progress message. */
   setMessage(message: string): void;
+  /** Pause for user confirmation. Rejected when the popup closes. */
+  waitForConfirmation<R>(options: PopupStepConfirmationOptions<R>): Promise<R>;
 }
 export interface PopupStep<T = unknown> {
   title: string;
@@ -67,10 +77,12 @@ export async function runPopupSteps<T>(
     state.textContent = 'Waiting';
     const message = document.createElement('p');
     message.textContent = step.description || '';
-    body.append(title, state, message);
+    const content = document.createElement('div');
+    content.className = 'popup-stepper-content';
+    body.append(title, state, message, content);
     row.append(marker, body);
     list.append(row);
-    return { row, marker, state, message };
+    return { row, marker, state, message, content };
   });
   const status = document.createElement('p');
   status.className = 'popup-stepper-status';
@@ -81,6 +93,8 @@ export async function runPopupSteps<T>(
   let popup: HTMLElement | undefined;
   let running = false;
   let complete = false;
+  let confirmation: { submit(): Promise<void> } | undefined;
+  let activeStep: symbol | undefined;
   const alive = () => !controller.signal.aborted && popup === swal.getPopup();
   const run = async () => {
     if (running || complete || !alive()) return;
@@ -92,6 +106,9 @@ export async function runPopupSteps<T>(
         const index = results.length;
         const step = steps[index];
         const view = rows[index];
+        const token = activeStep = Symbol();
+        const current = () => alive() && running && activeStep === token;
+        view.content.replaceChildren();
         view.row.dataset.state = 'active';
         view.row.setAttribute('aria-current', 'step');
         view.marker.textContent = String(index + 1);
@@ -102,7 +119,63 @@ export async function runPopupSteps<T>(
           signal: controller.signal,
           results: Object.freeze([...results]),
           setMessage(message) {
-            if (alive() && running && results.length === index) view.message.textContent = message;
+            if (current()) view.message.textContent = message;
+          },
+          waitForConfirmation<R>(request: PopupStepConfirmationOptions<R>): Promise<R> {
+            if (!current()) return Promise.reject(new DOMException('Cancelled', 'AbortError'));
+            if (confirmation) return Promise.reject(new Error('Await the current confirmation before requesting another.'));
+            return new Promise<R>((resolve, reject) => {
+              let validating = false;
+              const error = document.createElement('p');
+              error.className = 'popup-stepper-validation';
+              error.setAttribute('role', 'alert');
+              error.hidden = true;
+              view.content.replaceChildren(request.content, error);
+              view.row.dataset.state = 'waiting';
+              view.state.textContent = 'Waiting for you';
+              status.textContent = `Step ${index + 1} of ${steps.length}: ${step.title}. Confirm to continue.`;
+              list.removeAttribute('aria-busy');
+              const cleanup = () => {
+                controller.signal.removeEventListener('abort', abort);
+                if (confirmation === pending) confirmation = undefined;
+              };
+              const abort = () => {
+                cleanup();
+                reject(new DOMException('Cancelled', 'AbortError'));
+              };
+              const pending = {
+                async submit() {
+                  if (validating || !current()) return;
+                  validating = true;
+                  error.hidden = true;
+                  swal.getConfirmButton()?.setAttribute('disabled', '');
+                  try {
+                    const value = await request.readValue();
+                    if (!current()) return;
+                    cleanup();
+                    view.row.dataset.state = 'active';
+                    view.state.textContent = 'In progress';
+                    list.setAttribute('aria-busy', 'true');
+                    swal.update({ showConfirmButton: false });
+                    resolve(value);
+                  } catch (reason) {
+                    if (!current()) return;
+                    error.textContent = reason instanceof Error ? reason.message : String(reason);
+                    error.hidden = false;
+                    view.content.querySelector<HTMLElement>('[aria-invalid="true"], :invalid')?.focus();
+                  } finally {
+                    validating = false;
+                    if (alive()) swal.getConfirmButton()?.removeAttribute('disabled');
+                  }
+                }
+              };
+              confirmation = pending;
+              controller.signal.addEventListener('abort', abort, { once: true });
+              swal.update({ showConfirmButton: true, confirmButtonText: request.confirmButtonText || 'Continue' });
+              const focusable = 'input:not([type="hidden"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), button:not(:disabled), [tabindex="0"]';
+              const focus = request.content.matches(focusable) ? request.content : view.content.querySelector<HTMLElement>(focusable);
+              (focus || swal.getConfirmButton())?.focus();
+            });
           }
         });
         if (!alive()) return;
@@ -112,6 +185,7 @@ export async function runPopupSteps<T>(
         view.row.removeAttribute('aria-current');
         view.marker.textContent = '✓';
         view.state.textContent = 'Complete';
+        if (index < steps.length - 1) view.content.replaceChildren();
       }
       if (!alive()) return;
       complete = true;
@@ -133,6 +207,7 @@ export async function runPopupSteps<T>(
         confirmButtonText: options.retryButtonText || 'Retry step' });
       swal.getConfirmButton()?.focus();
     } finally {
+      activeStep = undefined;
       running = false;
       list.removeAttribute('aria-busy');
     }
@@ -151,6 +226,10 @@ export async function runPopupSteps<T>(
       willClose() { controller.abort(); },
       didDestroy() { controller.abort(); },
       preConfirm() {
+        if (confirmation) {
+          void confirmation.submit();
+          return false;
+        }
         if (complete) return [...results];
         void run();
         return false;