kmaterialize 2.3.3-1.0.33 → 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/password-input/password-input.ts

@@ -1,72 +1,122 @@
 import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface PasswordInputOptions extends BaseOptions {}
+export interface PasswordInputOptions extends BaseOptions {
+    /** Accessible name when the password is hidden. */
+    showLabel: string;
+    /** Accessible name when the password is visible. */
+    hideLabel: string;
+}
+
+type PasswordInputElement = HTMLInputElement & { M_PasswordInput?: PasswordInput };
 
-const _defaults: PasswordInputOptions = {};
+const _defaults: PasswordInputOptions = {
+    showLabel: 'Show password',
+    hideLabel: 'Hide password'
+};
 
-// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Password.ts
-// Show/hide toggle for a password input - no third-party dependency, just
-// Materialize's own .prefix/.suffix icon-slot convention (see
-// components/textfield/_input-fields.scss), so unlike the other new form
-// enhancements in this batch this one needs no peer-loader/dynamic import.
+/**
+ * Show or hide a password with an accessible suffix button.
+ * Existing data-password-toggle-icon wrappers remain supported.
+ */
 export class PasswordInput extends Component<PasswordInputOptions> {
-  declare el: HTMLInputElement;
-  private _suffixEl: HTMLElement | null;
+    declare el: PasswordInputElement;
+    private _suffixEl: HTMLElement | null;
+    private _stateObserver: MutationObserver;
+    private _originalAttributes: Map<string, string | null> = new Map();
+
+    constructor(el: HTMLInputElement, options: Partial<PasswordInputOptions>) {
+        super(el, options, PasswordInput);
+        this.el.M_PasswordInput = this;
+        this.options = { ...PasswordInput.defaults, ...options };
+        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'])
+                this._originalAttributes.set(name, this._suffixEl.getAttribute(name));
+
+            if (this._suffixEl instanceof HTMLButtonElement) {
+                this._suffixEl.type = 'button';
+            } else {
+                this._suffixEl.setAttribute('role', 'button');
+                this._suffixEl.tabIndex = 0;
+            }
+
+            if (this.el.id) this._suffixEl.setAttribute('aria-controls', this.el.id);
+        }
+
+        // Read the actual input type, including an initially visible password.
+        this._syncState();
+        this._suffixEl?.addEventListener('click', this._handleToggleClick);
+        this._suffixEl?.addEventListener('keydown', this._handleToggleKeydown);
+        this._stateObserver = new MutationObserver(() => this._syncState());
+        this._stateObserver.observe(this.el, { attributes: true, attributeFilter: ['type', 'disabled'] });
+        for (let parent = this.el.parentElement; parent; parent = parent.parentElement) {
+            if (parent instanceof HTMLFieldSetElement)
+                this._stateObserver.observe(parent, { attributes: true, attributeFilter: ['disabled'] });
+        }
+    }
 
-  constructor(el: HTMLInputElement, options: Partial<PasswordInputOptions>) {
-    super(el, options, PasswordInput);
-    (this.el as any).M_PasswordInput = this;
+    static get defaults(): PasswordInputOptions {
+        return _defaults;
+    }
 
-    this.options = {
-      ...PasswordInput.defaults,
-      ...options
+    static init(el: HTMLInputElement, options?: Partial<PasswordInputOptions>): PasswordInput;
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<PasswordInputOptions>): PasswordInput[];
+    static init(
+        els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+        options: Partial<PasswordInputOptions> = {}
+    ): PasswordInput | PasswordInput[] {
+        return super.init(els, options, PasswordInput);
+    }
+
+    static getInstance(el: HTMLInputElement): PasswordInput {
+        return (el as PasswordInputElement).M_PasswordInput!;
+    }
+
+    /** Remove listeners and restore the supplied button attributes. */
+    destroy() {
+        this._stateObserver.disconnect();
+        this._suffixEl?.removeEventListener('click', this._handleToggleClick);
+        this._suffixEl?.removeEventListener('keydown', this._handleToggleKeydown);
+        for (const [name, value] of this._originalAttributes) {
+            if (value === null) this._suffixEl?.removeAttribute(name);
+            else this._suffixEl?.setAttribute(name, value);
+        }
+        this.el.M_PasswordInput = undefined;
+    }
+
+    /** Toggle without submitting the form or changing its value or selection. */
+    toggle() {
+        if (this.el.matches(':disabled')) return;
+        const start = this.el.selectionStart;
+        const end = this.el.selectionEnd;
+        const direction = this.el.selectionDirection;
+        this.el.type = this.el.type === 'password' ? 'text' : 'password';
+        if (start !== null && end !== null) this.el.setSelectionRange(start, end, direction ?? undefined);
+        this._syncState();
+    }
+
+    private _syncState() {
+        const visible = this.el.type === 'text';
+        const disabled = this.el.matches(':disabled');
+        this.el.dataset.passwordVisible = visible ? '1' : '0';
+        this._suffixEl?.setAttribute('aria-label', visible ? this.options.hideLabel : this.options.showLabel);
+        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';
+    }
+
+    private _handleToggleClick = (event: MouseEvent) => {
+        event.preventDefault();
+        this.toggle();
     };
 
-    this._suffixEl = this.el.parentElement?.querySelector<HTMLElement>('[data-password-toggle-icon]') ?? null;
-    if (!this.el.dataset.passwordVisible) this.el.dataset.passwordVisible = '0';
-    this._setupEventHandlers();
-  }
-
-  static get defaults(): PasswordInputOptions {
-    return _defaults;
-  }
-
-  static init(el: HTMLInputElement, options?: Partial<PasswordInputOptions>): PasswordInput;
-  static init(
-    els: InitElements<HTMLInputElement | MElement>,
-    options?: Partial<PasswordInputOptions>
-  ): PasswordInput[];
-  static init(
-    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
-    options: Partial<PasswordInputOptions> = {}
-  ): PasswordInput | PasswordInput[] {
-    return super.init(els, options, PasswordInput);
-  }
-
-  static getInstance(el: HTMLInputElement): PasswordInput {
-    return (el as any).M_PasswordInput;
-  }
-
-  destroy() {
-    this._removeEventHandlers();
-    (this.el as any).M_PasswordInput = undefined;
-  }
-
-  _setupEventHandlers() {
-    this._suffixEl?.addEventListener('click', this._handleToggleClick);
-  }
-
-  _removeEventHandlers() {
-    this._suffixEl?.removeEventListener('click', this._handleToggleClick);
-  }
-
-  _handleToggleClick = () => {
-    const visible = this.el.dataset.passwordVisible === '1';
-    this.el.type = visible ? 'password' : 'text';
-    this.el.dataset.passwordVisible = visible ? '0' : '1';
-
-    const iconEl = this._suffixEl?.querySelector('i');
-    if (iconEl) iconEl.textContent = visible ? 'visibility' : 'visibility_off';
-  };
+    private _handleToggleKeydown = (event: KeyboardEvent) => {
+        // Native buttons already dispatch clicks for Enter and Space.
+        if (this._suffixEl instanceof HTMLButtonElement || !['Enter', ' '].includes(event.key)) return;
+        event.preventDefault();
+        this.toggle();
+    };
 }