kmaterialize 2.3.3-1.0.33 → 2.3.3-1.0.34

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

package/components/password-input/passwordSpec.js

@@ -0,0 +1,110 @@
+describe('PasswordInput', function() {
+    let fixture;
+    let input;
+    let button;
+    let instance;
+
+    beforeEach(function() {
+        fixture = document.createElement('form');
+        fixture.innerHTML = '<div class="input-field"><input id="password-test" type="password" value="example-secret" data-password-toggle><button class="suffix btn-flat p-0 transparent" data-password-toggle-icon><i class="material-icons">visibility</i></button></div>';
+        document.body.appendChild(fixture);
+        input = fixture.querySelector('input');
+        button = fixture.querySelector('button');
+        instance = M.PasswordInput.init(input);
+    });
+
+    afterEach(function() {
+        M.PasswordInput.getInstance(input)?.destroy();
+        fixture.remove();
+    });
+
+    it('toggles the supplied suffix button without submitting or changing the value', function() {
+        const submit = jasmine.createSpy('submit');
+        fixture.addEventListener('submit', submit);
+        input.setSelectionRange(2, 5);
+        expect(button.type).toBe('button');
+        expect(button.getAttribute('aria-controls')).toBe(input.id);
+        expect(button.getAttribute('aria-label')).toBe('Show password');
+        button.click();
+        expect(input.type).toBe('text');
+        expect(input.value).toBe('example-secret');
+        expect(input.selectionStart).toBe(2);
+        expect(input.selectionEnd).toBe(5);
+        expect(button.getAttribute('aria-label')).toBe('Hide password');
+        expect(button.getAttribute('aria-pressed')).toBe('true');
+        expect(button.querySelector('i').textContent).toBe('visibility_off');
+        button.click();
+        expect(input.type).toBe('password');
+        expect(input.dataset.passwordVisible).toBe('0');
+        expect(button.getAttribute('aria-pressed')).toBe('false');
+        expect(submit).not.toHaveBeenCalled();
+    });
+
+    it('does not toggle a disabled input and synchronizes the button', async function() {
+        input.disabled = true;
+        instance.toggle();
+        await Promise.resolve();
+        expect(input.type).toBe('password');
+        expect(button.disabled).toBeTrue();
+        input.disabled = false;
+        await Promise.resolve();
+        expect(button.disabled).toBeFalse();
+    });
+
+    it('follows a disabled fieldset', async function() {
+        instance.destroy();
+        const fieldset = document.createElement('fieldset');
+        fixture.appendChild(fieldset);
+        fieldset.appendChild(input.parentElement);
+        instance = M.PasswordInput.init(input);
+        fieldset.disabled = true;
+        await Promise.resolve();
+        expect(button.disabled).toBeTrue();
+        instance.toggle();
+        expect(input.type).toBe('password');
+        fieldset.disabled = false;
+        await Promise.resolve();
+        expect(button.disabled).toBeFalse();
+    });
+
+    it('uses the actual type for initially visible passwords and custom labels', function() {
+        instance.destroy();
+        input.type = 'text';
+        instance = M.PasswordInput.init(input, { showLabel: 'Afficher', hideLabel: 'Masquer' });
+        expect(button.getAttribute('aria-label')).toBe('Masquer');
+        button.click();
+        expect(input.type).toBe('password');
+        expect(button.getAttribute('aria-label')).toBe('Afficher');
+    });
+
+    it('keeps readonly passwords revealable', function() {
+        input.readOnly = true;
+        button.click();
+        expect(input.type).toBe('text');
+        expect(input.readOnly).toBeTrue();
+    });
+
+    it('reinitializes without duplicate listeners and destroys cleanly', function() {
+        instance = M.PasswordInput.init(input);
+        button.click();
+        expect(input.type).toBe('text');
+        instance.destroy();
+        button.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(input.type).toBe('text');
+        expect(M.PasswordInput.getInstance(input)).toBeUndefined();
+        expect(button.hasAttribute('aria-pressed')).toBeFalse();
+    });
+
+    it('supports keyboard activation on legacy suffix wrappers', function() {
+        instance.destroy();
+        button.outerHTML = '<div data-password-toggle-icon><i>visibility</i></div>';
+        button = fixture.querySelector('[data-password-toggle-icon]');
+        instance = M.PasswordInput.init(input);
+        expect(button.getAttribute('role')).toBe('button');
+        expect(button.tabIndex).toBe(0);
+        button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+        expect(input.type).toBe('text');
+        button.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }));
+        expect(input.type).toBe('password');
+    });
+});

package/dist/css/materialize.colors.min.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.33 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.34 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */

package/dist/css/materialize.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.33 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.34 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */

package/dist/css/materialize.min.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.33 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.34 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */

package/dist/js/materialize.cjs.js

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.33 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.34 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -10487,25 +10487,46 @@ class Toolbar extends Component {
     }
 }
 
-const _defaults$9 = {};
-// @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.
+const _defaults$9 = {
+    showLabel: 'Show password',
+    hideLabel: 'Hide password'
+};
+/**
+ * Show or hide a password with an accessible suffix button.
+ * Existing data-password-toggle-icon wrappers remain supported.
+ */
 class PasswordInput extends Component {
     _suffixEl;
+    _stateObserver;
+    _originalAttributes = new Map();
     constructor(el, options) {
         super(el, options, PasswordInput);
         this.el.M_PasswordInput = this;
-        this.options = {
-            ...PasswordInput.defaults,
-            ...options
-        };
+        this.options = { ...PasswordInput.defaults, ...options };
         this._suffixEl = this.el.parentElement?.querySelector('[data-password-toggle-icon]') ?? null;
-        if (!this.el.dataset.passwordVisible)
-            this.el.dataset.passwordVisible = '0';
-        this._setupEventHandlers();
+        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'] });
+        }
     }
     static get defaults() {
         return _defaults$9;
@@ -10516,23 +10537,54 @@ class PasswordInput extends Component {
     static getInstance(el) {
         return el.M_PasswordInput;
     }
+    /** Remove listeners and restore the supplied button attributes. */
     destroy() {
-        this._removeEventHandlers();
+        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;
     }
-    _setupEventHandlers() {
-        this._suffixEl?.addEventListener('click', this._handleToggleClick);
+    /** 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();
     }
-    _removeEventHandlers() {
-        this._suffixEl?.removeEventListener('click', this._handleToggleClick);
+    _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';
     }
-    _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';
+    _handleToggleClick = (event) => {
+        event.preventDefault();
+        this.toggle();
+    };
+    _handleToggleKeydown = (event) => {
+        // Native buttons already dispatch clicks for Enter and Space.
+        if (this._suffixEl instanceof HTMLButtonElement || !['Enter', ' '].includes(event.key))
+            return;
+        event.preventDefault();
+        this.toggle();
     };
 }
 
@@ -15496,7 +15548,7 @@ class Editor {
     }
 }
 
-const version = '2.3.3-1.0.33';
+const version = '2.3.3-1.0.34';
 /**
  * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
  * class in v2 with no bare functional equivalent of its own.

package/dist/js/materialize.d.ts

@@ -2641,19 +2641,35 @@ declare class Toolbar extends Component<ToolbarOptions> {
 }
 
 interface PasswordInputOptions extends BaseOptions$1 {
+    /** Accessible name when the password is hidden. */
+    showLabel: string;
+    /** Accessible name when the password is visible. */
+    hideLabel: string;
 }
+type PasswordInputElement = HTMLInputElement & {
+    M_PasswordInput?: PasswordInput;
+};
+/**
+ * Show or hide a password with an accessible suffix button.
+ * Existing data-password-toggle-icon wrappers remain supported.
+ */
 declare class PasswordInput extends Component<PasswordInputOptions> {
-    el: HTMLInputElement;
+    el: PasswordInputElement;
     private _suffixEl;
+    private _stateObserver;
+    private _originalAttributes;
     constructor(el: HTMLInputElement, options: Partial<PasswordInputOptions>);
     static get defaults(): PasswordInputOptions;
     static init(el: HTMLInputElement, options?: Partial<PasswordInputOptions>): PasswordInput;
     static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<PasswordInputOptions>): PasswordInput[];
     static getInstance(el: HTMLInputElement): PasswordInput;
+    /** Remove listeners and restore the supplied button attributes. */
     destroy(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _handleToggleClick: () => void;
+    /** Toggle without submitting the form or changing its value or selection. */
+    toggle(): void;
+    private _syncState;
+    private _handleToggleClick;
+    private _handleToggleKeydown;
 }
 
 interface NumberInputOptions extends BaseOptions$1 {
@@ -4027,7 +4043,7 @@ declare class Editor {
     destroy(): void;
 }
 
-declare const version = "2.3.3-1.0.33";
+declare const version = "2.3.3-1.0.34";
 /**
  * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
  * class in v2 with no bare functional equivalent of its own.

package/dist/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.33 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.34 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -10488,25 +10488,46 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$9 = {};
-    // @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.
+    const _defaults$9 = {
+        showLabel: 'Show password',
+        hideLabel: 'Hide password'
+    };
+    /**
+     * Show or hide a password with an accessible suffix button.
+     * Existing data-password-toggle-icon wrappers remain supported.
+     */
     class PasswordInput extends Component {
         _suffixEl;
+        _stateObserver;
+        _originalAttributes = new Map();
         constructor(el, options) {
             super(el, options, PasswordInput);
             this.el.M_PasswordInput = this;
-            this.options = {
-                ...PasswordInput.defaults,
-                ...options
-            };
+            this.options = { ...PasswordInput.defaults, ...options };
             this._suffixEl = this.el.parentElement?.querySelector('[data-password-toggle-icon]') ?? null;
-            if (!this.el.dataset.passwordVisible)
-                this.el.dataset.passwordVisible = '0';
-            this._setupEventHandlers();
+            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'] });
+            }
         }
         static get defaults() {
             return _defaults$9;
@@ -10517,23 +10538,54 @@ var M = (function (exports) {
         static getInstance(el) {
             return el.M_PasswordInput;
         }
+        /** Remove listeners and restore the supplied button attributes. */
         destroy() {
-            this._removeEventHandlers();
+            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;
         }
-        _setupEventHandlers() {
-            this._suffixEl?.addEventListener('click', this._handleToggleClick);
+        /** 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();
         }
-        _removeEventHandlers() {
-            this._suffixEl?.removeEventListener('click', this._handleToggleClick);
+        _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';
         }
-        _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';
+        _handleToggleClick = (event) => {
+            event.preventDefault();
+            this.toggle();
+        };
+        _handleToggleKeydown = (event) => {
+            // Native buttons already dispatch clicks for Enter and Space.
+            if (this._suffixEl instanceof HTMLButtonElement || !['Enter', ' '].includes(event.key))
+                return;
+            event.preventDefault();
+            this.toggle();
         };
     }
 
@@ -15497,7 +15549,7 @@ var M = (function (exports) {
         }
     }
 
-    const version = '2.3.3-1.0.33';
+    const version = '2.3.3-1.0.34';
     /**
      * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
      * class in v2 with no bare functional equivalent of its own.