kmaterialize 2.3.3-1.0.32 → 2.3.3-1.0.34

package/components/gantt/_gantt.scss

@@ -67,7 +67,7 @@
   }
   .gantt-task-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }
   .gantt-task-detail { color: var(--md-sys-color-on-surface-variant); font-size: 12px; overflow-wrap: anywhere; }
-  .gantt-label.gantt-selectable-label { padding-left: calc(24px + var(--checkbox-size)); }
+  .gantt-label.gantt-selectable-label { padding-left: calc(30px + var(--checkbox-size)); }
   input.gantt-select { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
   .gantt-row.is-selected .gantt-label { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
   .gantt-row.is-selected .gantt-bar { box-shadow: 0 0 0 2px var(--md-sys-color-primary); }

package/components/gantt/gantt.ts

@@ -390,8 +390,14 @@ export class Gantt extends Component<GanttOptions> {
     const selector = event.target instanceof Element ? event.target.closest<HTMLElement>('[data-gantt-select]') : null;
     if (selector) {
       const id = selector.dataset.ganttSelect;
-      this.setSelectedTaskIds(this._selected.has(id) ? this.getSelectedTaskIds().filter(item => item !== id) : [...this.getSelectedTaskIds(), id]);
-      this._selectionAnchor = id;
+      if (event.shiftKey && this._selectionAnchor) {
+        this._selectForInteraction(id, event);
+      } else {
+        this.setSelectedTaskIds(this._selected.has(id) ? this.getSelectedTaskIds().filter(item => item !== id) : [...this.getSelectedTaskIds(), id]);
+        this._selectionAnchor = id;
+      }
+      // A repeated range may not re-render; undo the native toggle in that case.
+      if (selector instanceof HTMLInputElement) selector.checked = this._selected.has(id);
       return;
     }
     const target = event.target instanceof Element ? event.target.closest<HTMLElement>('[data-gantt-task]') : null;

package/components/gantt/ganttSpec.js

@@ -484,6 +484,27 @@ describe('Gantt multi-task selection', function () {
     expect(host.querySelectorAll('.gantt-row.is-selected').length).toBe(0);
   });
 
+  it('selects inclusive checkbox ranges in either direction and retains the anchor', function () {
+    const checkbox = id => host.querySelector(`[data-gantt-select="${id}"]`);
+    const shiftClick = id => checkbox(id).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, shiftKey: true }));
+    const selection = jasmine.createSpy('selection');
+    chart.options.onSelectionChange = selection;
+    checkbox('m').click();
+    shiftClick('a');
+    expect(chart.getSelectedTaskIds()).toEqual(['a', 'b', 'c', 'm']);
+    expect(host.querySelectorAll('.gantt-select:checked').length).toBe(4);
+    shiftClick('a');
+    expect(checkbox('a').checked).toBeTrue();
+    expect(selection).toHaveBeenCalledTimes(2);
+    shiftClick('c');
+    expect(chart.getSelectedTaskIds()).toEqual(['c', 'm']);
+    chart.setSelectedTaskIds([]);
+    checkbox('a').click();
+    shiftClick('m');
+    expect(chart.getSelectedTaskIds()).toEqual(['a', 'b', 'c', 'm']);
+    expect(chart.getTasks()).toEqual(original);
+  });
+
   it('cancels all previewed dates together and retains selection through zoom and views', function () {
     chart.setSelectedTaskIds(['a', 'b']);
     pointer('pointerdown', 400, button('b')); pointer('pointermove', 496); key('Escape');

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.32 (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.32 (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)
 */
@@ -14404,7 +14404,7 @@ button.btn-floating {
   overflow-wrap: anywhere;
 }
 .gantt .gantt-label.gantt-selectable-label {
-  padding-left: calc(24px + var(--checkbox-size));
+  padding-left: calc(30px + var(--checkbox-size));
 }
 .gantt input.gantt-select {
   position: absolute;