kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.22

package/components/kanban/_kanban.scss

@@ -71,6 +71,7 @@
 }
 
 .kanban-card {
+  --kanban-card-accent: var(--md-sys-color-primary);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -83,6 +84,8 @@
   box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
   cursor: grab;
   user-select: none;
+  overflow: hidden;
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
 
   &:active,
   &.is-dragging {
@@ -91,12 +94,78 @@
 
   &.is-dragging {
     opacity: 0.45;
+    box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
   }
 
   &:focus-visible {
     outline: 2px solid var(--md-sys-color-primary);
     outline-offset: 2px;
   }
+
+  &.kanban-card-accent {
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 0.25rem;
+      background: var(--kanban-card-accent);
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  &.kanban-card-accent-top::after {
+    top: 0;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 0.25rem;
+  }
+
+  &.kanban-card-accent-right::after {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: auto;
+    width: 0.25rem;
+    height: 100%;
+  }
+
+  &.kanban-card-accent-left::after {
+    top: 0;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 0.25rem;
+    height: 100%;
+  }
+
+  &.is-disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.55;
+    filter: saturate(0.55);
+  }
+}
+
+.kanban-drag-image {
+  position: fixed !important;
+  top: -10000px !important;
+  left: -10000px !important;
+  z-index: -1;
+  pointer-events: none;
+  transform: rotate(2deg) scale(1.015);
+  transform-origin: center;
+}
+
+.kanban-drop-preview {
+  min-height: 4rem;
+  box-sizing: border-box;
+  border: 2px dashed var(--md-sys-color-primary);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent);
+  pointer-events: none;
 }
 
 .kanban-card-title {

package/components/kanban/kanban.ts

@@ -21,13 +21,24 @@ const _defaults: KanbanOptions = {
 export class Kanban extends Component<KanbanOptions> {
   private _draggedCard: HTMLElement | null = null;
   private _dragSourceColumn: HTMLElement | null = null;
+  private _dropPreview: HTMLElement | null = null;
+  private _dragImage: HTMLElement | null = null;
+  private _previewHeight = 64;
 
   private _onDragStart = (event: DragEvent) => {
     const card = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
-    if (!card || !this.options.draggable) return;
+    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));
     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`;
+    document.body.appendChild(this._dragImage);
+    event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
     event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
     if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
   };
@@ -40,6 +51,7 @@ export class Kanban extends Component<KanbanOptions> {
     if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
     this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
     column.classList.add('is-drag-over');
+    this._updateDropPreview(column, event);
   };
 
   private _onDrop = (event: DragEvent) => {
@@ -50,15 +62,18 @@ export class Kanban extends Component<KanbanOptions> {
     const body = column.querySelector<HTMLElement>('.kanban-column-body') || column;
     const targetCard = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
     const source = this._dragSourceColumn;
-    if (targetCard && targetCard !== this._draggedCard && targetCard.parentElement === body) {
-      const box = targetCard.getBoundingClientRect();
-      body.insertBefore(this._draggedCard, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+    const movedCard = this._draggedCard;
+    if (this._dropPreview?.parentElement === body) {
+      body.insertBefore(movedCard, this._dropPreview);
+      this._dropPreview.remove();
+    } else if (targetCard && targetCard !== movedCard && targetCard.parentElement === body) {
+      body.insertBefore(movedCard, targetCard);
     } else {
-      body.appendChild(this._draggedCard);
+      body.appendChild(movedCard);
     }
     this._clearDragState();
     this._updateCounts();
-    if (source && source !== column) this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+    if (source && source !== column) this.options.onMove?.({ card: movedCard, from: source, to: column });
   };
 
   private _onDragEnd = () => this._clearDragState();
@@ -93,8 +108,14 @@ export class Kanban extends Component<KanbanOptions> {
       if (body) body.setAttribute('role', 'list');
       column.querySelectorAll<HTMLElement>('.kanban-card').forEach((card) => {
         card.setAttribute('role', 'listitem');
-        card.setAttribute('tabindex', '0');
-        if (this.options.draggable) card.draggable = true;
+        const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
+        card.setAttribute('tabindex', disabled ? '-1' : '0');
+        if (disabled) {
+          card.setAttribute('aria-disabled', 'true');
+          card.draggable = false;
+        } else if (this.options.draggable) {
+          card.draggable = true;
+        }
       });
     });
     this._updateCounts();
@@ -108,10 +129,15 @@ export class Kanban extends Component<KanbanOptions> {
   }
 
   private _clearDragState() {
+    this._dragImage?.remove();
+    this._dragImage = null;
+    this._dropPreview?.remove();
+    this._dropPreview = null;
     this._draggedCard?.classList.remove('is-dragging');
     this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
     this._draggedCard = null;
     this._dragSourceColumn = null;
+    this._previewHeight = 64;
   }
 
   private _updateCounts() {
@@ -119,9 +145,32 @@ export class Kanban extends Component<KanbanOptions> {
       const count = column.querySelector<HTMLElement>('.kanban-column-count');
       const body = column.querySelector<HTMLElement>('.kanban-column-body');
       if (count && body) count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+      const empty = body?.querySelector<HTMLElement>('.kanban-empty');
+      if (empty && body) empty.hidden = body.querySelectorAll(':scope > .kanban-card').length > 0;
     });
   }
 
+  private _updateDropPreview(column: HTMLElement, event: DragEvent) {
+    const body = column.querySelector<HTMLElement>('.kanban-column-body') || column;
+    const targetCard = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
+    if (targetCard === this._draggedCard) return;
+    if (!this._dropPreview) {
+      this._dropPreview = document.createElement('div');
+      this._dropPreview.className = 'kanban-drop-preview';
+      this._dropPreview.setAttribute('aria-hidden', 'true');
+    }
+    // Keep the preview tied to the dragged card's original height. Using the
+    // hovered card's height makes the placeholder jump as the pointer crosses
+    // cards with different content lengths.
+    this._dropPreview.style.height = `${this._previewHeight}px`;
+    if (targetCard && targetCard.parentElement === body) {
+      const box = targetCard.getBoundingClientRect();
+      body.insertBefore(this._dropPreview, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+    } else if (this._dropPreview.parentElement !== body) {
+      body.appendChild(this._dropPreview);
+    }
+  }
+
   destroy() {
     this._clearDragState();
     this.el.removeEventListener('dragstart', this._onDragStart);

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

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.21 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.22 (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.21 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.22 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -13983,6 +13983,7 @@ button.btn-floating {
 }
 
 .kanban-card {
+  --kanban-card-accent: var(--md-sys-color-primary);
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -14007,6 +14008,11 @@ button.btn-floating {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  overflow: hidden;
+  -webkit-transition: opacity 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
+  transition: opacity 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
 }
 .kanban-card:active, .kanban-card.is-dragging {
   cursor: -webkit-grabbing;
@@ -14014,11 +14020,74 @@ button.btn-floating {
 }
 .kanban-card.is-dragging {
   opacity: 0.45;
+  -webkit-box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
+          box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
 }
 .kanban-card:focus-visible {
   outline: 2px solid var(--md-sys-color-primary);
   outline-offset: 2px;
 }
+.kanban-card.kanban-card-accent::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 0.25rem;
+  background: var(--kanban-card-accent);
+  content: "";
+  pointer-events: none;
+}
+.kanban-card.kanban-card-accent-top::after {
+  top: 0;
+  bottom: auto;
+  left: 0;
+  width: 100%;
+  height: 0.25rem;
+}
+.kanban-card.kanban-card-accent-right::after {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  width: 0.25rem;
+  height: 100%;
+}
+.kanban-card.kanban-card-accent-left::after {
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  width: 0.25rem;
+  height: 100%;
+}
+.kanban-card.is-disabled, .kanban-card[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.55;
+  -webkit-filter: saturate(0.55);
+          filter: saturate(0.55);
+}
+
+.kanban-drag-image {
+  position: fixed !important;
+  top: -10000px !important;
+  left: -10000px !important;
+  z-index: -1;
+  pointer-events: none;
+  -webkit-transform: rotate(2deg) scale(1.015);
+          transform: rotate(2deg) scale(1.015);
+  -webkit-transform-origin: center;
+          transform-origin: center;
+}
+
+.kanban-drop-preview {
+  min-height: 4rem;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border: 2px dashed var(--md-sys-color-primary);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent);
+  pointer-events: none;
+}
 
 .kanban-card-title {
   margin: 0;