kmaterialize 2.3.3-1.0.34 → 2.3.3-1.0.36

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

@@ -0,0 +1,90 @@
+// 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 {
+            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,170 @@
+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(){
+        // Load this test's peer explicitly instead of depending on Editor test order.
+        if(!window.Prism){
+            await new Promise((resolve, reject) => {
+                const script = document.createElement("script");
+                script.dataset.manual = "";
+                script.src = "/__spec__/node_modules/prismjs/prism.js";
+                script.onload = resolve;
+                script.onerror = () => reject(new Error("Failed to load Prism"));
+                document.head.append(script);
+            });
+        }
+        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/editor/editorSpec.js

@@ -273,7 +273,9 @@ describe('Editor Handlebars workspace', function () {
       script.onload = () => resolve(); script.onerror = () => reject(new Error('Failed to load Prism'));
       document.head.append(script);
     });
-    await load('prism.js'); await load('components/prism-markup-templating.js'); await load('components/prism-handlebars.js');
+    // Preserve the Prism instance already used by other components and the peer cache.
+    if (!window.Prism) await load('prism.js');
+    await load('components/prism-markup-templating.js'); await load('components/prism-handlebars.js');
     const template = '<h1>{{name}}</h1>\n<style>h1 { color: red; }</style>\n' + 'x'.repeat(200);
     await start({ template, data: { name: 'Ada' }, highlight: true });
     const input = host.querySelector('textarea'), mirror = host.querySelector('.editor-highlight');

package/components/extensions/web/crazy-button.ts

@@ -33,6 +33,7 @@ export default class CrazyButton extends Kmcomponent {
     'icon-position': string('right', ['left', 'right']),
     'color-primary': string(), 'color-secondary': string(),
     'data-view': string(), 'aria-current': string(),
+    'aria-controls': string(), 'aria-pressed': string(),
     href: string(), target: string('_self', ['_self', '_blank']),
     variant: string('', ['', 'filled', 'tonal', 'outlined', 'elevated', 'text', 'standard']),
     disabled: boolean(), toggle: boolean(), pressed: boolean(),
@@ -84,7 +85,8 @@ export default class CrazyButton extends Kmcomponent {
       ${a['aria-label'] || iconOnly ? `aria-label="${escape(a['aria-label'] || a.label || a['icon-text'] || 'Button')}"` : ''}
       ${a['data-view'] ? `data-view="${escape(a['data-view'])}"` : ''}
       ${a['aria-current'] ? `aria-current="${escape(a['aria-current'])}"` : ''}
-      ${a.toggle ? `aria-pressed="${a.pressed}"` : ''} ${menu ? menuAttrs : ''}>${content}</${tag}>`;
+      ${a.toggle ? `aria-pressed="${a.pressed}"` : a['aria-pressed'] ? `aria-pressed="${escape(a['aria-pressed'])}"` : ''}
+      ${a['aria-controls'] && !menu ? `aria-controls="${escape(a['aria-controls'])}"` : ''} ${menu ? menuAttrs : ''}>${content}</${tag}>`;
     return a.split && a['menu-target']
       ? `<span class="btn-split">${button}<button type="button" class="${escape(classes)} btn-icon btn-menu-trigger dropdown-trigger no-autoinit" ${menuAttrs} aria-label="${escape(a['menu-label'])}" ${a.disabled ? 'disabled' : ''}><i class="material-icons" aria-hidden="true">arrow_drop_down</i></button></span>`
       : button;

package/components/password-input/password-input.ts

@@ -31,12 +31,12 @@ export class PasswordInput extends Component<PasswordInputOptions> {
         this._suffixEl = this.el.parentElement?.querySelector<HTMLElement>('[data-password-toggle-icon]') ?? null;
 
         if (this._suffixEl) {
-            for (const name of ['type', 'role', 'tabindex', 'aria-label', 'aria-pressed', 'aria-controls', 'aria-disabled', 'disabled'])
+            for (const name of ['type', 'role', 'tabindex', 'aria-label', 'aria-pressed', 'aria-controls', 'aria-disabled', 'disabled', 'icon-text'])
                 this._originalAttributes.set(name, this._suffixEl.getAttribute(name));
 
             if (this._suffixEl instanceof HTMLButtonElement) {
                 this._suffixEl.type = 'button';
-            } else {
+            } else if (!this._isCrazyButton()) {
                 this._suffixEl.setAttribute('role', 'button');
                 this._suffixEl.tabIndex = 0;
             }
@@ -96,6 +96,10 @@ export class PasswordInput extends Component<PasswordInputOptions> {
         this._syncState();
     }
 
+    private _isCrazyButton(): boolean {
+        return this._suffixEl?.matches('crazy-button, regular-btn') ?? false;
+    }
+
     private _syncState() {
         const visible = this.el.type === 'text';
         const disabled = this.el.matches(':disabled');
@@ -104,8 +108,13 @@ export class PasswordInput extends Component<PasswordInputOptions> {
         this._suffixEl?.setAttribute('aria-pressed', String(visible));
         this._suffixEl?.setAttribute('aria-disabled', String(disabled));
         if (this._suffixEl instanceof HTMLButtonElement) this._suffixEl.disabled = disabled;
-        const icon = this._suffixEl?.querySelector('i');
-        if (icon) icon.textContent = visible ? 'visibility_off' : 'visibility';
+        if (this._isCrazyButton()) {
+            this._suffixEl?.toggleAttribute('disabled', disabled);
+            this._suffixEl?.setAttribute('icon-text', visible ? 'visibility_off' : 'visibility');
+        } else {
+            const icon = this._suffixEl?.querySelector('i');
+            if (icon) icon.textContent = visible ? 'visibility_off' : 'visibility';
+        }
     }
 
     private _handleToggleClick = (event: MouseEvent) => {
@@ -115,7 +124,7 @@ export class PasswordInput extends Component<PasswordInputOptions> {
 
     private _handleToggleKeydown = (event: KeyboardEvent) => {
         // Native buttons already dispatch clicks for Enter and Space.
-        if (this._suffixEl instanceof HTMLButtonElement || !['Enter', ' '].includes(event.key)) return;
+        if (this._suffixEl instanceof HTMLButtonElement || this._isCrazyButton() || !['Enter', ' '].includes(event.key)) return;
         event.preventDefault();
         this.toggle();
     };

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); }
 }