kmaterialize 2.3.3-1.0.25 → 2.3.3-1.0.26

package/components/air-datepicker/air-datepicker.ts

@@ -111,8 +111,8 @@ export class AirDatepickerField extends Component<AirDatepickerFieldOptions> {
 
     const dataset = this.el.dataset;
     const builtInLocale = dataset.dateLang === 'fr-FR'
-      ? (await import('air-datepicker/locale/fr')).default
-      : (await import('air-datepicker/locale/en')).default;
+      ? (await import('air-datepicker/locale/fr.js')).default
+      : (await import('air-datepicker/locale/en.js')).default;
     const pickerOptions: AirDatepickerOptions = {
       dateFormat: dataset.dateFormat || 'yyyy-MM-dd',
       autoClose: dataset.dateAutoClose !== 'false',

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

@@ -4,6 +4,15 @@
   max-width: 100%;
   > .btn, > .btn-split > .btn { position: relative; }
   .btn > img { width: var(--button-icon); height: var(--button-icon); object-fit: contain; }
+  // Image-only buttons fill the control and follow its round or square shape.
+  .btn.btn-icon[part="button"] > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    object-fit: cover;
+    border-radius: inherit;
+  }
   .btn > i { color: inherit; flex-shrink: 0; }
   slot { display: contents; }
   &[size="small"] .btn { --button-height: 30px; }

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

@@ -9,6 +9,14 @@ const boolean = () => ({ type: 'boolean' as const, default: false, reflect: true
 const escape = (value: unknown) => String(value).replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]!);
 const sizes = { small: 'xs', normal: 'sm', large: 'md', 'extra-large': 'lg' };
 
+// Palette names from sass/_colors.scss take precedence over CSS named colors.
+const paletteColors = new Set([
+  'materialize-red', 'red', 'pink', 'purple', 'deep-purple', 'indigo',
+  'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime',
+  'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'blue-grey',
+  'grey', 'gold', 'black', 'white', 'transparent',
+]);
+
 /** RegularBtn's attribute API, backed by the renamed Crazycomponent2 runtime. */
 export default class CrazyButton extends Kmcomponent {
   static properties: KmcomponentProperties = {
@@ -123,7 +131,8 @@ export default class CrazyButton extends Kmcomponent {
       button.removeEventListener('click', click);
     });
     const trigger = this.querySelector<HTMLElement>('.dropdown-trigger');
-    const menu = document.getElementById(String(a['menu-target']));
+    const menuTarget = String(a['menu-target'] ?? '');
+    const menu = trigger && menuTarget ? document.getElementById(menuTarget) : null;
     if (trigger && menu && !a.disabled) {
       const parent = menu.parentNode;
       const next = menu.nextSibling;
@@ -146,8 +155,9 @@ export default class CrazyButton extends Kmcomponent {
   private restoreFocus = false;
 
   private applyColor(element: HTMLElement, color: string, foreground: boolean): void {
-    if (!color.trim() || this.getProperty('disabled')) return;
-    if (CSS.supports('color', color)) {
+    color = color.trim();
+    if (!color || this.getProperty('disabled')) return;
+    if (!paletteColors.has(color) && CSS.supports('color', color)) {
       element.style.setProperty(foreground ? 'color' : 'background-color', color);
       if (foreground) element.style.borderColor = color;
     } else {

package/components/popup/popup.ts

@@ -105,6 +105,12 @@ export class Popup {
     return result as PopupResult<Awaited<T>>;
   }
 
+  /** Confirm the current dialog, including its validation and preConfirm flow. */
+  static async clickConfirm(): Promise<void> {
+    const swal = await Popup._load();
+    swal.clickConfirm();
+  }
+
   /** Close the current SweetAlert2 dialog, resolving its pending result. */
   static async close(): Promise<void> {
     const swal = await Popup._load();

package/components/popup/popupSpec.js

@@ -118,6 +118,23 @@ describe('Popup', function () {
     expect((await result).value).toBe('Preview ready');
   });
 
+  it('confirms programmatically through validation and preConfirm', async function () {
+    const { el, result } = await open({
+      input: 'text',
+      inputValidator: value => value.trim() ? undefined : 'Enter a name.',
+      preConfirm: value => value.toUpperCase()
+    });
+    await M.Popup.clickConfirm();
+    await new Promise(resolve => setTimeout(resolve, 20));
+    expect(el.querySelector('.swal2-validation-message').textContent).toBe('Enter a name.');
+    expect(el.isConnected).toBeTrue();
+    el.querySelector('.swal2-input').value = 'Studio';
+    await M.Popup.clickConfirm();
+    const response = await result;
+    expect(response.isConfirmed).toBeTrue();
+    expect(response.value).toBe('STUDIO');
+  });
+
   it('closes a dialog programmatically and resolves its pending result', async function () {
     const { el, result } = await open();
     await M.Popup.close();

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

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.25 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.26 (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.25 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.26 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -21792,6 +21792,17 @@ div.suffix.suffix-tomselect {
   -o-object-fit: contain;
      object-fit: contain;
 }
+:is(crazy-button, regular-btn) .btn.btn-icon[part=button] > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: inherit;
+}
 :is(crazy-button, regular-btn) .btn > i {
   color: inherit;
   -webkit-flex-shrink: 0;