kmaterialize 2.3.3-1.0.23 → 2.3.3-1.0.24

package/components/color-input/color-input.ts

@@ -116,7 +116,8 @@ export class ColorInput extends Component<ColorInputOptions> {
   }
 
   _handleInputChange = () => {
-    this.pickr?.setColor(this.el.value);
+    // A programmatic sync must not emit save and recursively dispatch change.
+    this.pickr?.setColor(this.el.value, true);
   };
 
   _handleLabelClick = (event: MouseEvent) => {

package/components/kanban/_kanban.scss

@@ -1,15 +1,20 @@
 .kanban-board {
+  --kanban-zoom: 1;
   --kanban-column-width: 20rem;
   --kanban-gap: 1rem;
   display: flex;
   align-items: flex-start;
-  gap: var(--kanban-gap);
+  gap: calc(var(--kanban-gap) * var(--kanban-zoom));
   width: 100%;
   padding: 0.25rem;
   overflow-x: auto;
   box-sizing: border-box;
   overscroll-behavior-x: contain;
 
+  // Unlike transform, zoom reserves the scaled space in the flex layout.
+  // This also keeps wrapping and the scrollable area aligned with the cards.
+  & > .kanban-column { zoom: var(--kanban-zoom); }
+
   &.kanban-wrap {
     flex-wrap: wrap;
     overflow-x: visible;
@@ -79,8 +84,8 @@
   padding: 1rem;
   border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: 0.75rem;
-  background: var(--md-sys-color-surface);
-  color: var(--md-sys-color-on-surface);
+  background: var(--kanban-card-color, var(--md-sys-color-surface));
+  color: var(--kanban-card-text, var(--md-sys-color-on-surface));
   box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
   cursor: grab;
   user-select: none;

package/components/kanban/kanban.ts

@@ -11,6 +11,20 @@ export interface KanbanOptions extends BaseOptions {
   draggable: boolean;
   /** Called after a card changes column or order. */
   onMove?: (detail: KanbanMoveDetail) => void;
+  zoom?: number;
+  minZoom?: number;
+  maxZoom?: number;
+}
+
+/** Optional per-card appearance overrides. */
+export interface KanbanCardAppearance {
+  /** Exact background color, overriding the Materialize surface color. */
+  color?: string;
+  /** Optional text and icon color. */
+  textColor?: string;
+  /** Optional edge accent color and position. */
+  accent?: string;
+  accentPosition?: 'top' | 'right' | 'bottom' | 'left';
 }
 
 const _defaults: KanbanOptions = {
@@ -19,6 +33,7 @@ const _defaults: KanbanOptions = {
 
 /** A lightweight, dependency-free board for columns of draggable cards. */
 export class Kanban extends Component<KanbanOptions> {
+  private _zoom = 1;
   private _draggedCard: HTMLElement | null = null;
   private _dragSourceColumn: HTMLElement | null = null;
   private _dropPreview: HTMLElement | null = null;
@@ -30,13 +45,15 @@ export class Kanban extends Component<KanbanOptions> {
     if (!card || !this.options.draggable || card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true') return;
     this._draggedCard = card;
     this._dragSourceColumn = card.closest<HTMLElement>('.kanban-column');
-    this._previewHeight = Math.max(64, Math.round(card.getBoundingClientRect().height));
+    this._previewHeight = card.offsetHeight;
     card.classList.add('is-dragging');
     this._dragImage = card.cloneNode(true) as HTMLElement;
     this._dragImage.classList.remove('is-dragging');
     this._dragImage.classList.add('kanban-drag-image');
     this._dragImage.setAttribute('aria-hidden', 'true');
-    this._dragImage.style.width = `${card.getBoundingClientRect().width}px`;
+    this._dragImage.style.width = `${card.offsetWidth}px`;
+    this._dragImage.style.transform = `scale(${this._zoom})`;
+    this._dragImage.style.transformOrigin = 'top left';
     document.body.appendChild(this._dragImage);
     event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
     event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
@@ -81,13 +98,41 @@ export class Kanban extends Component<KanbanOptions> {
   constructor(el: HTMLElement, options: Partial<KanbanOptions>) {
     super(el, options, Kanban);
     this.options = { ...Kanban.defaults, ...options };
+    this._zoom = this._clampZoom(this.options.zoom ?? 1);
     this.el['M_Kanban'] = this;
     this._prepareMarkup();
+    this._applyZoom();
     if (this.options.draggable) this._bindEvents();
   }
 
   static get defaults(): KanbanOptions {
-    return _defaults;
+    return { ..._defaults, zoom: 1, minZoom: 0.5, maxZoom: 2 };
+  }
+
+  /** Set the board scale, clamped to the configured limits. */
+  setZoom(value: number): void {
+    if (!Number.isFinite(value)) throw new TypeError('Zoom must be finite.');
+    this._zoom = this._clampZoom(value);
+    this._applyZoom();
+  }
+
+  /** Return the current board scale multiplier. */
+  getZoom(): number { return this._zoom; }
+
+  /** Restore the board to 100% scale. */
+  resetZoom(): void { this.setZoom(1); }
+
+  private _clampZoom(value: number): number {
+    if (!Number.isFinite(value)) throw new TypeError('Zoom must be finite.');
+    const min = this.options.minZoom ?? 0.5;
+    const max = this.options.maxZoom ?? 2;
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min <= 0 || max < min) throw new TypeError('Invalid zoom limits.');
+    return Math.min(max, Math.max(min, value));
+  }
+
+  private _applyZoom(): void {
+    this.el.style.setProperty('--kanban-zoom', String(this._zoom));
+    this.el.dataset.zoom = String(this._zoom);
   }
 
   static init(el: HTMLElement, options?: Partial<KanbanOptions>): Kanban;
@@ -107,6 +152,21 @@ export class Kanban extends Component<KanbanOptions> {
       const body = column.querySelector<HTMLElement>('.kanban-column-body');
       if (body) body.setAttribute('role', 'list');
       column.querySelectorAll<HTMLElement>('.kanban-card').forEach((card) => {
+        // Optional inline item colors override the Materialize defaults while
+        // keeping the public markup independent from the Sass implementation.
+        const color = card.dataset.kanbanColor;
+        const textColor = card.dataset.kanbanTextColor;
+        const accent = card.dataset.kanbanAccent;
+        const accentPosition = card.dataset.kanbanAccentPosition;
+        if (color && CSS.supports('color', color)) card.style.setProperty('--kanban-card-color', color);
+        if (textColor && CSS.supports('color', textColor)) card.style.setProperty('--kanban-card-text', textColor);
+        if (accent && CSS.supports('color', accent)) {
+          card.style.setProperty('--kanban-card-accent', accent);
+          card.classList.add('kanban-card-accent');
+        }
+        if (['top', 'right', 'bottom', 'left'].includes(accentPosition || '')) {
+          card.classList.add(`kanban-card-accent-${accentPosition}`);
+        }
         card.setAttribute('role', 'listitem');
         const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
         card.setAttribute('tabindex', disabled ? '-1' : '0');

package/components/textfield/_input-fields.scss

@@ -163,16 +163,21 @@ textarea.materialize-textarea {
     user-select: none;
   }
 
-  .prefix ~ input, .prefix ~ textarea {
+  .prefix ~ input:not([type=checkbox]):not([type=radio]), .prefix ~ textarea {
     padding-left: calc(12px + 24px + 16px);
   }
-  .suffix ~ input, .suffix ~ textarea {
+  .suffix ~ input:not([type=checkbox]):not([type=radio]), .suffix ~ textarea {
     padding-right: calc(12px + 24px + 16px);
   }
   .prefix ~ label {
     left: calc(12px + 24px + 16px);
   }
 
+  // Reserve space beneath an already-floating label even before focus.
+  &:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:placeholder-shown) {
+    padding-top: 20px;
+  }
+
   // Outlined
 
   // todo: use this approach for floating labels with outline

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

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.23 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.24 (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.23 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.24 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -13864,6 +13864,7 @@ button.btn-floating {
   }
 }
 .kanban-board {
+  --kanban-zoom: 1;
   --kanban-column-width: 20rem;
   --kanban-gap: 1rem;
   display: -webkit-box;
@@ -13874,7 +13875,7 @@ button.btn-floating {
   -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start;
-  gap: var(--kanban-gap);
+  gap: calc(var(--kanban-gap) * var(--kanban-zoom));
   width: 100%;
   padding: 0.25rem;
   overflow-x: auto;
@@ -13882,6 +13883,9 @@ button.btn-floating {
           box-sizing: border-box;
   overscroll-behavior-x: contain;
 }
+.kanban-board > .kanban-column {
+  zoom: var(--kanban-zoom);
+}
 .kanban-board.kanban-wrap {
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
@@ -13998,8 +14002,8 @@ button.btn-floating {
   padding: 1rem;
   border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: 0.75rem;
-  background: var(--md-sys-color-surface);
-  color: var(--md-sys-color-on-surface);
+  background: var(--kanban-card-color, var(--md-sys-color-surface));
+  color: var(--kanban-card-text, var(--md-sys-color-on-surface));
   -webkit-box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
           box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
   cursor: -webkit-grab;
@@ -19009,15 +19013,24 @@ textarea.materialize-textarea {
       -ms-user-select: none;
           user-select: none;
 }
-.input-field .prefix ~ input, .input-field .prefix ~ textarea {
+.input-field .prefix ~ input:not([type=checkbox]):not([type=radio]), .input-field .prefix ~ textarea {
   padding-left: 52px;
 }
-.input-field .suffix ~ input, .input-field .suffix ~ textarea {
+.input-field .suffix ~ input:not([type=checkbox]):not([type=radio]), .input-field .suffix ~ textarea {
   padding-right: 52px;
 }
 .input-field .prefix ~ label {
   left: 52px;
 }
+.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:-moz-placeholder) {
+  padding-top: 20px;
+}
+.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:-ms-input-placeholder) {
+  padding-top: 20px;
+}
+.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:placeholder-shown) {
+  padding-top: 20px;
+}
 .input-field.outlined input:not([type=checkbox]):not([type=radio]), .input-field.outlined textarea {
   padding-top: 0;
   background-color: transparent;